/* Warm stationery details. Load after style.css; all decoration ignores input. */
body {
  background-color: var(--paper);
  background-image: url('/static/assets/v2/paper-pattern.svg');
  background-repeat: repeat;
  background-size: 640px 640px;
}
.site-header {
  background: #fcf8eff2;
  border-bottom: 1px dashed #d8cfb9;
  border-radius: 0 0 15px 15px;
}
.desktop-nav { border: 1px solid #e4ddc9; background: #f4efdf; }
.desktop-nav .nav-item.active { background: #fffdf5; }
.brand-mark { border: 1px dashed #bdc5a7; background: #edf0dd; }
.page-heading { position: relative; }
.page-heading > div:first-child { min-width: 0; }
.paper-card { border-color: #ddd4bf; box-shadow: 0 3px 0 #ded4bb25, 0 8px 22px #65553905; }
.entry, .letter-card, .about-card, .home-empty { position: relative; }
.entry::before, .home-empty::before, .about-card::before {
  content: '';
  position: absolute;
  width: 59px;
  height: 15px;
  left: 25px;
  top: -8px;
  background: repeating-linear-gradient(90deg, #edcfb995 0 7px, #f4dec98c 7px 9px);
  clip-path: polygon(4% 0, 97% 3%, 100% 25%, 97% 49%, 100% 76%, 95% 100%, 3% 96%, 0 73%, 4% 49%, 0 24%);
  transform: rotate(-5deg);
  pointer-events: none;
}
.entry::before { background: repeating-linear-gradient(90deg, #dbe3cb9c 0 7px, #e8edd993 7px 9px); }
.about-card::before { left: calc(50% - 31px); transform: rotate(4deg); }
.entry .photo-grid { padding: 6px; background: #f8f4e9; border: 1px solid #e8e0cf; border-radius: 8px; }
.entry .entry-head { border-bottom: 1px dashed #e9e2d2; padding-bottom: 10px; }
.letter-card { background-color: #fffdf7; border-style: dashed; }
.letter-card::after {
  content: '';
  position: absolute;
  width: 29px;
  height: 5px;
  right: 18px;
  bottom: 8px;
  border-top: 1px solid #d7c5ac;
  border-bottom: 1px solid #e3d4bc;
  transform: rotate(-7deg);
  opacity: .65;
  pointer-events: none;
}
.letter-stamp { border-radius: 3px; outline: 1px solid #fffaf0; outline-offset: -5px; }
.letter-stamp::after {
  content: '';
  position: absolute;
  right: -9px;
  bottom: -6px;
  width: 21px;
  height: 21px;
  border: 1px solid #c8aa8d;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fffaf06b;
  opacity: .7;
  pointer-events: none;
}
.birthday-card { background-color: #fff2e8; border-color: #dec4b2; }
.wish-card { border-radius: 15px 15px 15px 5px; }
.wish-card::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed #e4deca;
  border-radius: 10px 10px 10px 3px;
  pointer-events: none;
}
.wish-card.completed::after { border-color: #d0d7bf; }
.wish-check { box-shadow: 0 2px 0 #d8dcc538; }
.wish-summary { gap: 13px; }
.wish-stat { border: 1px solid #e0dfcc; border-radius: 12px 12px 5px 12px; }
.wish-stat:nth-child(2) { border-color: #ead9cc; }
.wish-stat:nth-child(3) { border-color: #e3dcb8; }
.reply { border: 1px dashed #dbd7c5; background: #f7f4e9; }
.letter-paper { border-radius: 3px 3px 11px 3px; box-shadow: 2px 3px 0 #e9dfc528; }
.photo-picker { border-color: #bfc9a9; background: #f0f2e5; }
.timeline { border-left-style: dashed; }
.site-footer p { text-shadow: 0 1px 0 var(--paper); }

/* Actual character artwork is supplied by the shared sprite sheet. */
.chara-sticker {
  display: block;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  pointer-events: none;
  user-select: none;
}
.chara-sticker > .sprite { display: block; width: 100%; height: 100%; }
.chara-sticker.tilt-left { transform: rotate(-8deg); }
.chara-sticker.tilt-right { transform: rotate(8deg); }
.sticker-row { display: flex; align-items: flex-end; justify-content: center; gap: 2px; pointer-events: none; }
.sticker-row .chara-sticker { width: 55px; height: 55px; flex-basis: 55px; }
.page-heading .chara-sticker { width: 63px; height: 63px; flex-basis: 63px; }
.empty .sticker-row { margin: -10px 0 3px; }

@media (max-width: 650px) {
  body { background-size: 480px 480px; }
  .site-header { background: #fcf8eff5; border-radius: 0 0 11px 11px; }
  .mobile-nav { background: #fffcf3fa; border-top-style: dashed; }
  .mobile-nav .nav-item.active { background: #eef0df; }
  .entry::before, .home-empty::before, .about-card::before { width: 47px; height: 12px; top: -6px; }
  .entry::before { left: 18px; }
  .about-card::before { left: calc(50% - 24px); }
  .entry .photo-grid { padding: 4px; }
  .entry .entry-head { padding-bottom: 8px; }
  .letter-card::after { right: 13px; width: 22px; bottom: 6px; }
  .letter-stamp::after { width: 17px; height: 17px; right: -7px; bottom: -5px; }
  .wish-summary { gap: 8px; }
  .chara-sticker { width: 60px; height: 60px; flex-basis: 60px; }
  .page-heading .chara-sticker { width: 47px; height: 47px; flex-basis: 47px; }
  .sticker-row .chara-sticker { width: 46px; height: 46px; flex-basis: 46px; }
}