/* Small keepsake accents echo the alphabet blocks on the welcome page. */
.scrapbook-frame{position:relative;display:block;width:100%;min-width:0;padding:12px 0 13px;isolation:isolate}
.scrap-decor,.scrap-decor *{pointer-events:none;user-select:none}
.scrap-decor{position:absolute;inset:0;z-index:2}
.scrap-decor>span{position:absolute;display:block}
.scrap-tape{top:3px;left:calc(50% - 34px);width:68px;height:21px;transform:rotate(-5deg);background:repeating-linear-gradient(90deg,#ffe3a7da 0 3px,#ffd989d9 3px 5px);clip-path:polygon(4% 0,96% 0,94% 16%,100% 29%,95% 43%,100% 59%,95% 73%,98% 87%,95% 100%,3% 100%,6% 85%,0 71%,5% 57%,0 42%,5% 28%,1% 14%);box-shadow:0 2px 2px #4c19570d}
.keepsake-listening .scrap-tape,.keepsake-siblings .scrap-tape,.education-keepsake .scrap-tape{background:repeating-linear-gradient(90deg,#d8e5f5ed 0 3px,#ccdcefe0 3px 5px);transform:rotate(5deg)}
.keepsake-transitions .scrap-tape,.keepsake-bedtime .scrap-tape{background:repeating-linear-gradient(90deg,#f3d5dee8 0 3px,#edcbd6de 3px 5px)}
.scrap-star{color:#bc711a;font:30px/1 Georgia,serif;text-shadow:1px 1px 0 #fffaf7}
.star-left{left:-6px;top:28px;transform:rotate(-12deg)}
.star-right{right:-6px;top:35px;transform:rotate(9deg)}
.star-bottom{left:8px;bottom:0;color:var(--brand-plum);font-size:28px}
.scrap-block{bottom:1px;left:8px;width:27px;height:27px;display:grid!important;place-content:center;background:#ffe0a0;color:var(--brand-plum);border:1.5px solid var(--brand-plum);border-radius:5px;box-shadow:2px 2px 0 #dec9df;font:18px/1 Georgia,serif;transform:rotate(-9deg)}
.block-blue{background:#d9e6f8;transform:rotate(7deg)}
.block-pink{background:#f2d7df;transform:rotate(-6deg)}
.scrap-clip{width:12px;height:38px;border:2px solid #85628e;border-radius:9px;transform:rotate(14deg);filter:drop-shadow(1px 1px 0 #fff9f4)}
.scrap-clip:before{content:'';position:absolute;width:6px;height:27px;left:1px;top:3px;border:1.5px solid #85628e;border-top:0;border-radius:0 0 5px 5px}
.clip-right{right:-2px;top:21px}
.clip-left{left:-2px;top:23px;transform:rotate(-12deg)}
.scrap-pencil{width:64px;height:11px;background:linear-gradient(to bottom,#ffe8a2 0 27%,#f8ba48 27% 73%,#e49b31 73%);border:1px solid #896139;border-radius:1px;box-shadow:0 2px 1px #4c195718;transform:rotate(-8deg)}
.scrap-pencil:before{content:'';position:absolute;top:-1px;left:-11px;width:12px;height:11px;background:linear-gradient(to right,#e4acbc 0 65%,#d0c4d0 65%);border:1px solid #896139;border-radius:3px 0 0 3px}
.scrap-pencil:after{content:'';position:absolute;top:-1px;right:-15px;width:15px;height:11px;background:linear-gradient(to right,#e7cb9f 0 67%,#513b51 67%);clip-path:polygon(0 0,100% 50%,0 100%)}
.pencil-left{left:19px;bottom:6px}
.pencil-right{right:24px;bottom:6px;transform:rotate(6deg)}
.outing-sticker img{display:block;width:100%;height:auto;filter:drop-shadow(1px 2px 1px #4c19571a)}
.outing-meal{left:-4px;top:29px;width:39px;transform:rotate(-9deg)}
.outing-tickets{right:8px;bottom:0;width:78px;transform:rotate(5deg)}
.challenge-tile{background:#fffdf9;box-shadow:0 5px 0 #5b276209}
.challenge-desc{padding:3px 4px 8px;margin:10px 0 16px;background:repeating-linear-gradient(to bottom,transparent 0 23px,#e4d7e744 23px 24px);border-bottom:1px solid #eadfea}
.challenge-button{z-index:3}

/* A quieter version of the same frame for the connected education page. */
.education-keepsake{margin-bottom:13px}
.education-path .education-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;border:4px solid #e6d5eb;border-radius:14px;background:#e6d5eb}
.education-keepsake .scrap-tape{width:80px;left:calc(50% - 40px)}
.education-keepsake .star-bottom{left:auto;right:9px;bottom:0;color:#bc711a}
.events-host-link{position:relative;overflow:visible}
.events-host-link>img{border-radius:14px 14px 0 0}
.meet-host-caption{border-radius:0 0 14px 14px}
.events-host-link>.scrap-decor>.scrap-tape{top:-9px}
.events-host-link>.scrap-decor>.scrap-clip{right:9px;top:-5px;height:30px}
.events-host-link>.scrap-decor>.scrap-clip:before{height:20px}

/* Soft notebook lines and a binding margin keep the coaching notes readable. */
.coach-note,.say-card{position:relative;background-color:#fffaf3;background-image:linear-gradient(to right,transparent 27px,#e8bdc877 27px,#e8bdc877 28px,transparent 28px),repeating-linear-gradient(to bottom,transparent 0 29px,#d3c4de55 29px 30px);border-color:#e3d3e7;border-radius:7px 14px 9px 7px;box-shadow:4px 5px 0 #5b276209;padding-left:43px}
.coach-note:before,.say-card:before{content:'';position:absolute;left:9px;top:17px;bottom:17px;width:8px;background:radial-gradient(circle at 4px 15px,#e1d2e4 0 3px,transparent 3.5px) 0 0/8px 30px repeat-y;pointer-events:none}
.coach-note:after,.say-card:after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:8px;background:#fffaf3;clip-path:polygon(0 0,100% 0,100% 50%,98% 100%,96% 50%,94% 100%,92% 50%,90% 100%,88% 50%,86% 100%,84% 50%,82% 100%,80% 50%,78% 100%,76% 50%,74% 100%,72% 50%,70% 100%,68% 50%,66% 100%,64% 50%,62% 100%,60% 50%,58% 100%,56% 50%,54% 100%,52% 50%,50% 100%,48% 50%,46% 100%,44% 50%,42% 100%,40% 50%,38% 100%,36% 50%,34% 100%,32% 50%,30% 100%,28% 50%,26% 100%,24% 50%,22% 100%,20% 50%,18% 100%,16% 50%,14% 100%,12% 50%,10% 100%,8% 50%,6% 100%,4% 50%,2% 100%,0 50%);pointer-events:none}
.coach-note>.scrap-decor>.scrap-clip{top:-11px;right:18px;transform:rotate(12deg)}
.say-card{padding-left:40px}

/* The original title-page paper gets matching tape and a pencil in its margin. */
.logo-paper:before{background:repeating-linear-gradient(90deg,#ffe3a7e6 0 3px,#ffd989dd 3px 5px);clip-path:polygon(3% 0,97% 0,94% 18%,100% 34%,95% 50%,100% 68%,95% 83%,98% 100%,3% 100%,6% 82%,0 65%,5% 48%,0 30%,5% 15%)}
.hero-paper-decor>.scrap-pencil{width:78px;left:26px;bottom:-6px;transform:rotate(-7deg)}
.hero-paper-decor>.scrap-clip{right:17px;top:-8px;transform:rotate(12deg)}
@media(max-width:680px){
 .scrapbook-frame{padding-top:11px;padding-bottom:12px}
 .scrap-tape{width:60px;height:19px;left:calc(50% - 30px)}
 .scrap-star{font-size:26px}.scrap-block{width:24px;height:24px;font-size:16px}
 .coach-note{padding-left:40px;padding-right:20px}
 .say-card{padding-left:38px;padding-right:20px}
 .hero-paper-decor>.scrap-pencil{width:59px;left:21px;bottom:-5px}
 .hero-paper-decor>.scrap-clip{right:9px;width:10px;height:31px}
 .hero-paper-decor>.scrap-clip:before{width:4px;height:21px}
 .events-host-link>img{border-radius:11px 11px 0 0}
 .meet-host-caption{border-radius:0 0 11px 11px}
}
@media print{
 .scrap-decor{display:none!important}
 .coach-note,.say-card{background:white;box-shadow:none;border-radius:0;padding-left:20px}
 .coach-note:before,.coach-note:after,.say-card:before,.say-card:after{display:none}
 .scrapbook-frame{padding:0}
}
