/* Fixed project introduction beside a gallery in the page's normal scroll flow. */
.sv-portfolio-detail-page {
  overflow-x: clip;
  --sv-detail-gap: clamp(40px, 4vw, 80px);
}
.sv-portfolio-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--sv-detail-gap);
  align-items: start;
  padding-top: 0;
}
.sv-portfolio-detail__info { color: #271e1b; }
/* Fix the introduction only on desktop; mobile uses the document scroll. */
@media (min-width: 1001px) {
  .sv-portfolio-detail__info {
    position: fixed;
    top: max(var(--sv-content-top), 36vh);
    top: var(--sv-detail-info-top);
    bottom: var(--sv-content-bottom);
    left: var(--sv-content-left);
    width: calc((100% - var(--sv-content-left) - var(--sv-content-right) - var(--sv-detail-gap)) / 3);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(40px, 8vh, 80px);
  }
}
.sv-portfolio-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: #38302d;
  font-family: 'Tinos', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 20px;
  white-space: nowrap;
}
.sv-portfolio-detail__back-icon {
  display: block;
  flex: none;
  width: 15.6px;
  height: 14.4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sv-portfolio-detail__back:hover { opacity: .6; }
.sv-portfolio-detail__back:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.sv-portfolio-detail__copy {
  width: 100%;
  min-width: 0;
  font-family: 'Noto Serif KR', serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 2.1;
  letter-spacing: .04em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.sv-portfolio-detail__title {
  font: inherit;
  font-weight: 700;
  margin: 0 0 16px;
}
.sv-portfolio-detail__description { white-space: pre-line; }
.sv-portfolio-detail__description--secondary {
  margin-top: 40px;
  font-weight: 700;
}
.sv-portfolio-detail__gallery {
  grid-column: 2;
  min-width: 0;
  width: calc(100% - var(--sv-detail-photo-clearance));
  max-width: var(--sv-detail-photo-max-width);
  justify-self: end;
  margin-right: calc(var(--sv-detail-photo-clearance) + var(--sv-detail-photo-wide-inset));
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.sv-portfolio-detail__photo { min-width: 0; margin: 0; }
.sv-portfolio-detail__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.sv-portfolio-detail__empty {
  padding-top: var(--sv-content-top);
  font-size: 13px;
  color: #38302d;
}
@media (max-width: 1000px) {
  .sv-portfolio-detail {
    display: block;
    padding-top: var(--sv-content-top);
  }
  .sv-portfolio-detail__info {
    position: static;
    display: block;
    width: 100%;
    max-height: none;
    overflow: visible;
    /* Measure the gap from the final text, without clipping or a sticky offset. */
    margin-bottom: 60px;
    padding-bottom: 0;
  }
  .sv-portfolio-detail__description--secondary { margin-top: 24px; }
  .sv-portfolio-detail__gallery { grid-column: 1; width: 100%; margin-right: 0; }
  .sv-portfolio-detail__empty { padding-top: 0; }
  .sv-portfolio-detail__back { display: none; }
}
@media (max-width: 500px) {
  .sv-portfolio-detail__description--secondary { margin-top: 20px; }
}