/* Pink linen, warm white paper, muted pastel pink, and dark ink. */

:root{--rose:#b9869d;--deep:#814f66;--ink:#2d2a2e;--paper:#fbfaf5}
body{background-color:#c99eaf;background-image:repeating-linear-gradient(0deg,#ffffff19 0,#ffffff19 1px,transparent 1px,transparent 3px),repeating-linear-gradient(90deg,#32242b12 0,#32242b12 1px,transparent 1px,transparent 3px)}
.window{background:#fbfaf5;border-color:#2d2a2e;box-shadow:7px 8px 0 #56434e44,0 19px 45px #33232c29}
.topbar{background:#fbfaf5;color:#2d2a2e;border-bottom-color:#b9869d}
.brand,.topnav a:hover,.topnav a[aria-current=page]{color:#814f66}
.hero{background:#fbfaf5;border-bottom-color:#666066}
.hero-label,.hero-colophon,.hero-actions small{color:#2d2a2e}
.hero h1{color:#2d2a2e;text-shadow:3px 3px 0 #e6cbd7}
.play{background:#fbfaf5;color:#2d2a2e;border-color:#2d2a2e;box-shadow:5px 5px 0 #b9869d}
.play:hover{background:#eee1e6}
.hero-photo{background:#fbfaf5;border-color:#2d2a2e;box-shadow:7px 8px 0 #b9869d88}
.search-strip{background:#b9869d;border-bottom-color:#2d2a2e}
.search-pill{background:#fbfaf5;border-color:#2d2a2e;color:#2d2a2e}
.content-area{background-color:#fbfaf5;background-image:repeating-linear-gradient(90deg,#b9869d18 0,#b9869d18 1px,transparent 1px,transparent 6px)}
.editorial-index{color:#2d2a2e;border-bottom-color:#666066}
.profile-card{background:#d8b1c2;border-color:#2d2a2e;box-shadow:6px 6px 0 #eee1e6}
.fav-heading,.fav-arrow,.fav-position,.tag,.memo,.menu-pill,.song-card,.premium-link,.submitter{background:#fbfaf5;border-color:#666066;color:#2d2a2e}
.fav-heading{color:#814f66}
.tag b,.memo strong,.memo::before,.menu-pill::before,.song-kicker,.note-icon{color:#814f66}
.memo{border-left-color:#b9869d;background:repeating-linear-gradient(0deg,#fbfaf5 0,#fbfaf5 26px,#b9869d25 27px)}
.menu-pill{box-shadow:4px 4px 0 #eee1e6}
.menu-pill span:last-child{background:#eee1e6;color:#2d2a2e;border-color:#666066}
.menu-pill:hover{background:#eee1e6}
.song-title,.song-subtitle{color:#2d2a2e}
.song-progress{background:#eee1e6}.song-progress span{background:#814f66}
.social-pill,.camera{background:#b9869d;border-color:#666066}
.file-bar{background:#fbfaf5;color:#2d2a2e;border-color:#666066}
.file-icon{background:#b9869d;border-color:#b9869d}.dots{color:#b9869d}
.file-gallery,.note-wrap{background:#eddee3}
.file-tile,.note{background:#fbfaf5;border-color:#666066;box-shadow:3px 4px 0 #eee1e6}
.note{border-left-color:#b9869d}

/* A portrait mounted on a curled paper slip; the portrait stays replaceable. */
.hero-photo{
  isolation:isolate;
  padding:48px 17px 28px;
  border:0;
  border-radius:18px 12px 42px 12px;
  background:linear-gradient(135deg,#f1f4f5 0%,#fffdfa 62%,#f5f3f1 100%);
  box-shadow:4px 6px 3px #33283226,12px 16px 18px #33283230;
}
.hero-photo::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border:1px solid #aaaeb05c;
  border-radius:inherit;
  pointer-events:none;
}
.hero-photo::after{
  content:"";
  position:absolute;
  z-index:2;
  top:auto;
  right:0;
  bottom:0;
  width:70px;
  height:54px;
  border:0;
  border-radius:0;
  background:linear-gradient(145deg,#b4b9bf 0%,#e3e6e9 34%,#fffdfa 63%);
  clip-path:polygon(0 100%,100% 7%,100% 100%);
  border-bottom-right-radius:35px;
  transform:none;
  box-shadow:none;
  filter:drop-shadow(-3px -3px 2px #45454a28);
  pointer-events:none;
}
.hero-photo-inner{
  height:100%;
  background:#eee7e7;
  box-shadow:0 1px 4px #20202b45;
}
.hero-photo-inner img{object-position:center 35%}
.photo-caption{left:18px;right:72px;bottom:9px;color:#4c4b50;font-size:7px;letter-spacing:.08em}
.hero-pin{
  top:-26px;
  left:calc(50% - 14px);
  right:auto;
  width:72px;
  height:72px;
  transform:none;
  filter:grayscale(1) brightness(.68) contrast(1.05) drop-shadow(3px 5px 3px #4d333850);
}
.hero-photo:hover{box-shadow:7px 12px 5px #33283226,17px 25px 25px #3328322e}
.hero-colophon{font-size:8px;letter-spacing:.07em;white-space:normal;line-height:1.4;max-width:100%}
.hero-colophon span{padding:0 2px;color:#b9869d}
@media(max-width:570px){
  .hero-photo{padding:32px 9px 21px;border-radius:10px 8px 25px 8px}
  .hero-photo::after{width:39px;height:31px;border-bottom-right-radius:20px}
  .photo-caption{left:10px;right:39px;bottom:5px;font-size:5px}
  .photo-caption span{display:none}
  .hero-pin{top:-16px;left:calc(50% - 9px);right:auto;width:45px;height:45px}
  .hero-colophon{font-size:7px;letter-spacing:.03em}
}