/* A quiet, stemless mobile cue above Safari's controls. */
@media ((max-width: 800px) or ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-scroll-cue { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
  .note-page .note-scroll-cue svg {
    display: block; flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(20,41,28,.4));
    animation: note-chevron-float 3s ease-in-out infinite;
  }
}
@keyframes note-chevron-float {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .note-page .note-scroll-cue svg { animation: none; }
}

/* The closing invitation belongs on the letter's ivory paper. */
.note-page .note-letter .note-next {
  padding: 16px 0 0;
  margin: 18px 0 0;
  background: transparent;
  color: #14291c;
  text-align: center;
}
.note-page .note-letter .note-next::before {
  content: "";
  display: block;
  width: 38px;
  height: 1px;
  margin: 0 auto 10px;
  background: #b99a60;
}
.note-page .note-letter .note-next p {
  margin: 0 0 6px;
  font: italic 16px/1.25 "Cormorant Garamond", serif;
  opacity: .8;
}
.note-page .note-letter .note-next a {
  display: inline;
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 400 24px/1.2 "Cormorant Garamond", serif;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.note-page .note-letter .note-next a:hover { color: #8a6c3e; }
@media (min-width: 801px) and (not ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-letter .note-signoff {
    align-items: flex-end;
    text-align: right;
  }
}
@media (min-width: 981px) and (not ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-wrap {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    height: auto;
    min-height: calc(100dvh - 78px - var(--desktop-footer-height, 56px));
    align-items: center;
  }
  .note-page .note-letter {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(28px, 4vh, 48px) clamp(36px, 4vw, 64px);
  }
  .note-page .note-letter .note-eyebrow { margin-bottom: 18px; }
  .note-page .note-letter h1 {
    font-size: clamp(54px, 6vw, 82px);
    line-height: .9;
    margin-bottom: 24px;
  }
  .note-page .note-letter .note-body { max-width: none; gap: 34px; }
  .note-page .note-letter .note-body p { font-size: 18px; line-height: 1.45; margin-bottom: 14px; }
  .note-page .note-letter .note-column { display: flex; flex-direction: column; }
  .note-page .note-letter .note-column-left { justify-content: space-between; gap: 14px; }
  .note-page .note-letter .note-column-left p { margin-bottom: 0; }
  .note-page .note-letter .note-column p:last-of-type { margin-bottom: 0; }
  .note-page .note-letter .note-signoff { margin-top: auto; padding-top: 28px; }
  .note-page .note-letter .note-signoff strong { font-size: 34px; line-height: 1.1; }
  .note-page .note-letter .note-next { margin-top: 52px; padding-top: 0; }
  .note-page .note-letter .note-next p { font-size: 16px; }
  .note-page .note-letter .note-next a { font-size: 24px; }
  .note-page .note-photo {
    position: relative;
    top: 0;
    height: auto;
    min-height: 100%;
    align-self: stretch;
  }
  .note-page .note-photo img { position: absolute; inset: 0; }
}
@media ((max-width: 800px) or ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-letter .note-next { margin-top: 10px; padding-top: 0; }
  .note-page .note-letter .note-next a { font-size: 22px; }
}
/* The mobile footer already provides the next step. */
@media ((max-width: 800px) or ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-letter .note-next { display: none; }
}

/* One muted-gold accent for both note dividers. */
@media (min-width: 801px) and (not ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-letter .note-column-right { border-left-color: #b99a60; }
}

/* Finish the desktop reading flow with the invitation below the signature. */
@media (min-width: 981px) and (not ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-letter .note-column-right .note-next {
    margin-top: 36px;
    text-align: right;
  }
  .note-page .note-letter .note-column-right .note-next::before {
    margin-left: auto;
    margin-right: 0;
  }
  .note-page .note-letter .note-column-right .note-next a { font-size: 22px; }
}

/* Snap to the complete mobile letter, with its footer in the same screen. */
@media ((max-width: 800px) or ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  html:has(body.note-page) { scroll-snap-type: none; }
  html:has(body.note-page.navigation-open) { scroll-snap-type: none; }
  .note-page .note-opening-screen,
  .note-page .note-reading-screen {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0;
  }
  .note-page #note-opening { scroll-margin-top: 0; }
  .note-page .note-reading-screen {
    padding-block: 12px;
    min-height: calc(var(--mobile-screen) - var(--mobile-footer-height));
  }
  .note-page .note-letter .note-body { gap: var(--note-mobile-gap, 16px); }
  .note-page .note-letter .note-body p,
  .note-page .note-letter .note-body .note-opening-inline {
    line-height: var(--note-mobile-leading, 1.42) !important;
  }
}

/* Give the mobile paragraphs room by tightening the signoff block. */
@media ((max-width: 800px) or ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-reading-screen { padding-block: 6px; }
  .note-page .note-letter .note-signoff { margin-top: 0; padding: 0; gap: 0; }
  .note-page .note-letter .note-signoff span { line-height: 1.1; }
  .note-page .note-letter .note-signoff strong { margin-top: 1px; line-height: 1; }
}

/* A calmer opening to the phone letter, with slightly wider balanced lines. */
@media (max-width: 800px) and (orientation: portrait) {
  .note-page .note-reading-screen {
    width: calc(100% + 12px); margin-inline: -6px;
    padding-top: 24px; padding-bottom: 6px; box-sizing: border-box;
  }
  .note-page .note-letter .note-body p,
  .note-page .note-letter .note-body .note-opening-inline { text-wrap: balance; }
}

/* Use more of the phone letter width and separate the final paragraph from its signoff. */
@media (max-width: 800px) and (orientation: portrait) {
  .note-page .note-reading-screen { width: calc(100% + 24px); margin-inline: -12px; }
  .note-page .note-letter .note-body,
  .note-page .note-letter .note-column { width: 100%; max-width: none; min-width: 0; }
  .note-page .note-letter .note-column p { width: 100%; max-width: none; text-wrap: balance; }
  .note-page .note-letter .note-signoff { padding-top: 12px; }
}

/* Three inline accents use the genuine medium italic face on every layout. */
.note-page .note-letter .note-quiet-emphasis {
  font-style: italic;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}
/* Retain the small optical size correction on portrait phones. */
@media (max-width: 800px) and (orientation: portrait) {
  .note-page .note-letter .note-quiet-emphasis { font-size: 1.03em; }
}

/* Desktop keeps one quiet italic accent at the surrounding text weight. */
@media (min-width: 801px) and (not ((max-width: 1000px) and (max-height: 500px) and (pointer: coarse) and (hover: none))) {
  .note-page .note-letter .note-quiet-emphasis {
    font-style: normal;
    font-weight: inherit;
  }
  .note-page .note-letter .note-desktop-emphasis { font-style: italic; }
}