/* Just Jelly Unfiltered: shared styles for topic tags, related posts, and the pen pal invite.
   Used on every Hey You note, Backstage Convo post, podcast episode, resource, and topic page. */
.jj-extras { padding: 8px 20px 64px; background: transparent; }
.jj-extras__inner { max-width: 760px; margin: 0 auto; }
.jj-penpal { text-align: center; background: linear-gradient(160deg, #FDF1F4 0%, #F9E4E9 100%); border: 1px solid rgba(232,90,120,.22); border-radius: 16px; padding: 30px 24px; margin: 24px 0 34px; }
.jj-penpal__text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(20px, 2.6vw, 24px); line-height: 1.45; color: #2A2A2A; margin: 0 auto 18px; max-width: 520px; }
.jj-penpal__btn { display: inline-block; background: #E85A78; color: #fff !important; font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 14px 28px; border-radius: 999px; border: 1.5px solid #E85A78; transition: background .2s ease, color .2s ease; }
.jj-penpal__btn:hover { background: transparent; color: #E85A78 !important; }
.jj-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; }
.jj-tags__label { font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8A8079; margin-right: 4px; }
.jj-tag { display: inline-block; font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; color: #C4566E !important; background: #fff; border: 1px solid rgba(196,86,110,.4); border-radius: 999px; padding: 6px 14px; text-decoration: none; transition: background .2s ease, color .2s ease; }
.jj-tag:hover { background: #C4566E; color: #fff !important; }
.jj-related__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(22px, 3vw, 28px); color: #2A2A2A; margin: 0 0 16px; text-align: left; }
.jj-related__grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .jj-related__grid { grid-template-columns: repeat(3, 1fr); } }
.jj-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(232,90,120,.28); border-radius: 12px; padding: 18px 18px 20px; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.jj-card:hover { border-color: rgba(232,90,120,.6); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(232,90,120,.14); }
.jj-card__kind { font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E85A78; margin: 0 0 8px; }
.jj-card__title { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; line-height: 1.3; color: #2A2A2A; margin: 0; }
.jj-card__desc { font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 14.5px; line-height: 1.6; color: #5C5C5C; margin: 10px 0 0; }
/* topic pages */
.jj-topic-list { display: grid; gap: 14px; }
@media (min-width: 760px) { .jj-topic-list { grid-template-columns: 1fr 1fr; } }
.jj-topic-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 8px; }
.jj-topic-nav .jj-tag[aria-current="page"] { background: #C4566E; color: #fff !important; }
/* author byline + published date (every post) */
.jj-byline { font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.6; color: #6B6460; margin: 12px auto 4px; max-width: 640px; }
.jj-byline a { color: #C4566E; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(196,86,110,.35); }
.jj-byline a:hover { border-bottom-color: #C4566E; }
.jj-byline time { white-space: nowrap; }