/* Splat & Friends (friends.html): the cast of the Splat the Cat books. */
.fr{max-width:1360px;margin:0 auto;padding:12px 32px 72px;box-sizing:border-box}
.fr-hero{display:grid;gap:24px;margin:8px 0 48px}
.fr-kicker{margin:0;font-family:'Caveat',cursive;font-size:28px;color:#a85565}
.fr h1{margin:0;font-family:'Caveat Brush','Caveat',cursive;font-weight:400;font-size:clamp(56px,7vw,104px);line-height:.95;transform:rotate(-1.5deg);transform-origin:left bottom;color:#2b1427}
.fr-lede{margin:16px 0 0;max-width:38em;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#3b3346}
.fr-art{margin:0 auto;max-width:1100px;width:100%}
.fr-art img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 26px 50px -30px rgba(43,20,39,.6);transform:rotate(.4deg)}
.fr-cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:36px 32px}
.fr-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:22px;padding:16px 22px 24px;box-shadow:0 20px 40px -30px rgba(43,20,39,.55);transform:rotate(var(--r));scroll-margin-top:16px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.fr-card:hover{transform:rotate(0deg) translateY(-4px)}
.fr-pic{position:relative;aspect-ratio:1/1;margin:0 -6px 14px;border-radius:16px;background:var(--tint);overflow:hidden;display:grid;place-items:end center}
.fr-pic img{display:block;width:88%;height:88%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 10px 10px rgba(43,20,39,.16))}
/* Pictures cropped from a painted scene: fill the frame, and let the white paper take on the card's tint. */
.fr-pic.is-scene img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;mix-blend-mode:multiply;filter:none}
.fr-role{margin:0;font-family:'Caveat',cursive;font-size:22px;color:#a85565}
.fr-card h2{margin:0 0 8px;font-family:'Caveat Brush','Caveat',cursive;font-weight:400;font-size:clamp(34px,3vw,44px);line-height:1;color:#2b1427}
.fr-desc{margin:0 0 14px;font-size:16.5px;line-height:1.6;color:#3b3346}
.fr-card .w-more{margin-top:auto;align-self:flex-start;color:#a85565}
.fr-next{text-align:center;margin:56px 0 0}
@media (max-width:560px){.fr{padding:8px 16px 56px}.fr-cast{gap:28px}.fr-card{padding:14px 18px 22px}}
@media (prefers-reduced-motion:reduce){.fr-card,.fr-card:hover{transform:none;transition:none}}