/* Blog article layout + decorative stickers.
   Shared by every post in /blog/ — link this after birthday.css and the prose,
   FAQ and decoration styling all come along. */

/* ---------- prose ---------- */
.article { max-width: 860px; margin: 0 auto; position: relative; z-index: 2; }
.article p { color: rgba(255, 255, 255, 0.82); line-height: 1.75; margin: 0 0 1.1rem; }
.article h3 { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.25rem; color: #fff; margin: 2rem 0 0.6rem; }
.article h3 em { font-style: normal; color: var(--cyan); }
.facts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0; }
.faq dt { font-family: "Fredoka", sans-serif; font-weight: 600; color: #fff; margin-top: 1.4rem; }
.faq dd { margin: 0.4rem 0 0; color: rgba(255, 255, 255, 0.82); line-height: 1.7; }

/* ---------- decorative doodles & character stickers ----------
   Purely ornamental: aria-hidden, non-interactive, and confined to the empty
   gutters either side of the 860px prose column. They're hidden below 1100px,
   where those gutters no longer exist — on a phone there is no empty space to
   decorate and they'd only collide with the text. All offsets stay >= 0 so a
   sticker can never widen the page (see the visit-scrapbook overflow trap). */
.blog-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.blog-deco > * { position: absolute; }

.blog-star { color: var(--yellow); opacity: 0.9; }
.blog-star--cyan { color: var(--cyan); }
.blog-star--pink { color: var(--pink); }

.blog-char {
  width: 150px;
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

/* sections need a positioning context for the absolute layer */
.bd-section, .bd-hero, .bd-cta { position: relative; }

/* per-slot placement */
.blog-deco--article .blog-char { top: 8%; right: 1.5%; transform: rotate(4deg); }
.blog-deco--article .blog-star { top: 4%; left: 3%; width: 54px; }
.blog-deco--article .blog-star--cyan { top: auto; bottom: 8%; left: 5%; width: 38px; }

.blog-deco--faq .blog-char { top: 12%; left: 2%; transform: rotate(-5deg); width: 135px; }
.blog-deco--faq .blog-star { top: 10%; right: 4%; width: 46px; }
.blog-deco--faq .blog-star--pink { top: auto; bottom: 12%; right: 7%; width: 34px; }

.blog-hero-star { position: absolute; top: 14%; right: 6%; width: 70px; color: var(--yellow); opacity: 0.95; pointer-events: none; z-index: 2; }

@media (max-width: 1100px) {
  .blog-deco, .blog-hero-star { display: none; }
}