.perspective-page {
  padding-top: clamp(16px, 2vw, 32px);
  padding-bottom: clamp(72px, 8vw, 136px);
}
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--wb-muted);
}
.back-link:hover {
  color: var(--wb-charcoal);
}
.perspective-heading {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: end;
  margin-block: clamp(20px, 2.6vw, 40px) clamp(32px, 3.6vw, 56px);
}
.perspective-heading h1 {
  font-size: clamp(56px, 7.4vw, 120px);
}
.perspective-heading p {
  font-size: var(--fs-lead);
  color: var(--wb-muted);
  margin-top: 18px;
}
.perspective-visuals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--column-gap);
}
.perspective-visuals figure {
  min-width: 0;
}
.original-panel,
.design-panel {
  height: clamp(440px, 46vw, 720px);
  background: var(--wb-canvas);
  padding: clamp(28px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.original-panel .sheet {
  --tilt: -2deg;
  width: min(78%, 460px);
}
.original-panel > img,
.design-panel img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.design-panel img {
  filter: drop-shadow(14px 20px 18px var(--wb-object-shadow));
}
.perspective-visuals figcaption {
  font-size: var(--fs-small);
  font-weight: 500;
  padding-top: 16px;
}
.perspective-details {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--column-gap);
  row-gap: 48px;
  padding-top: clamp(56px, 6vw, 104px);
}
.perspective-story {
  grid-column: 1 / span 6;
}
.perspective-details > :last-child {
  grid-column: 8 / -1;
}
.perspective-story h2 {
  font-size: clamp(40px, 4.6vw, 74px);
  margin-block: 22px 28px;
}
.perspective-story > p:not(.eyebrow),
.perspective-story .rte {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #3a3632;
  max-width: 30em;
}
.perspective-story blockquote {
  font-family: var(--font-editorial);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.15;
  margin-bottom: 28px;
}
.participant-portrait {
  width: 180px;
  height: auto;
  margin-top: 28px;
}
.development-note {
  border-top: 1px solid var(--wb-charcoal);
  padding-top: 24px;
}
.development-note > p:not(.eyebrow) {
  font-size: var(--fs-body);
  color: var(--wb-muted);
  margin-block: 16px 12px;
  max-width: 24em;
}
.product-price {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 28px;
}
.purchase-fields {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 16px;
}
.product-form .button {
  width: 100%;
  margin-top: 24px;
}
.product-form > .small {
  margin-top: 14px;
  font-size: 13px;
}
.product-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--column-gap);
  padding-top: 80px;
}
.product-gallery img {
  width: 100%;
  object-fit: contain;
}
.collection-class-photo {
  margin-top: 80px;
}
.collection-class-photo img {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
}
.collection-class-photo figcaption {
  padding-top: 16px;
  font-size: var(--fs-small);
  color: var(--wb-muted);
}
.perspective-give-back {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--wb-rule);
  max-width: 820px;
}
.perspective-give-back h2 {
  font-size: clamp(40px, 4.4vw, 70px);
  margin-bottom: 28px;
}
.perspective-give-back p {
  font-size: var(--fs-lead);
}
.related {
  padding-block: clamp(72px, 8vw, 136px);
  border-top: 1px solid var(--wb-rule);
}
.related h2 {
  font-size: clamp(40px, 4.4vw, 70px);
}
.card-price {
  font-size: 15px;
  font-weight: 500;
  padding-top: 10px;
}
.shop-archive {
  padding-block: 65px 100px;
}
.shop-archive > .prose {
  margin-bottom: 35px;
}
.shop-archive .section-heading h1 {
  font-size: clamp(56px, 7vw, 112px);
}
.cart-page {
  padding-block: 60px 100px;
  min-height: 60vh;
}
.cart-page > h1 {
  margin-block: 20px 50px;
}
.cart-line {
  display: grid;
  grid-template-columns: 140px 1fr 100px 150px;
  gap: 30px;
  align-items: center;
  padding-block: 25px;
  border-top: 1px solid var(--wb-rule);
}
.cart-line img {
  aspect-ratio: 1;
  object-fit: cover;
}
.cart-line h2 {
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: 0;
}
.cart-line p {
  font-size: 14px;
  color: var(--wb-muted);
  margin-top: 8px;
}
.cart-price {
  text-align: right;
  font-size: 16px;
}
.cart-summary {
  display: flex;
  justify-content: end;
  border-top: 1px solid var(--wb-rule);
  padding-top: 40px;
}
.cart-summary > div {
  min-width: 360px;
}
.cart-summary strong {
  font-weight: 500;
  float: right;
  margin-left: 35px;
}
.cart-summary .small {
  margin-block: 16px 28px;
}
.cart-actions {
  display: flex;
  gap: 12px;
}
.cart-quantity input {
  max-width: 100px;
}
@media (max-width: 1000px) {
  .original-panel,
  .design-panel {
    height: 480px;
  }
  .cart-line {
    grid-template-columns: 100px 1fr 80px 100px;
    gap: 20px;
  }
}
@media (max-width: 860px) {
  .perspective-story,
  .perspective-details > :last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .perspective-heading {
    align-items: start;
    gap: 16px;
    flex-direction: column;
  }
  .perspective-heading h1 {
    font-size: clamp(44px, 13vw, 64px);
  }
  .perspective-heading p {
    font-size: 16px;
  }
  .perspective-visuals {
    gap: 28px;
    grid-template-columns: 1fr;
  }
  .original-panel,
  .design-panel {
    height: auto;
    aspect-ratio: 1 / 1.05;
    padding: 28px;
  }
  .original-panel .sheet {
    width: 74%;
  }
  .perspective-visuals figcaption {
    font-size: 13px;
    padding-top: 12px;
  }
  .related .perspective-card:last-child {
    display: none;
  }
  .product-gallery {
    gap: 12px;
    padding-top: 40px;
  }
  .cart-page {
    padding-block: 32px 64px;
  }
  .cart-page > h1 {
    margin-bottom: 32px;
  }
  .cart-line {
    grid-template-columns: 80px 1fr 80px;
    gap: 18px 14px;
  }
  .cart-line h2 {
    font-size: 15px;
  }
  .cart-line p {
    font-size: 13px;
  }
  .cart-price {
    grid-column: 2/-1;
    text-align: left;
    font-size: 15px;
  }
  .cart-quantity label {
    font-size: 13px;
  }
  .cart-summary > div {
    min-width: 0;
    width: 100%;
  }
  .cart-actions .button {
    flex: 1;
    font-size: 14px;
    gap: 12px;
    padding-inline: 12px;
  }
  .shop-archive {
    padding-block: 36px 64px;
  }
}