/* Keep the translucent brush edges while giving the title a deeper teal ink. */
.calligraphy-title { filter: brightness(.72) saturate(1.1); }

@media(min-width: 761px) {
  :root { --reader-top: clamp(330px, 40svh, 440px); }

  /* Use the open horizontal space instead of stacking small type above the reader. */
  .hero-copy {
    inset: 0 auto auto 40%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr);
    align-items: center;
    column-gap: 24px;
    width: 58%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .hero-copy h1 {
    width: 100%;
    max-width: calc((var(--reader-top) - 76px) * 2);
    min-width: 0;
    margin: 0;
  }
  .hero-copy .hero-deck {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 2px;
    text-align: left;
  }

  /* The opening stays a spacious portrait poster with the caption beneath the art. */
  .intro-copy {
    left: 38%;
    top: 17%;
    width: min(60vw, 92svh);
    max-width: 1120px;
  }
  .intro-caption { width: 70%; margin: 22px 0 0 auto; }
  .intro-caption .intro-deck { font-size: 15px; line-height: 2; letter-spacing: 2px; }
  .intro-caption .intro-name { margin-top: 18px; font-size: 13px; }
  .intro-caption .intro-name > span { font-size: 11px; }
}

/* At narrower desktop widths, keep the enlarged lettering and place its short deck below. */
@media(min-width: 761px) and (max-width: 1100px) {
  .hero-copy {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: 9px;
  }
  .hero-copy h1 { max-width: calc((var(--reader-top) - 106px) * 2); }
  .hero-copy .hero-deck { font-size: 13px; line-height: 1.7; letter-spacing: 1.5px; }
}

@media(min-width: 1600px) {
  .intro-caption .intro-deck { font-size: 16px; }
}

/* Reserve room for the title's 13px arrival movement on short desktop windows. */
@media(min-width: 761px) and (max-height: 740px) {
  .intro-caption { margin-top: 18px; }
  .intro-caption .intro-deck { font-size: 14px; }
  .intro-caption .intro-name { margin-top: 16px; }
}

@media(min-width: 761px) and (max-height: 680px) {
  .intro-copy { top: 14%; width: min(60vw, 88svh); }
  .intro-caption { margin-top: 16px; }
  .intro-caption .intro-deck { font-size: 13px; line-height: 2; letter-spacing: 1.5px; }
  .intro-caption .intro-name { margin-top: 14px; font-size: 11px; }
  .intro-caption .intro-name > span { font-size: 10px; }
}