@font-face {
  font-family: 'Recraft Tutorial Century Gothic';
  src: url('assets/projects/resource11/type/tutorial-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.project-detail.project-tutorial {
  position: relative;
  width: 1440px;
  overflow: visible;
  color: #fff;
  font-family: 'Recraft Tutorial Century Gothic', 'Century Gothic', sans-serif;
  font-size: 16px;
  font-weight: 400;
  background: linear-gradient(to right, #273238 0 1080px, #95a3aa 1080px 1440px);
}
.project-detail.project-tutorial::before { content: none; }
.project-tutorial-materials { position: absolute; inset: 0 0 auto; height: 180px; }
.project-tutorial-section-label {
  position: absolute;
  left: 12px;
  width: 150px;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: 16px;
  line-height: 20px;
  pointer-events: none;
}
.project-tutorial-material {
  position: absolute;
  width: 180px;
  height: 180px;
  perspective: 1000px;
  background: var(--tutorial-material-color);
}
.project-tutorial-material-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.35,.05,.25,1);
}
.project-tutorial-material.is-flipped .project-tutorial-material-inner { transform: rotateY(180deg); }
.project-tutorial-material-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--tutorial-material-color);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.project-tutorial-material-back { transform: rotateY(180deg); }
/* Keep the flip inside its original cell. Flat color beneath a photo used to
   show through subpixel texture edges after the whole site was scaled. */
.project-tutorial-material.has-image {
  background: transparent;
  overflow: clip;
}
.project-tutorial-material.has-image .project-tutorial-material-face {
  inset: -0.5px;
}
.project-tutorial-material.has-image .project-tutorial-material-front {
  transform: translateZ(0.02px);
}
.project-tutorial-material.has-image .project-tutorial-material-back {
  background: transparent;
  transform: rotateY(180deg) translateZ(0.02px);
}
.project-tutorial-material-name {
  position: absolute;
  bottom: 12px;
  right: 12px;
  color: #080204;
  font-size: 16px;
  line-height: 20px;
  pointer-events: none;
}
.project-tutorial-material-name.is-top { top: 12px; left: 12px; bottom: auto; right: auto; }
.project-tutorial-material-name.is-top-right { top: 12px; bottom: auto; }
.project-tutorial-material-name.is-bottom-left { left: 12px; right: auto; }
.project-tutorial-material-image,
.project-tutorial-step-image {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.project-tutorial-material-toggle,
.project-tutorial-step-toggle {
  position: absolute;
  z-index: 2;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}
.project-tutorial-material-toggle:focus,
.project-tutorial-step-toggle:focus { outline: none; }
.project-tutorial-material-toggle:focus-visible,
.project-tutorial-step-toggle:focus-visible { outline: 2px dashed #fff; outline-offset: -6px; }
.project-tutorial-steps { position: absolute; width: 720px; overflow: visible; }
.project-tutorial-step {
  position: absolute;
  z-index: 1;
  width: 360px;
  height: 360px;
  margin: 0;
  overflow: hidden;
  background: #273238;
}
.project-tutorial-step.is-expanded { z-index: 5; width: 720px; height: 720px; }
.project-tutorial-step-caption {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 18px;
  white-space: pre-line;
  overflow-wrap: normal;
  text-shadow: 0 1px 2px rgb(0 0 0 / 65%);
  pointer-events: none;
}
.project-tutorial-tips {
  position: absolute;
  left: 180px;
  width: 900px;
  height: 180px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 12px 12px 12px 0;
  color: #fff;
  font-size: 16px;
  line-height: 18px;
  pointer-events: none;
}
.project-tutorial-tips p { margin: 0; padding: 0; max-width: 100%; white-space: pre-line; }
@media (prefers-reduced-motion: reduce) {
  .project-tutorial-material-inner { transition-duration: 1ms; }
}

/* Match wood background colour and exposure while protecting the subject,
   including the original colours of fabric, cord and opaque bottle parts. */
.project-photo-white-balance {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--project-background-mask);
  mask-image: var(--project-background-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.project-photo-white-balance-image {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.project-photo-balance-ready {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}

/* Account for the half-pixel photo bleed while retaining a true 12px inset. */
.project-tutorial-section-label { width: 156px; }
.project-tutorial-material.has-image .project-tutorial-material-name { right: 12.5px; bottom: 12.5px; }
.project-tutorial-material.has-image .project-tutorial-material-name.is-top { top: 12.5px; left: 12.5px; right: auto; bottom: auto; }