/* The homepage: ink leaves the film; paint becomes a seam between memories. */
.journey-home > main { overflow: clip; }
.journey-home .gesture-pause { overflow: visible; z-index: 2; }
.gesture-pause .gesture-ink-strip {
  z-index: 3;
  width: 45%;
  height: clamp(130px, 15vw, 240px);
  right: -2%;
  bottom: -35px;
  transform: rotate(-8deg);
  clip-path: polygon(0 13%, 98% 0, 100% 91%, 3% 100%);
}
.gesture-ink-strip img { object-position: 50% 86%; }
.journey-home .memory-field,
.journey-home .memory-thread { display: none; }
.memory-map .memory-paint-seam {
  z-index: 0;
  left: 13%;
  top: 43%;
  width: 86%;
  height: clamp(160px, 20vw, 320px);
  transform: rotate(-14deg);
  clip-path: polygon(0 9%, 100% 0, 96% 100%, 1% 94%);
}
.memory-paint-seam img { object-position: 51% 70%; transform: scale(1.06); }
.journey-home .memory-aside { z-index: 2; background: var(--white); padding: 17px; }
.journey-home .about-image { position: relative; isolation: isolate; padding-bottom: 55px; }
.journey-home .about-image > a:first-child { position: relative; z-index: 1; display: block; }
.journey-home .about-image > a:first-child img { border-radius: 0; }
.journey-home .about-image > span { position: relative; z-index: 3; display: inline-block; background: var(--white); padding: 9px 0; }
.about-image .portrait-paint-corner {
  z-index: 2;
  right: -16%;
  bottom: 18px;
  width: 53%;
  height: 29%;
  transform: rotate(-8deg);
  clip-path: polygon(4% 0, 100% 9%, 91% 100%, 0 88%);
}
.journey-home .portrait-paint-corner img { border-radius: 0; object-position: 66% 65%; transform: scale(1.45); }
.journey-home .exit { position: relative; isolation: isolate; background: var(--white); overflow: clip; }
.exit > :not(.art-fragment) { position: relative; z-index: 1; }
.exit .exit-blue-cut {
  z-index: 0;
  top: 110px;
  right: -9%;
  width: 33%;
  height: 65%;
  transform: rotate(9deg);
  clip-path: polygon(14% 0, 100% 4%, 87% 100%, 0 94%);
}
.exit-blue-cut img { object-position: 53% 28%; transform: scale(1.6); }
.exit .exit-blue-cut:focus-visible { right: var(--gutter); transform: none; }
.journey-home .exit h2 { font-size: clamp(90px, 12.5vw, 210px); }
.journey-home .exit h2 em { margin-left: 8vw; color: var(--black); }
.journey-home .exit-bottom { width: 74%; }
.journey-home .exit footer { background: var(--white); }

/* The journal opens on a painted spine, cut through the original canvas. */
.chapter-cover .journal-cover-opening > .chapter-field { display: none; }
.chapter-cover .cover-collage { isolation: isolate; }
.cover-collage .cover-painted-spine {
  z-index: 0;
  top: -13%;
  left: 36%;
  width: 35%;
  height: 126%;
  transform: rotate(14deg);
  clip-path: polygon(5% 0, 100% 3%, 89% 100%, 0 95%);
}
.cover-painted-spine img { object-position: 52% 50%; }
.chapter-cover .cover-atelier { width: 79%; left: -1%; top: 20%; }
.chapter-cover .cover-encre { right: -2%; top: 1%; width: 37%; transform: rotate(4deg); }
.chapter-cover .cover-paint { left: 4%; bottom: -3%; width: 46%; transform: rotate(-5deg); }
.chapter-cover .cover-poster { right: 0; bottom: 1%; width: 23%; transform: rotate(3deg); }
.chapter-cover .reading-note { position: relative; isolation: isolate; min-height: 300px; align-items: center; margin-top: 50px; }
.reading-note .cover-ink-margin {
  left: -5%;
  top: 28px;
  width: 49%;
  height: 180px;
  transform: rotate(-9deg);
  clip-path: polygon(0 7%, 100% 0, 94% 87%, 2% 100%);
}
.cover-ink-margin img { object-position: 50% 83%; }
.chapter-cover .reading-note > p { position: relative; z-index: 1; }

