.ds-method{
  --mt-title: clamp(1.5rem, calc(.76 * var(--ds-cell)), 4.75rem);
  --mt-hl: rgb(16 118 213 / .30);

  position: absolute;
  inset: 0;
  z-index: 2;
}

.ds-method__title{
  --ds-title-size: var(--mt-title);
  --ds-title-leading: 1.2;
}

.ds-method__lead{
  position: relative;
  display: inline-block;
}

.ds-method__lead img{
  position: absolute;
  left: 0;
  top: 50%;
  width: 7.5em;
  height: auto;
  max-width: none;
  transform: translate(-57%, -44%);
  z-index: -1;
  pointer-events: none;
}

.ds-title[data-ds-ready] .ds-method__lead img{ opacity: 0; }
.ds-title--play .ds-method__lead img{
  animation: ds-method-flower .5s var(--ds-ease-out) var(--ds-title-span, 1s) both;
}

@keyframes ds-method-flower{
  from{ opacity: 0; transform: translate(-57%, -44%) rotate(-40deg) scale(.6); }
  to  { opacity: 1; transform: translate(-57%, -44%); }
}

.ds-method__says{
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-method__says,
.ds-method__things{ display: contents; }

.ds-method__say{ position: relative; }

.ds-method__num,
.ds-method__lab{ display: none; }

.ds-method__say p{
  position: relative;
  z-index: 0;
  margin: 0;
  font-weight: 600;
}

.ds-method__hl{
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --mt-tilt: -3deg;
  --mt-lift: -.03em;
  --mt-fall: 210deg;
}
.ds-method__hl:nth-of-type(even){ --mt-tilt: 2.4deg; --mt-lift: .02em; --mt-fall: -190deg; }
.ds-method__hl:nth-of-type(3n){   --mt-tilt: -1.8deg; --mt-fall: 160deg; }

.ds-method__hl::before{
  content: "";
  position: absolute;
  left: -.06em;
  right: -.06em;
  top: .2em;
  bottom: .12em;
  z-index: -1;
  background: var(--mt-hl);
  transform-origin: 50% 60%;
  transition: transform .3s var(--ds-ease-out);
}

@media (hover: hover){
  .ds-method__hl:hover::before{
    transform: translateY(var(--mt-lift)) rotate(var(--mt-tilt)) scale(1.04);
  }
}

.ds-method__hl.is-fallen{ cursor: default; }
.ds-method__hl.is-fallen::before{
  transition: none;
  animation: ds-method-hl-fall var(--ds-dur-fall, .8s) var(--ds-ease-in) forwards;
}
@keyframes ds-method-hl-fall{
  0%  { transform: translateY(0) rotate(var(--mt-tilt)); opacity: 1; }
  100%{ transform: translateY(90vh) rotate(var(--mt-fall)); opacity: 0; }
}

.ds-method__thing{ display: block; }

.ds-method__pic{
  display: block;
  width: 100%;
  height: auto;
}

.ds-method__pic--hover{
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover){
  .ds-method__thing--swap:hover .ds-method__pic{ opacity: 0; }
  .ds-method__thing--swap:hover .ds-method__pic--hover{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .ds-method__hl::before{ transition: none; }
  .ds-method__hl.is-fallen::before{ animation: none; opacity: 0; }
  .ds-title--play .ds-method__lead img{ animation: none; opacity: 1; }
}

@media (min-width: 721px) and (orientation: landscape) and (pointer: fine),
       (min-width: 721px) and (orientation: landscape) and (pointer: none){
  .ds-method{
    --mt-hl: rgb(230 62 62 / .3);

    --mt-card-w:   max(clamp(230px, 21.5vw, 340px), 3.4 * var(--ds-cell));
    --mt-card-gap: max(clamp(16px, 1.8vw, 32px), .29 * var(--ds-cell));
    --mt-pic-h:    max(clamp(130px, 37.2vh - 110px, 230px), 2.3 * var(--ds-cell));
    --mt-pad:      max(clamp(16px, 1.7vw, 28px), .27 * var(--ds-cell));
    --mt-shadow:   10px 10px 0 rgb(0 0 0 / .85);
  }

  .ds-method__title{
    position: absolute;
    top: calc(1.5 * var(--ds-cell));
    left: 0;
    right: 0;
    translate: 0 calc(.25 * var(--ds-cell));
  }

  .ds-method__lead img{ display: none; }

  .ds-method__stage{
    position: absolute;
    top: calc(1.75 * var(--ds-cell) + 1.2 * var(--mt-title) + 30px);
    bottom: 140px;
    left: var(--ds-gutter);
    right: var(--ds-gutter);

    display: grid;
    grid-template-columns: repeat(4, minmax(0, var(--mt-card-w)));
    grid-template-rows: 1fr auto auto 1fr;
    justify-content: center;
    column-gap: var(--mt-card-gap);
  }

  .ds-method__thing{
    grid-row: 2;
    position: relative;
    width: 100%;
    height: var(--mt-pic-h);
    max-width: none;
    overflow: hidden;
    background: var(--ds-ink);
    box-shadow: var(--mt-shadow);
  }
  .ds-method__thing:nth-child(1){ grid-column: 1; }
  .ds-method__thing:nth-child(2){ grid-column: 2; }
  .ds-method__thing:nth-child(3){ grid-column: 3; }
  .ds-method__thing:nth-child(4){ grid-column: 4; }

  .ds-method__thing--float{
    box-sizing: border-box;
    padding: calc(.10 * var(--mt-pic-h)) 0 calc(.06 * var(--mt-pic-h));
    object-fit: contain;
    object-position: 50% 100%;
  }

  .ds-method__thing--edge .ds-method__pic{
    position: absolute;
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    width: auto;
    height: 94%;
    max-width: none;
  }
  .ds-method__thing:nth-child(4) .ds-method__pic{
    right: auto;
    left: 50%;
    translate: -50% 0;
  }

  .ds-method__say{
    grid-row: 3;
    z-index: 1;
    padding: var(--mt-pad) max(clamp(18px, 1.7vw, 28px), .27 * var(--ds-cell))
             max(clamp(20px, 2vw, 32px), .31 * var(--ds-cell));
    background: var(--ds-paper);
    color: var(--ds-ink);
    box-shadow: var(--mt-shadow);
  }
  .ds-method__say:nth-child(1){ grid-column: 1; }
  .ds-method__say:nth-child(2){ grid-column: 2; }
  .ds-method__say:nth-child(3){ grid-column: 3; }
  .ds-method__say:nth-child(4){ grid-column: 4; }

  .ds-method__num{
    display: block;
    font-family: var(--ds-font-display);
    font-weight: 900;
    font-size: max(clamp(32px, 3vw, 50px), .48 * var(--ds-cell));
    line-height: 1;
    color: var(--ds-red);
  }

  .ds-method__lab{
    display: block;
    margin: 4px 0 14px;
    font-family: var(--ds-font-display);
    font-weight: 800;
    font-size: max(clamp(16px, 1.35vw, 22px), .21 * var(--ds-cell));
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  .ds-method__say p{
    font-family: var(--ds-font-alt);
    font-size: max(clamp(16px, 1.36vw, 21px), .21 * var(--ds-cell));
    line-height: 1.38;
    color: var(--ds-ink);
  }

  @media (prefers-reduced-motion: no-preference){
    .ds-title[data-ds-ready] ~ .ds-method__stage .ds-method__thing,
    .ds-title[data-ds-ready] ~ .ds-method__stage .ds-method__say{ opacity: 0; }

    .ds-title--play ~ .ds-method__stage .ds-method__thing,
    .ds-title--play ~ .ds-method__stage .ds-method__say{
      animation: ds-method-card .7s var(--ds-ease-out) var(--mt-delay, .3s) both;
    }
    .ds-method__thing:nth-child(2), .ds-method__say:nth-child(2){ --mt-delay: .4s; }
    .ds-method__thing:nth-child(3), .ds-method__say:nth-child(3){ --mt-delay: .5s; }
    .ds-method__thing:nth-child(4), .ds-method__say:nth-child(4){ --mt-delay: .6s; }
  }
}

@keyframes ds-method-card{
  from{ opacity: 0; transform: translateY(32px); }
  to  { opacity: 1; transform: none; }
}

@media (max-width: 720px), (orientation: portrait), (pointer: coarse){
  .ds-method{
    --mt-flat-img: clamp(62px, 19vw, 86px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px var(--ds-gutter)
             calc(.4 * var(--ds-cell) + var(--ds-sec-cut, 0px));
  }
  .ds-method__lead img{ width: 6.2em; }

  .ds-method__title{
    flex: none;
    margin: 0 0 .9rem;
  }

  .ds-method__stage{
    position: relative;
    flex: none;

    display: grid;
    grid-template-columns: var(--mt-flat-img) minmax(0, 1fr) var(--mt-flat-img);
    grid-auto-rows: auto;
    align-content: center;
    column-gap: .9rem;
    row-gap: .55rem;
    font-size: 1rem;
  }

  .ds-method__say{
    display: block;
    align-self: center;
    padding: .15em 0 .15em .8rem;
  }
  .ds-method__say::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ds-text-color);
  }
  .ds-method__say p{
    font-family: var(--ds-font-display);
    font-size: clamp(1rem, 4.5vw, 1.2rem);
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ds-text-color);
  }

  .ds-method__say:nth-child(odd){ grid-column: 1 / 3; }
  .ds-method__say:nth-child(even){
    grid-column: 2 / 4;
    padding: .15em .8rem .15em 0;
    text-align: right;
  }
  .ds-method__say:nth-child(even)::before{ left: auto; right: 0; }
  .ds-method__say:nth-child(1){ grid-row: 1; }
  .ds-method__say:nth-child(2){ grid-row: 2; }
  .ds-method__say:nth-child(3){ grid-row: 3; }
  .ds-method__say:nth-child(4){ grid-row: 4; }

  .ds-method__thing{
    position: relative;
    width: 100%;
    height: auto;
    max-width: none;
    align-self: center;
  }
  .ds-method__thing:nth-child(1){ grid-row: 1; grid-column: 3; }
  .ds-method__thing:nth-child(2){ grid-row: 2; grid-column: 1; }
  .ds-method__thing:nth-child(3){ grid-row: 3; grid-column: 3; }
  .ds-method__thing:nth-child(4){ grid-row: 4; grid-column: 1; }

  .ds-method__pic{ max-width: none; }

  .ds-method__thing--float{
    --mt-img-tilt: -3deg;
    transform-origin: 50% 100%;
    transition: rotate .4s var(--ds-ease-out), scale .4s var(--ds-ease-out);
  }
  .ds-method__thing--float:nth-child(2){ --mt-img-tilt: 2.6deg; }

  @media (hover: hover) and (prefers-reduced-motion: no-preference){
    .ds-method__thing--float:hover{
      rotate: var(--mt-img-tilt);
      scale: 1.04;
    }
  }
}

@media (min-width: 721px) and (orientation: portrait){
  .ds-method{
    --mt-flat-img: clamp(96px, min(15vw, (var(--ds-sec-h) - var(--ds-sec-cut, 0px) - 330px) * .18), 170px);
    padding: 90px max(var(--ds-gutter), (100% - 46rem) / 2)
             calc(.8 * var(--ds-cell) + var(--ds-sec-cut, 0px));
  }
  .ds-method__lead img{ width: 7em; }
  .ds-method__title{ margin-bottom: 1.6rem; }
  .ds-method__stage{
    column-gap: 1.4rem;
    row-gap: .9rem;
  }
  .ds-method__say{ padding-left: 1.1rem; }
  .ds-method__say:nth-child(even){ padding: .15em 1.1rem .15em 0; }
  .ds-method__say::before{ width: 3px; }
  .ds-method__say p{ font-size: clamp(1.25rem, 2.7vw, 1.6rem); }
}

@media (min-width: 721px) and (orientation: landscape) and (pointer: coarse){
  .ds-method{
    --mt-land-img: min(25vh, 12.5rem);
    padding: calc(1.3 * var(--ds-cell)) max(5vw, (100% - 70rem) / 2)
             calc(1.1 * var(--ds-cell) + var(--ds-sec-cut, 0px));
  }
  .ds-method__title{ margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
  .ds-method__stage{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: clamp(1.25rem, 2.6vw, 2.5rem);
    row-gap: clamp(.75rem, 2vh, 1.25rem);
  }

  .ds-method__say,
  .ds-method__say:nth-child(even){
    padding: .15em 0 .15em .9rem;
    text-align: left;
  }
  .ds-method__say:nth-child(even)::before{ left: 0; right: auto; }
  .ds-method__say::before{ width: 3px; }
  .ds-method__say p{ font-size: clamp(1.05rem, 1.55vw, 1.35rem); }

  .ds-method__say:nth-child(1){ grid-area: 1 / 1; align-self: end; }
  .ds-method__say:nth-child(2){ grid-area: 2 / 2; align-self: start; }
  .ds-method__say:nth-child(3){ grid-area: 1 / 3; align-self: end; }
  .ds-method__say:nth-child(4){ grid-area: 2 / 4; align-self: start; }

  .ds-method__thing{
    width: auto;
    height: var(--mt-land-img);
    justify-self: center;
  }
  .ds-method__thing:nth-child(1){ grid-area: 2 / 1; align-self: start; }
  .ds-method__thing:nth-child(2){ grid-area: 1 / 2; align-self: end; }
  .ds-method__thing:nth-child(3){ grid-area: 2 / 3; align-self: start; }
  .ds-method__thing:nth-child(4){ grid-area: 1 / 4; align-self: end; }

  .ds-method__pic{
    width: auto;
    height: 100%;
  }
}