/* Production notes: two photographic spreads replace the staged paper cut-outs. */
.living-stage .ideas-grid.production-notes-grid {
  display: block;
  /* Each spread occupies the stage, so the transition has no empty middle. */
  height: 190%;
  padding: 0;
  overflow: visible;
  transform-origin: 50% 50%;
}

/*
  The photograph is the page itself.  The copy becomes a physical note laid
  over the worktable rather than a separate, empty column next to it.
*/
.living-stage .production-notes-grid .idea-card {
  --reveal: 0;

  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
}

.living-stage .production-notes-grid .idea-copy,
.living-stage .production-notes-grid .idea-card:nth-child(2) .idea-copy {
  position: absolute;
  z-index: 2;
  bottom: clamp(36px, 7svh, 88px);
  width: min(43%, 35rem);
  margin: 0;
  padding: clamp(24px, 2.5vw, 42px);
  background: rgb(252 251 248 / 96%);
  box-shadow: 0 18px 50px rgb(29 34 35 / 12%);
}

.living-stage .production-notes-grid .idea-card:first-child .idea-copy {
  right: 4%;
}

.living-stage .production-notes-grid .idea-card:nth-child(2) .idea-copy {
  left: 4%;
}

.living-stage .production-notes-grid .idea-copy .headline {
  max-width: 7em;
  margin: 0;
  line-height: 1.02;
}

/* A short Japanese title is clearer as one complete thought. */
.living-stage .production-notes-grid .idea-copy .headline--single-line {
  max-width: none;
  font-size: clamp(36px, 3vw, 52px);
  letter-spacing: -0.075em;
  white-space: nowrap;
}

.living-stage .production-notes-grid .idea-copy .body-copy {
  max-width: 23em;
  margin-top: clamp(12px, 1.4vw, 20px);
}

.living-stage .production-notes-grid .idea-visual {
  position: absolute;
  inset: calc(var(--header-height) + 12px) 3.2% 22px;
  grid-area: auto;
  width: auto;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  background: #e8e1d4;
}

.living-stage .production-notes-grid .paper-scene {
  position: static;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none !important;
}

.living-stage .production-notes-grid .paper-scene > img,
.living-stage .production-notes-grid .craft-visual .paper-scene > img {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* Keep the hands, printer, gifts, and printed photos in the visible crop. */
.living-stage .production-notes-grid .gift-visual .paper-scene > img {
  object-position: 54% 54%;
}

.living-stage .production-notes-grid .craft-visual .paper-scene > img {
  object-position: 52% 56%;
}

/* Each spread appears as its turn arrives in the scroll sequence. */
.living-stage .production-notes-grid .idea-copy,
.living-stage .production-notes-grid .idea-visual {
  opacity: var(--reveal);
  transform: translateY(calc((1 - var(--reveal)) * 36px));
  will-change: opacity, transform;
}

/* The old paper layers stay in the DOM so the established scroll clock keeps working. */
.production-notes-grid .gift-note,
.production-notes-grid .gift-ribbon,
.production-notes-grid .cut-paper,
.production-notes-grid .cut-offcut,
.production-notes-grid .leaf-bed,
.production-notes-grid .cut-leaf,
.production-notes-grid .cut-guide,
.production-notes-grid .workspace-sheet {
  display: none !important;
}

@media (max-width: 760px) {
  .living-stage .ideas-grid.production-notes-grid {
    height: 200%;
    padding: 0;
  }

  .living-stage .production-notes-grid .idea-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 14px;
    width: 88%;
    height: 50%;
    margin: 0 6%;
    padding: calc(var(--header-height) + 18px) 0 18px;
  }

  .living-stage .production-notes-grid .idea-copy,
  .living-stage .production-notes-grid .idea-card:nth-child(2) .idea-copy {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .living-stage .production-notes-grid .idea-copy .headline--single-line {
    font-size: 37px;
    white-space: normal;
  }

  .living-stage .production-notes-grid .idea-visual {
    position: static;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
  }

  .living-stage .production-notes-grid .gift-visual .paper-scene > img {
    object-position: 57% 54%;
  }

  .living-stage .production-notes-grid .idea-copy,
  .living-stage .production-notes-grid .idea-visual {
    transform: translateY(calc((1 - var(--reveal)) * 22px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reduce-motion .living-stage .ideas-grid.production-notes-grid {
    display: block;
    height: auto;
    padding: 65px 4% 42px;
    row-gap: 46px;
  }

  .reduce-motion .living-stage .production-notes-grid .idea-card,
  .reduce-motion .living-stage .production-notes-grid .idea-card:nth-child(2) {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "visual copy";
    gap: 42px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .reduce-motion .living-stage .production-notes-grid .idea-card + .idea-card {
    grid-template-areas: "copy visual";
    margin-top: 64px;
  }

  .reduce-motion .living-stage .production-notes-grid .idea-copy,
  .reduce-motion .living-stage .production-notes-grid .idea-card:nth-child(2) .idea-copy {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  .reduce-motion .living-stage .production-notes-grid .idea-visual {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    aspect-ratio: 3 / 2;
    opacity: 1;
    transform: none;
  }
}