/* Field Note placement pass 2 */

/* Tighten the hero vertically without changing its composition. */
.field-note-pretty {
  padding-top: clamp(34px, 5vw, 68px);
  padding-bottom: 46px;
}

.field-note-pretty-art {
  min-height: 300px;
}

.field-note-pretty-art img {
  max-height: 430px;
}

.field-note-pretty-rule {
  margin-top: 14px;
  margin-bottom: clamp(28px, 4vw, 46px);
}

/* Reading width wins: handwritten note now lives only in the closing area. */
.field-note-pretty-body {
  display: block;
  max-width: 760px;
  margin: 0 auto;
}

.field-note-prose {
  max-width: 760px;
}

/* Bring the lower sequence together. */
.field-note-closing {
  margin-top: clamp(34px, 5vw, 58px);
}

.field-note-context-strip {
  margin-top: 32px;
}

.field-note-optin {
  margin-top: 34px;
  padding-top: 26px;
  padding-bottom: 26px;
}

/* With only one note this block no longer renders at all. */
.field-note-pretty-pagination {
  margin-top: 20px;
  padding-top: 18px;
}

@media (max-width: 700px) {
  .field-note-pretty {
    padding-top: 26px;
    padding-bottom: 34px;
  }

  .field-note-pretty-art img {
    max-height: 300px;
  }

  .field-note-pretty-rule {
    margin-bottom: 28px;
  }

  .field-note-closing {
    margin-top: 28px;
  }

  .field-note-optin {
    margin-top: 28px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}