.ds-studies{
  --pol-top:   4.01;
  --pol-w:     4.3;
  --pol-h:     5.3;
  --pol-pad:   0.35;
  --pol-photo: 3.15;
  --nail-y:    4.08;
  --nail-x:    2.325;
  --nail-d:    0.18;
  --pol-cap:   0.19;
  --pol-cap-gap: 0.065;
  --pol-cap-head: 0.08;
  --pol-cap-top: 0.3;

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

.ds-studies__title{
  position: absolute;
  top: calc(1.86 * var(--ds-cell));
  left: 0;
  right: 0;
  z-index: 6;

  --ds-title-size: clamp(1.5rem, calc(.76 * var(--ds-cell)), 4.75rem);
  --ds-title-leading: 1.2;
}

.ds-polaroid{
  position: absolute;
  top: calc(var(--pol-top) * var(--ds-cell));
  width: calc(var(--pol-w) * var(--ds-cell));
  height: calc(var(--pol-h) * var(--ds-cell));
  z-index: 3;

  margin: 0;
  cursor: pointer;
  background: #E2E0DD;
  box-shadow: 0 calc(.06 * var(--ds-cell)) calc(.18 * var(--ds-cell)) rgb(0 0 0 / .9);
}

.ds-polaroid--1{
  left: calc(50% - 4.55 * var(--ds-cell));
  transform-origin: 51.74% 1.32%;
}
.ds-polaroid--2{
  left: calc(50% + .25 * var(--ds-cell));
  transform-origin: 48.26% 1.32%;
}

.ds-polaroid img{
  display: block;
  width: calc((var(--pol-w) - 2 * var(--pol-pad)) * var(--ds-cell));
  height: calc(var(--pol-photo) * var(--ds-cell));
  object-fit: cover;
  object-position: 50% 0;
  margin: calc(var(--pol-pad) * var(--ds-cell)) auto 0;
}

.ds-polaroid figcaption{
  position: absolute;
  left:  calc(var(--pol-pad) * var(--ds-cell));
  right: calc(.12 * var(--ds-cell));
  top:   calc((var(--pol-pad) + var(--pol-photo)) * var(--ds-cell));
  height: calc((var(--pol-h) - var(--pol-pad) - var(--pol-photo)) * var(--ds-cell));

  display: grid;
  align-content: start;
  padding-top: calc(var(--pol-cap-top) * var(--ds-cell));
  row-gap: 0;

  font-family: "Rock Salt", cursive;
  font-size: calc(var(--pol-cap) * var(--ds-cell) * var(--pol-cap-fit, 1));
  line-height: calc(1.15em + var(--pol-cap-gap) * var(--ds-cell));
  color: var(--ds-ink);
  text-align: left;
}

.ds-polaroid figcaption span{ white-space: nowrap; }
.ds-polaroid figcaption span:first-child{
  color: var(--ds-red);
  margin-bottom: calc(var(--pol-cap-head) * var(--ds-cell));
}

.ds-polaroid__mark{
  --mark-ink: .18;
  --mark-soft: .14;
  --back-size: .56;

  z-index: 2;
  background: transparent;
  box-shadow: none;

  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s .25s;
}

.ds-polaroid__mark::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(23 23 23 / var(--mark-ink));
  filter: blur(calc(var(--mark-soft) * var(--ds-cell)));
}

.ds-polaroid__mark.is-on{
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

.ds-polaroid__back{
  position: relative;
  z-index: 1;
  width:  calc(var(--back-size) * var(--ds-cell));
  height: calc(var(--back-size) * var(--ds-cell));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-paper);
  cursor: pointer;
  pointer-events: auto;
  opacity: .82;
  transition: opacity .2s ease, transform .25s var(--ds-ease-out);
}

.ds-polaroid__back img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ds-polaroid__back:hover{ opacity: 1; transform: scale(1.08); }
.ds-polaroid__back:active{ transform: scale(.94); }

.ds-polaroid__back:focus-visible{
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 4px;
}

.ds-polaroid.is-gone{ visibility: hidden; }

.ds-nail{
  position: absolute;
  top: calc(var(--nail-y) * var(--ds-cell));
  width:  calc(var(--nail-d) * var(--ds-cell));
  height: calc(var(--nail-d) * var(--ds-cell));
  margin: calc(-.5 * var(--nail-d) * var(--ds-cell)) 0 0
          calc(-.5 * var(--nail-d) * var(--ds-cell));
  z-index: 5;

  border-radius: 50%;
  background: var(--ds-ink);
  box-shadow: 0 calc(.02 * var(--ds-cell)) calc(.05 * var(--ds-cell)) rgb(0 0 0 / .4);
}
.ds-nail--1{ left: calc(50% - var(--nail-x) * var(--ds-cell)); }
.ds-nail--2{ left: calc(50% + var(--nail-x) * var(--ds-cell)); }

