/* Five related drawings, composed for their different subjects. The viewport and
   drawing timeline stay owned by poetic-chapters; text remains readable at rest. */
[data-poetic-scene="writing"] .poetic-copy {
  top: 14%;
  left: max(8vw, calc((100vw - 1200px)/2));
  width: min(69vw, 900px);
}
[data-poetic-scene="writing"] .poetic-art {
  right: 1%; bottom: 5%; width: min(88vw, 1450px); height: 60%;
}
[data-poetic-scene="research"] .poetic-copy {
  top: 12%; left: 45%; width: min(48vw, 700px);
}
[data-poetic-scene="research"] .poetic-copy blockquote {
  font-size: clamp(32px, 3.15vw, 52px);
}
[data-poetic-scene="research"] .poetic-art {
  left: 3%; right: auto; bottom: 5%; width: min(86vw, 1350px); height: 59%;
}
[data-poetic-scene="projects"] .poetic-copy {
  top: 14%; left: 10%; width: 80%; text-align: center;
}
[data-poetic-scene="projects"] .poetic-copy blockquote {
  font-size: clamp(38px, 4.2vw, 64px);
}
[data-poetic-scene="projects"] .poetic-art {
  right: 7%; bottom: 5%; width: 86%; height: 57%;
}
[data-poetic-scene="reading"] .poetic-copy {
  top: 15%; left: max(10vw, calc((100vw - 1160px)/2)); width: min(72vw, 960px);
}
[data-poetic-scene="reading"] .poetic-art {
  right: 2%; bottom: 4%; width: min(88vw, 1460px); height: 64%;
}
/* In short landscape windows, keep words above the ink instead of shrinking the
   entire scene or allowing an overlap. The SVG keeps its own natural proportions. */
@media (min-width: 651px) and (max-height: 650px) {
  [data-poetic-scene="arrival"] .poetic-art { height: 67%; bottom: 1%; }
  [data-poetic-scene="writing"] .poetic-copy { top: 10%; }
  [data-poetic-scene="writing"] .poetic-copy blockquote { font-size: clamp(28px, 3.8vw, 43px); }
  [data-poetic-scene="research"] .poetic-copy { top: 9%; left: 43%; width: 51%; }
  [data-poetic-scene="research"] .poetic-copy blockquote { font-size: clamp(25px, 2.65vw, 33px); }
  [data-poetic-scene="projects"] .poetic-copy { top: 10%; }
  [data-poetic-scene="projects"] .poetic-copy blockquote { font-size: clamp(28px, 3.4vw, 40px); }
  [data-poetic-scene="reading"] .poetic-copy { top: 10%; }
  [data-poetic-scene="reading"] .poetic-copy blockquote { font-size: clamp(28px, 3.7vw, 42px); }
  [data-poetic-scene]:not([data-poetic-scene="arrival"]) .poetic-copy cite { margin-top: 14px; }
}
@media (max-width: 650px) {
  [data-poetic-scene="writing"] .poetic-copy {
    top: 16%; left: 26px; width: calc(100% - 52px);
  }
  [data-poetic-scene="writing"] .poetic-art {
    right: -5%; width: 108%; height: 38%; bottom: 10%;
  }
  [data-poetic-scene="research"] .poetic-copy {
    top: 13%; left: 30px; width: calc(100% - 54px);
  }
  [data-poetic-scene="research"] .poetic-copy blockquote {
    font-size: clamp(26px, 6.8vw, 35px);
  }
  [data-poetic-scene="research"] .poetic-art {
    left: -8%; right: auto; bottom: 8%; width: 108%; height: 39%;
  }
  [data-poetic-scene="projects"] .poetic-copy {
    top: 17%; left: 22px; width: calc(100% - 44px); text-align: center;
  }
  [data-poetic-scene="projects"] .poetic-copy blockquote {
    font-size: clamp(28px, 7.3vw, 38px);
  }
  [data-poetic-scene="projects"] .poetic-art {
    right: -3%; bottom: 10%; width: 106%; height: 38%;
  }
  [data-poetic-scene="reading"] .poetic-copy {
    top: 16%; left: 26px; width: calc(100% - 52px);
  }
  [data-poetic-scene="reading"] .poetic-art {
    right: -5%; bottom: 7%; width: 108%; height: 43%;
  }
}
@media (max-width:650px) and (max-height:650px) {
  [data-poetic-scene]:not([data-poetic-scene="arrival"]) .poetic-copy { top: 11%; }
  [data-poetic-scene]:not([data-poetic-scene="arrival"]) .poetic-copy blockquote { font-size: 26px; }
  [data-poetic-scene]:not([data-poetic-scene="arrival"]) .poetic-copy cite { margin-top: 14px; }
  [data-poetic-scene="research"] .poetic-copy blockquote { font-size: 24px; }
}
@media print {
  [data-poetic-scene] .poetic-copy { left: 0; top: 12%; width: 60%; text-align: left; }
  [data-poetic-scene] .poetic-art { left: auto; right: 0; }
}