/* A change of scale: the painted surface occupies the entire field of view. */
.home-paint-monument {
  position: relative;
  isolation: isolate;
  margin: 0;
  background: var(--black);
  color: var(--white);
  scroll-margin-top: 0;
}
.home-paint-monument .home-monument-work {
  position: relative;
  width: 100%;
  height: clamp(680px, 108svh, 1320px);
  background: var(--black);
}
.home-monument-work > img { object-position: 50% 47%; }
.monument-invitation {
  position: absolute;
  right: var(--gutter);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 38px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--white);
  color: var(--black);
  font: 400 11px/1.4 DM, Arial, sans-serif;
}
.monument-invitation > span:last-child { font-size: 24px; }
.home-paint-monument > figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--gutter) 24px;
  font-size: 11px;
}
.home-paint-monument .home-monument-work:focus-visible { outline-color: var(--white); outline-offset: -9px; }

/* The journal's final page is mostly paint: a paper corner carries the way out. */
.chapter-cover .journal-closing-paint {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: clamp(820px, 108svh, 1380px);
  padding: 0;
  margin-top: 80px;
  border: 0;
  background: var(--white);
  scroll-margin-top: 0;
}
.journal-closing-paint .closing-paint-work { inset: 0; width: 100%; height: 100%; z-index: 0; }
.closing-paint-work > img { object-position: 50% 63%; }
.closing-paint-copy {
  position: relative;
  z-index: 1;
  width: min(65%, 980px);
  padding: 0 var(--gutter) 50px;
  background: var(--white);
}
.chapter-cover .closing-paint-copy h2 {
  font-size: clamp(74px, 8.8vw, 142px);
  line-height: .91;
  letter-spacing: -.065em;
  max-width: 710px;
  margin: 0 0 32px;
}
.closing-paint-label {
  position: absolute;
  bottom: 32px;
  right: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 34px;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 12px 16px;
  background: var(--white);
  color: var(--black);
  font: 400 11px/1.5 DM, Arial, sans-serif;
}
.closing-paint-label > span:last-child { font-size: 24px; }
.journal-closing-paint .closing-paint-work:focus-visible { outline-offset: -9px; }
@media (min-width: 701px) and (max-width: 1000px) {
  .journey-home .exit-bottom { width: 78%; }
  .journey-home .exit .exit-blue-cut { right: -14%; }
  .chapter-cover .reading-note > p { max-width: 46%; }
}
@media (max-width: 700px) {
  .home-paint-monument { scroll-margin-top: 0; }
  .home-paint-monument .home-monument-work { height: max(650px, 92svh); }
  .home-monument-work > img { object-position: 52% 50%; }
  .home-paint-monument > figcaption { font-size: 10px; padding-block: 17px 20px; }
  .monument-invitation { bottom: 24px; gap: 30px; }
  .chapter-cover .journal-closing-paint { min-height: max(850px, 118svh); margin-top: 45px; }
  .closing-paint-copy { width: 88%; padding: 0 var(--gutter) 33px; }
  .chapter-cover .closing-paint-copy h2 { font-size: clamp(57px, 16vw, 110px); margin-bottom: 26px; }
  .closing-paint-work > img { object-position: 58% 64%; }
  .closing-paint-label { right: var(--gutter); bottom: 30px; gap: 10px 16px; }
  .gesture-pause .gesture-ink-strip { width: 77%; height: 28vw; right: -5%; bottom: -24px; }
  .memory-map .memory-paint-seam { top: 43%; left: 11%; width: 120%; height: 42vw; transform: rotate(-17deg); }
  .journey-home .memory-aside { padding: 15px 0; }
  .journey-home .about-image { width: 86%; padding-bottom: 38px; }
  .about-image .portrait-paint-corner { right: -18%; width: 51%; height: 27%; bottom: 10px; }
  .journey-home .exit h2 { font-size: 17vw; margin-block: 75px 44px; }
  .journey-home .exit h2 em { margin-left: 0; }
  .exit .exit-blue-cut { width: 37%; height: 44%; right: -17%; top: 120px; transform: rotate(8deg); }
  .journey-home .exit-bottom { width: 83%; padding-bottom: 45px; }
  .chapter-cover .journal-cover-opening { row-gap: 90px; padding-bottom: 80px; }
  .cover-collage .cover-painted-spine { width: 39%; left: 36%; height: 123%; top: -11%; transform: rotate(12deg); }
  .chapter-cover .cover-encre { width: 41%; }
  .chapter-cover .cover-paint { width: 48%; }
  .chapter-cover .cover-poster { width: 26%; }
  .chapter-cover .reading-note { min-height: 260px; margin-top: 15px; padding-block: 150px 70px; }
  .reading-note .cover-ink-margin { top: 0; left: -10%; width: 82%; height: 30vw; max-height: 190px; }
  .chapter-cover .reading-note > p { max-width: 76%; }
}