/* A quiet photographic thread through the original site's opening cards. */
body[data-scene="workspace"] {
  --page-photo: url("../experiences/original-workspace-v1.jpg");
  --page-photo-mobile: url("../experiences/original-workspace-mobile-v1.jpg");
}
body[data-scene="planning"] {
  --page-photo: url("../experiences/original-planning-v1.jpg");
  --page-photo-mobile: url("../experiences/original-planning-mobile-v1.jpg");
}
body[data-scene="conversation"] {
  --page-photo: url("../experiences/original-conversation-v1.jpg");
  --page-photo-mobile: url("../experiences/original-conversation-mobile-v1.jpg");
}
body[data-scene="recording"] {
  --page-photo: url("../experiences/original-recording-v1.jpg");
  --page-photo-mobile: url("../experiences/original-recording-mobile-v1.jpg");
}
body[data-scene="workshop"] {
  --page-photo: url("../experiences/original-workshop-v1.jpg");
  --page-photo-mobile: url("../experiences/original-workshop-mobile-v1.jpg");
}
body[data-scene="shelves"] {
  --page-photo: url("../experiences/original-shelves-v1.jpg");
  --page-photo-mobile: url("../experiences/original-shelves-mobile-v1.jpg");
}
body[data-scene="writing"] {
  --page-photo: url("../experiences/original-writing-v1.jpg");
  --page-photo-mobile: url("../experiences/original-writing-mobile-v1.jpg");
}
html[data-experience="original"] body[data-scene]:not([data-scene=""])
  .collector-front[data-collector-card]:not(.contact-layout):not(.about-hero-layout) {
  background-color: var(--paper);
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--paper) 98%, transparent) 0%,
    color-mix(in srgb, var(--paper) 94%, transparent) 48%,
    color-mix(in srgb, var(--paper) 86%, transparent) 72%,
    color-mix(in srgb, var(--paper) 38%, transparent) 100%), var(--page-photo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
html[data-experience="original"] body[data-scene]:not([data-scene=""])
  .collector-front[data-collector-card] > p:not(.eyebrow) {
  max-width: 66ch;
}
/* Keep the established sibling-card arrangement on About and Contact. */
html[data-experience="original"] :is(.contact-copy, .about-hero-copy).craft-card {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--paper) 98%, transparent) 0%,
    color-mix(in srgb, var(--paper) 95%, transparent) 70%,
    color-mix(in srgb, var(--paper) 12%, transparent) 100%), var(--page-photo);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: clamp(8rem, 14vw, 13rem);
}
html[data-experience="original"] body:not([data-page="index"])
  :is(.studio-introduction[open], .host-hero-transcript[open]) {
  background-color: var(--paper);
}
@media (max-width: 760px) {
  html[data-experience="original"] body[data-scene]:not([data-scene=""])
    .collector-front[data-collector-card]:not(.contact-layout):not(.about-hero-layout) {
    background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 97%, transparent) 0%,
      color-mix(in srgb, var(--paper) 94%, transparent) 60%,
      color-mix(in srgb, var(--paper) 85%, transparent) 100%), var(--page-photo-mobile);
    background-position: center, center bottom;
  }
  html[data-experience="original"] :is(.contact-copy, .about-hero-copy).craft-card {
    background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 98%, transparent) 0%,
      color-mix(in srgb, var(--paper) 95%, transparent) 70%,
      color-mix(in srgb, var(--paper) 12%, transparent) 100%), var(--page-photo-mobile);
    padding-bottom: 8rem;
  }
}
@media print {
  html[data-experience="original"] body[data-scene] .collector-front[data-collector-card],
  html[data-experience="original"] :is(.contact-copy, .about-hero-copy).craft-card {
    background-image: none !important;
  }
}