.ds-rope{
  position: absolute;
  left: 0;
  width: 100%;
  top: calc((var(--nail-y) - .6) * var(--ds-cell));
  height: calc(2 * var(--ds-cell));
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

.ds-rope path{
  fill: none;
  stroke-linecap: round;
}

.ds-rope__line{
  stroke: var(--ds-red);
  stroke-width: calc(.03 * var(--ds-cell));
}

.ds-rope__hit{
  stroke: transparent;
  stroke-width: calc(.15 * var(--ds-cell));
  pointer-events: stroke;
}

.ds-studies__crane{
  position: absolute;
  z-index: 1;
  height: auto;
  transition: transform .95s var(--ds-ease-out), opacity .7s ease;
  opacity: 0;
}
.ds-studies__crane.is-in{ transform: none; opacity: 1; }

.ds-studies__crane--1{
  left: 0;
  top:   calc(1.15 * var(--ds-cell));
  width: calc(5.36 * var(--ds-cell));
  transform: translateX(-115%);
}
.ds-studies__crane--2{
  right: calc(.75 * var(--ds-cell));
  top:   calc(1 * var(--ds-cell));
  width: calc(1.75 * var(--ds-cell));
  transform: translateY(-160%);
}

.ds-studies__graffiti{
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: calc(-7.8 * var(--ds-cell));
  width: calc(16 * var(--ds-cell));
  height: auto;
  transform: translateX(-50%) scaleY(-1);
  pointer-events: none;
}

.ds-studies__more{
  --more-box: .56;
  --more-mid: 5.6;
  --more-off: 5.2;

  position: absolute;
  z-index: 5;
  top: calc((var(--more-mid) - var(--more-box) / 2) * var(--ds-cell));
  width:  calc(var(--more-box) * var(--ds-cell));
  height: calc(var(--more-box) * var(--ds-cell));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-ink, #171717);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.ds-studies__more--1{ left: calc(50% - (var(--more-off) + var(--more-box) / 2) * var(--ds-cell)); }
.ds-studies__more--2{ left: calc(50% + (var(--more-off) - var(--more-box) / 2) * var(--ds-cell)); }

.ds-studies__more span{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  height: 60%;
  background:
    linear-gradient(currentColor, currentColor) center / 100% var(--more-line, 3px) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--more-line, 3px) 100% no-repeat;
}

.ds-studies__more:hover{ color: var(--ds-red, #E63E3E); transform: rotate(90deg); }
.ds-studies__more:active{ transform: rotate(90deg) scale(.88); }
.ds-studies__more:focus-visible{
  outline: 2px solid var(--ds-red, #E63E3E);
  outline-offset: 2px;
}

@media (max-width: 720px){
  .ds-studies__more{ --more-mid: 10.05; --more-box: .82; --more-line: 2.5px; }
  .ds-studies__more--1{ left: calc(50% - (2.4 + var(--more-box) / 2) * var(--ds-cell)); }
  .ds-studies__more--2{ left: calc(50% + (2.4 - var(--more-box) / 2) * var(--ds-cell)); }
}

@media (max-width: 720px){
  .ds-studies{
    --ds-cell: min(10.2vw, var(--ds-sec-h) / 10.24);
    --st-nav: 72px;
    --st-shift: max(0px, (var(--ds-sec-h) - var(--st-nav) - 8.6 * var(--ds-cell)) / 2
                         + var(--st-nav) - 1.86 * var(--ds-cell));
    --pol-cap: .25;
    top: var(--st-shift);
  }
  .ds-studies__crane{ display: none; }

  .ds-polaroid__mark{
    --mark-ink: .36;
    --mark-soft: .09;
    --back-size: .95;
  }
  .ds-polaroid__back{ opacity: .95; }

  .ds-studies__title{
    --ds-title-size: min(calc(.76 * var(--ds-cell)), 7.4vw);
  }
}

@media (min-width: 721px) and (orientation: portrait){
  .ds-studies{
    --ds-cell: min(8.4vw, var(--ds-sec-h) / 10.24);
    --st-nav: 72px;
    --st-shift: max(0px, (var(--ds-sec-h) - var(--ds-sec-cut, 0px) - var(--st-nav) - 7.45 * var(--ds-cell)) / 2
                         + var(--st-nav) - 1.86 * var(--ds-cell));
    top: var(--st-shift);
  }
  .ds-studies__crane{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .ds-studies__crane{ transition: opacity .3s ease; transform: none; }
  .ds-studies__more{ transition: color .2s ease; }
  .ds-studies__more:hover,
  .ds-studies__more:active{ transform: none; }
}