/* The gift listening room, in A Word From's joyful blue-and-peach identity. */
.recipient-page {
  --ink: #152033;
  --text: #152033;
  --muted: #566174;
  --paper: #fffef9;
  --line: #d9dce5;
  --display: 'Outfit', sans-serif;
  background: #fffef9;
  color: #152033;
}
.recipient-page .site-header { background: #fffef9; }
.recipient-page .recipient-gift,
.recipient-page .recipient-gift[data-character] {
  --gift-accent: #214cf4;
  --gift-tint: #bac5f8;
  width: min(1120px, calc(100% - 80px));
  margin-top: 46px;
}
.recipient-page .recipient-intro {
  margin-bottom: 24px;
  color: #152033;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
}
.recipient-page .recipient-intro svg { color: #214cf4; }
.recipient-page .recipient-card {
  grid-template-columns: 43% 57%;
  border: 0;
  border-radius: 24px;
  background: #ffe6da;
  box-shadow: none;
}
.recipient-page .recipient-art { min-height: 720px; background: #152033; }
.recipient-page .recipient-art::after {
  background: linear-gradient(180deg, #15203305 30%, #1520330a 48%, #152033ed 100%);
}
.recipient-page .recipient-art-tag {
  top: 26px;
  left: 24px;
  border-color: #fffef95c;
  border-radius: 20px;
  background: #152033b8;
  color: #fffef9;
  padding: 9px 13px;
  font-size: 9px;
  letter-spacing: .6px;
}
.recipient-page .recipient-art-tag svg { color: #f86c80; }
.recipient-page .recipient-art-caption { color: #fffef9; bottom: 38px; }
.recipient-page .recipient-art-caption > span { font-size: 10px; font-weight: 650; opacity: .9; }
.recipient-page .recipient-art-caption > strong {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(33px, 3.6vw, 49px);
  letter-spacing: -1.8px;
}
.recipient-page .recipient-art-caption > strong > span { color: #f86c80; }
.recipient-page .recipient-art-spark { color: #f86c80; bottom: 105px; }
.recipient-page .recipient-message { background: #ffe6da; padding: 46px 48px 36px; }
.recipient-page .recipient-personal {
  margin-bottom: 20px;
  color: #152033;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
}
.recipient-page .recipient-personal svg { color: #214cf4; }
.recipient-page .recipient-message h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(45px, 4.7vw, 65px);
  color: #152033;
  font-weight: 850;
  line-height: .99;
  letter-spacing: -2.4px;
}
.recipient-page .recipient-message h1 > span { font-size: .9em; }
.recipient-page .recipient-message h1 em {
  color: #214cf4;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: normal;
}
.recipient-page .recipient-invitation { color: #445066; font-size: 13px; line-height: 1.7; margin-top: 23px; }
.recipient-page .recipient-audio { border-color: #15203329; margin-top: 25px; padding-top: 20px; }
.recipient-page .recipient-track { color: #445066; font-size: 9px; font-weight: 700; letter-spacing: .8px; }
.recipient-page .recipient-track > span:last-child { color: #214cf4; }
.recipient-page .recipient-audio > audio { accent-color: #214cf4; }
.recipient-page .recipient-play {
  width: 64px;
  height: 64px;
  background: #214cf4;
  color: #fffef9;
  box-shadow: none;
}
.recipient-page .recipient-play:hover { background: #173bbf; }
.recipient-page .recipient-play:focus-visible,
.recipient-page .recipient-player-bottom > button:focus-visible,
.recipient-page .recipient-gift a:focus-visible {
  outline: 3px solid #214cf4;
  outline-offset: 5px;
}
.recipient-page .recipient-waveform { height: 64px; }
.recipient-page .recipient-waveform i { background: #bac5f8; width: 4px; }
.recipient-page .recipient-waveform i.is-heard { background: #214cf4; }
.recipient-page .recipient-seek { min-height: 32px; margin-top: 8px; border: 0; border-radius: 0; box-shadow: none; }
.recipient-page .recipient-seek:focus-visible { outline: 3px solid #214cf4; outline-offset: 2px; border-radius: 4px; }
.recipient-page .recipient-seek::-webkit-slider-runnable-track { height: 4px; }
.recipient-page .recipient-seek::-moz-range-track,
.recipient-page .recipient-seek::-moz-range-progress { height: 4px; }
.recipient-page .recipient-seek::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border-color: #ffe6da; }
.recipient-page .recipient-seek::-moz-range-thumb { width: 10px; height: 10px; border-color: #ffe6da; }
.recipient-page .recipient-timing { color: #445066; font-size: 11px; }
.recipient-page .recipient-player-bottom { margin-top: 10px; color: #445066; font-size: 11px; }
.recipient-page .recipient-player-bottom > span { font-style: normal; }
.recipient-page .recipient-player-bottom > button { color: #214cf4; font-size: 11px; font-weight: 650; min-height: 44px; padding-inline: 10px 0; }
.recipient-page .recipient-player-error { color: #8c2638; font-size: 12px; }
.recipient-page .recipient-actions { margin-top: 20px; gap: 10px; }
.recipient-page .recipient-actions .button {
  background: #214cf4;
  color: #fffef9;
  border: 0;
  border-radius: 13px;
  min-height: 50px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
}
.recipient-page .recipient-actions .button:hover { background: #173bbf; }
.recipient-page .recipient-actions > span { color: #566174; font-size: 11px; }
.recipient-page .recipient-disclosure { color: #566174; font-size: 10px; line-height: 1.65; margin-top: 21px; }
.recipient-page .recipient-afterword { padding-block: 35px 28px; }
.recipient-page .recipient-afterword-spark { color: #f86c80; font-size: 47px; }
.recipient-page .recipient-afterword p {
  font-family: 'Outfit', sans-serif;
  color: #152033;
  font-style: normal;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.5px;
}
.recipient-page .recipient-afterword a { color: #214cf4; font-size: 13px; font-weight: 650; min-height: 44px; margin-top: 0; }
.recipient-page .recipient-afterword a:hover { text-decoration: underline; text-underline-offset: 3px; }
.recipient-page .recipient-links { color: #566174; font-size: 12px; gap: 26px; }
.recipient-page .recipient-links a { min-height: 44px; }
.recipient-page .footer-bottom { color: #566174; }

@media (max-width: 1000px) {
  .recipient-page .recipient-gift,
  .recipient-page .recipient-gift[data-character] { width: min(870px, calc(100% - 48px)); margin-top: 34px; }
  .recipient-page .recipient-message { padding: 36px 30px 31px; }
  .recipient-page .recipient-message h1 { font-size: 54px; }
  .recipient-page .recipient-art-tag { left: 18px; font-size: 8px; padding-inline: 10px; }
  .recipient-page .recipient-art-caption { left: 24px; }
  .recipient-page .recipient-art-caption > strong { font-size: 37px; }
}
@media (max-width: 690px) {
  .recipient-page .recipient-gift,
  .recipient-page .recipient-gift[data-character] { width: min(480px, calc(100% - 28px)); margin-top: 26px; }
  .recipient-page .recipient-intro { font-size: 9px; letter-spacing: 1.1px; gap: 7px; margin-bottom: 18px; }
  .recipient-page .recipient-card { grid-template-columns: 1fr; border-radius: 21px; }
  .recipient-page .recipient-art { height: 285px; min-height: 285px; }
  .recipient-page .recipient-art::after { background: linear-gradient(180deg, #15203305 20%, #15203300 40%, #152033e8 100%); }
  .recipient-page .recipient-art-tag { top: 17px; left: 17px; font-size: 8px; padding: 8px 11px; }
  .recipient-page .recipient-art-caption { bottom: 23px; left: 23px; }
  .recipient-page .recipient-art-caption > span { font-size: 8px; margin-bottom: 7px; }
  .recipient-page .recipient-art-caption > strong { font-size: 39px; letter-spacing: -1.4px; }
  .recipient-page .recipient-art-spark { bottom: 31px; right: 23px; font-size: 44px; }
  .recipient-page .recipient-message { padding: 31px 26px 29px; }
  .recipient-page .recipient-personal { font-size: 9px; margin-bottom: 18px; letter-spacing: 1.4px; }
  .recipient-page .recipient-message h1 { font-size: 55px; letter-spacing: -2px; }
  .recipient-page .recipient-invitation { font-size: 12px; margin-top: 20px; }
  .recipient-page .recipient-audio { margin-top: 23px; }
  .recipient-page .recipient-track { font-size: 8px; letter-spacing: .5px; }
  .recipient-page .recipient-play { width: 60px; height: 60px; }
  .recipient-page .recipient-play-row { gap: 17px; }
  .recipient-page .recipient-actions { align-items: center; margin-top: 18px; }
  .recipient-page .recipient-actions .button { width: 100%; font-size: 14px; }
  .recipient-page .recipient-actions > span { font-size: 11px; }
  .recipient-page .recipient-disclosure { text-align: center; font-size: 10px; }
  .recipient-page .recipient-afterword { padding-block: 29px 20px; }
  .recipient-page .recipient-afterword p { font-size: 21px; }
  .recipient-page .recipient-links { font-size: 11px; gap: 25px; padding-bottom: 10px; }
  .recipient-page .site-footer { width: calc(100% - 32px); }
}
@media (max-width: 360px) {
  .recipient-page .recipient-message { padding-inline: 20px; }
  .recipient-page .recipient-message h1 { font-size: 48px; }
  .recipient-page .recipient-intro { font-size: 8px; letter-spacing: .8px; }
  .recipient-page .recipient-play-row { gap: 14px; }
  .recipient-page .recipient-player-bottom { font-size: 10px; gap: 8px; }
  .recipient-page .recipient-player-bottom > button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .recipient-page .recipient-gift.is-playing .recipient-waveform i { animation: none; }
  .recipient-page .recipient-play { transition: none; }
}

/* Keep the complete illustrated silhouette visible, including hats and ears. */
.recipient-page .recipient-art > img[src^="/brand/characters/"] { object-fit: contain; object-position: center top; }
@media (max-width: 690px) {
  .recipient-page .recipient-art:has(> img[src^="/brand/characters/"]) { height: auto; min-height: 0; aspect-ratio: 1; }
}

/* On a phone, let the recipient reach the play button in the first screen. */
.recipient-page .recipient-afterword div p:last-child{font-size:12px;font-weight:450;letter-spacing:0;color:#566174;margin-top:6px;line-height:1.6}
@media(max-width:690px){
  .recipient-page .recipient-art,
  .recipient-page .recipient-art:has(> img[src^="/brand/characters/"]){height:175px;min-height:175px;aspect-ratio:auto}
  .recipient-page .recipient-art>img{width:52%;height:100%;object-fit:contain;object-position:center}
  .recipient-page .recipient-art>img[src^="/brand/characters/"]{object-position:center}
  .recipient-page .recipient-art::after{background:linear-gradient(90deg,#15203300 30%,#15203366 49%,#152033 60%)}
  .recipient-page .recipient-art-tag,.recipient-page .recipient-art-spark{display:none}
  .recipient-page .recipient-art-caption{left:54%;right:15px;bottom:43px}
  .recipient-page .recipient-art-caption>span{font-size:8px;line-height:1.6;letter-spacing:.7px}
  .recipient-page .recipient-art-caption>strong{font-size:29px;line-height:1.05;letter-spacing:-1px}
  .recipient-page .recipient-message{padding:25px 25px}
  .recipient-page .recipient-personal{margin-bottom:13px}
  .recipient-page .recipient-message h1{font-size:44px;line-height:1.03}
  .recipient-page .recipient-invitation{margin-top:15px}
  .recipient-page .recipient-audio{margin-top:18px;padding-top:17px}
}