/* The blog shares the homepage palette and paper shapes; editorial content stays intact. */
.blog-joyful .section { padding-block: 28px; background: transparent; }
.blog-joyful .eyebrow { display: inline-block; margin-bottom: 16px; padding: 6px 11px; border-radius: 10px 7px 12px 8px; background: #ffe98d; color: #805139; font-size: 12px; line-height: 1.5; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.blog-joyful main h1 { max-width: 900px; margin: 0 0 20px; color: var(--home-blue); font-size: clamp(34px, 4vw, 50px); line-height: 1.2; overflow-wrap: break-word; }
.blog-joyful main h1::after { content: ""; display: block; width: min(245px, 75%); height: 45px; margin-top: 12px; background: url("assets/icons/gribouillage-crayon.svg") left center / contain no-repeat; transform: rotate(-3deg); }
.blog-joyful main h2 { margin-bottom: 20px; color: var(--home-green); font-size: clamp(26px, 2.8vw, 34px); line-height: 1.3; }
.blog-joyful main h3 { font-family: var(--home-hand); line-height: 1.35; }
.blog-joyful main p, .blog-joyful .story { color: var(--home-ink); }
.blog-joyful .lead { margin: 18px 0; color: var(--home-ink); font-size: 18px; line-height: 1.8; }
.blog-joyful .microcopy { font-size: 13px; line-height: 1.8; color: #596465; }
.blog-joyful .button, .blog-joyful .article-book-link a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 13px 19px; border: 2px solid #b79b48; border-radius: 16px 20px 17px 19px; background: var(--home-yellow); color: var(--home-ink); font-size: 15px; font-weight: 750; line-height: 1.5; text-decoration: none; white-space: normal; box-shadow: 2px 3px 0 #c1a65230; }
.blog-joyful .button.primary::after { display: none; }
.blog-joyful .button:hover, .blog-joyful .article-book-link a:hover { background: #ffce37; transform: none; text-decoration: none; }
.blog-joyful .blog-intro { padding-block: 45px 15px; }
.blog-joyful .blog-intro .lead { max-width: 750px; }
.blog-joyful .blog-intro .eyebrow { transform: rotate(-1deg); }
.blog-joyful .blog-grid { gap: 26px; }
.blog-joyful .blog-card { --blog-paper: #f5faeb; --blog-wash: #d9edba; --blog-edge: #91b46c; --blog-ink: #466332; background: var(--blog-paper); border: 2px solid var(--blog-edge); border-radius: 22px 15px 25px 17px; box-shadow: 4px 5px 0 color-mix(in srgb, var(--blog-edge) 28%, transparent); }
.blog-joyful .blog-card:nth-child(4n+2) { --blog-paper: #fff9df; --blog-wash: #ffe78d; --blog-edge: #d3b24c; --blog-ink: #7c6021; border-radius: 17px 25px 16px 24px; }
.blog-joyful .blog-card:nth-child(4n+3) { --blog-paper: #fff2ed; --blog-wash: #ffd2c1; --blog-edge: #d99b85; --blog-ink: #995239; }
.blog-joyful .blog-card:nth-child(4n+4) { --blog-paper: #edf7ff; --blog-wash: #c7e5f9; --blog-edge: #86b3ce; --blog-ink: #36668a; border-radius: 17px 25px 16px 24px; }
.blog-joyful .blog-card-link:hover { text-decoration: none; }
.blog-joyful .blog-card-link:focus-visible { outline: 3px solid var(--home-blue); outline-offset: -5px; }
.blog-joyful .blog-card-image { position: relative; height: 245px; padding: 24px 22px 20px; background: radial-gradient(ellipse at 30% 40%, #ffffff60 0 45%, transparent 46%), var(--blog-wash); border-radius: 0 0 35% 12% / 0 0 8% 6%; }
.blog-joyful .blog-card-image::before { content: ""; position: absolute; z-index: 1; top: 15px; left: calc(50% - 30px); width: 60px; height: 18px; background: #fff8d2bb; border-inline: 2px dashed #fff7; transform: rotate(-5deg); }
.blog-joyful .blog-card-image img { height: 100%; width: 100%; object-fit: contain; filter: drop-shadow(3px 4px 2px #344d6220); }
.blog-joyful .blog-card-copy { padding: 24px; }
.blog-joyful .blog-card time { align-self: flex-start; padding: 4px 8px; border: 1px solid var(--blog-edge); border-radius: 8px 6px 10px 7px; background: var(--blog-wash); color: var(--blog-ink); font-size: 12px; }
.blog-joyful .blog-card :is(h2, h3) { margin: 16px 0 13px; color: var(--blog-ink); font: 750 24px/1.3 var(--home-hand); }
.blog-joyful .blog-card p { margin-bottom: 22px; font-size: 15px; line-height: 1.75; }
.blog-joyful .blog-read { align-self: flex-start; margin-top: auto; padding: 9px 13px; background: var(--home-yellow); border: 2px solid #b79b48; border-radius: 12px 16px 13px 15px; color: var(--home-ink); font-size: 14px; line-height: 1.5; }
.blog-joyful .blog-related { padding-block: 38px 50px; }
.blog-joyful .blog-related-heading { align-items: flex-end; }
.blog-joyful .blog-related-heading .button { flex-shrink: 0; }
.blog-joyful .blog-related-heading h2 { margin-bottom: 0; }
.blog-joyful .home-footer { margin-top: 30px; }

/* Articles: comfortable reading width, discreet pastel panels and intact illustrations. */
.article-joyful .article-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 24px; font-size: 13px; }
.article-joyful .article-breadcrumb span { margin: 0; }
.article-joyful main > article > header .container,
.article-joyful main > .section:not(.blog-related) > .container { max-width: 900px; }
.article-joyful main > article > header { padding-block: 35px 22px; }
.article-joyful main h1 { font-size: clamp(32px, 3.5vw, 44px); }
.article-joyful .article-byline { margin-block: 18px 24px; }
.article-joyful .story { max-width: 100%; color: var(--home-ink); font-size: 17px; line-height: 1.85; }
.article-joyful .story p { font-size: inherit; line-height: inherit; }
.article-joyful .story p + p { margin-top: 20px; }
.article-joyful .story .microcopy { font-size: 13px; }
.article-joyful .story a, .article-joyful .check-list a { color: #236b92; text-underline-offset: 4px; }
.article-joyful main > article > section > .container,
.article-joyful main > section:not(:first-of-type):not(.blog-related) > .container { padding: clamp(24px, 3.5vw, 40px); border: 2px solid #d5d9bf; border-radius: 27px 20px 29px 22px; background: var(--home-paper); box-shadow: 4px 5px 0 #c9cba522; }
.article-joyful main > article > section.soft-section > .container,
.article-joyful main > section.soft-section:not(.blog-related) > .container { background: #f5faeb; border-color: #a7bf8f; }
.article-joyful .container.narrow { max-width: 850px; }
.article-joyful .article-hero { position: relative; max-width: 780px; margin: 30px auto 24px; padding: 20px 20px 16px; background: #edf7ff; border: 2px solid #86b3ce; border-radius: 24px 17px 27px 20px; box-shadow: 4px 5px 0 #86b3ce25; }
.article-joyful .article-hero::before { content: ""; position: absolute; z-index: 1; left: calc(50% - 35px); top: -10px; width: 70px; height: 22px; background: #f6d664b0; transform: rotate(-5deg); }
.article-joyful .article-hero img { width: 100%; height: auto; max-height: 520px; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 5px; box-shadow: none; }
.article-joyful :is(.article-hero, .drawing-card) figcaption { margin-top: 14px; color: var(--home-ink); font-size: 13px; font-weight: 400; line-height: 1.7; }
.article-joyful .article-book-link { margin: 20px 0 12px; text-align: center; }
.article-joyful .drawing-card { padding: 14px; background: white; border: 1px solid #d7d4c4; border-radius: 9px 13px 10px 12px; box-shadow: 3px 4px 0 #344d6210; transform: none; }
.article-joyful .drawing-card img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 2px; }
.article-joyful .drawing-card figcaption { text-align: center; }
.article-joyful .faq details { padding: 17px 20px; border: 1px solid #ccdac4; border-radius: 13px 18px 15px 16px; background: #fffef8; }
.article-joyful .faq summary { color: var(--home-ink); font-size: 16px; line-height: 1.5; font-weight: 750; }
.article-joyful .faq p { margin-top: 14px; color: var(--home-ink); font-size: 16px; line-height: 1.8; }
.article-joyful .check-list { padding-left: 22px; color: var(--home-ink); font-size: 16px; line-height: 1.85; }
.article-joyful .check-list li + li { margin-top: 9px; }
.article-joyful li::marker { color: var(--home-green); }
.article-joyful .evidence-band { gap: 22px; }
.article-joyful .evidence-band article { padding: 25px; background: #fff9df; border: 2px solid #d3b24c; border-radius: 22px 15px 25px 17px; }
.article-joyful .evidence-band article:nth-child(2) { background: #edf7ff; border-color: #86b3ce; }
.article-joyful .evidence-band h2 { font-size: 26px; }
.article-joyful .evidence-band p { font-size: 16px; line-height: 1.8; }
.article-joyful .age-guide-table-wrap { border: 2px solid #a7bf8f; border-radius: 18px 23px 20px 21px; box-shadow: none; background: #fffdf5; }
.article-joyful .age-guide-table { color: var(--home-ink); font-size: 15px; line-height: 1.7; }
.article-joyful .age-guide-table th { color: #466332; background: #e0f0d2; font-weight: 750; }
.article-joyful .age-guide-table a { color: var(--home-blue); }
.article-joyful .age-guide-table td, .article-joyful .age-guide-table th { border-color: #ccdac4; }
.article-joyful .age-guide-cards { gap: 22px; }
.article-joyful .proof-card { padding: 22px; background: #fff9df; border: 2px solid #d3b24c; border-radius: 22px 15px 25px 17px; box-shadow: 4px 5px 0 #d3b24c22; transform: none; }
.article-joyful .proof-card:nth-child(2) { background: #fff2ed; border-color: #d99b85; }
.article-joyful .proof-card:nth-child(3) { background: #edf7ff; border-color: #86b3ce; }
.article-joyful .proof-card img { width: 100%; height: auto; max-height: 330px; aspect-ratio: auto; object-fit: contain; background: white; border: 1px solid #d7d4c4; border-radius: 6px; box-shadow: none; transform: none; }
.article-joyful .proof-card h3 { margin-block: 18px 12px; color: #7c6021; font-size: 23px; }
.article-joyful .proof-card p { margin: 12px 0; color: var(--home-ink); font-size: 15px; line-height: 1.8; }
.age-guide-joyful main > .section:not(.blog-related) > .container { max-width: 1160px; }
.age-guide-joyful .section > .container.narrow { max-width: 850px; }
.article-joyful .halloween-book-card { background: #fff9df; border: 2px solid #d3b24c; border-radius: 25px 18px 28px 21px; box-shadow: 4px 5px 0 #d3b24c22; }
.article-joyful .halloween-book-card h2 { color: var(--home-green); }
.article-joyful .halloween-book-card .kicker { color: #805139; }
.article-joyful .halloween-book-card p { margin-bottom: 16px; color: var(--home-ink); font-size: 16px; }
.article-joyful main [id] { scroll-margin-top: 24px; }
@media (max-width: 980px) {
  .article-joyful .age-guide-cards { grid-template-columns: minmax(0, 1fr); }
  .article-joyful .proof-card img { max-height: 360px; }
}
@media (max-width: 680px) {
  .blog-joyful .section { padding-block: 20px; }
  .blog-joyful .blog-intro { padding-block: 32px 10px; }
  .blog-joyful main h1 { font-size: clamp(30px, 7.5vw, 38px); }
  .blog-joyful main h2 { font-size: 27px; }
  .blog-joyful .blog-card-image { height: 235px; }
  .blog-joyful .blog-card-copy { padding: 22px; }
  .blog-joyful .blog-related { padding-block: 30px; }
  .blog-joyful .blog-related-heading { display: block; }
  .article-joyful .story { font-size: 16px; }
  .article-joyful .article-hero { padding: 16px 14px; }
  .article-joyful main > article > section > .container,
  .article-joyful main > section:not(:first-of-type):not(.blog-related) > .container { padding: 23px 20px; }
  .article-joyful .article-book-link a { width: 100%; }
  .article-joyful .evidence-band { grid-template-columns: minmax(0, 1fr); }
  .article-joyful .age-guide-scroll-hint { display: block; margin-top: 15px; }
  .article-joyful .halloween-book-actions .button { width: 100%; }
}