/* The keepsakes belong to two people: names, a letter, and an unmistakable wish. */
.boat-name {
  position:absolute; z-index:3; left:28%; top:53%; width:49%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#665e50; font:clamp(11px,1.35vw,19px)/1.1 var(--hand);
  text-align:center; rotate:-4deg; pointer-events:none;
}
.boat-two .boat-name { rotate:3deg; }
.quiet-section { background:linear-gradient(#eef0e9,#f6efdf 24%,#f5efdf); }
.quiet-inner { max-width:820px; }
.quiet-inner h2 { max-width:720px; margin-inline:auto; }
.unsent-note {
  position:relative; isolation:isolate; width:min(630px,100%); margin:60px auto 0;
  padding:44px 48px 42px; text-align:left; rotate:-1deg;
  background:linear-gradient(105deg,#fffcf1,#f9f3e4 80%,#f0e7d4);
  border:1px solid #c5b69760;
  box-shadow:0 16px 35px #6c573817,inset 0 0 45px #ded1b126;
}
.unsent-note::after {
  content:''; position:absolute; z-index:-1; inset:7px;
  border:1px solid #bcae8d29; pointer-events:none;
}
.unsent-note-pin {
  position:absolute; width:95px; height:28px; left:calc(50% - 47px); top:-14px;
  rotate:4deg; background:#cba9866b;
  background-image:repeating-linear-gradient(1deg,transparent 0 2px,#fff2 3px 4px);
  box-shadow:0 1px 4px #5c472715;
}
.unsent-to { color:#ac7157; font:23px/1.45 var(--hand); margin-bottom:28px; }
.unsent-note .quiet-line {
  font-size:clamp(25px,2.7vw,35px); line-height:1.5; margin:24px 0 0;
  color:#53604e; text-align:left;
}
.unsent-note .quiet-line:last-of-type { color:#a45943; }
.unsent-heart { display:block; margin-top:28px; color:#b57158; font:45px/1 var(--hand); text-align:right; }
.archive-page .archive-closing {
  position:relative; isolation:isolate; background:linear-gradient(#f7e9df,#f6efdf);
  color:#344668;
}
.archive-closing .closing-note { max-width:850px; padding:75px 32px 95px; background:transparent; }
.archive-closing .scene-kicker { margin-bottom:34px; color:#ac7157; }
.archive-closing .closing-copy { color:#344668; }
.archive-closing .closing-signature { color:#8d7864; }
.archive-closing .closing-signature [data-copy] { color:#a96048; }
.archive-closing .final-choices button { color:#4c5a4a; border-color:#8e987e80; background:#fffbef80; }
.archive-closing .final-choices button:first-child { color:#fffaf0; border-color:#45594d; background:#45594d; }
.archive-closing .final-choices button:hover { box-shadow:0 5px 17px #63513c15; }
.archive-closing .final-choices button[aria-pressed='true'] { border-color:#a56e4d; box-shadow:0 0 0 3px #ae805629; }
.archive-closing .choice-response { color:#9f6148; }
.archive-closing .last-handwriting { color:#977050; }
.archive-page .archive-footer { background:#f6efdf; }
.archive-dusk-seam,.archive-dawn-seam { height:100px; margin-block:-1px; pointer-events:none; }
.archive-dusk-seam { background:linear-gradient(#f5efdf,#101e30); }
.archive-dawn-seam { background:linear-gradient(#101e30,#f7e9df); }
@media(max-width:600px) {
  .archive-dusk-seam,.archive-dawn-seam { height:80px; }
  .quiet-section { padding:76px 24px 92px; }
  .quiet-inner h2 { font-size:clamp(37px,10vw,47px); }
  .unsent-note { margin-top:43px; padding:34px 22px 30px; }
  .unsent-to { font-size:21px; margin-bottom:23px; }
  .unsent-note .quiet-line { font-size:26px; line-height:1.4; margin-top:25px; }
  .archive-closing .closing-note { padding:64px 26px 88px; }
}
@media(max-width:360px) {
  .unsent-note { padding-inline:17px; }
  .unsent-note .quiet-line { font-size:23px; }
}