/* A prominent, direct entrance to the comic library. */
.site-home.sunshine-theme a.all-comics-cta {
  display:flex; align-items:center; justify-content:center; gap:24px;
  width:min(100%,520px); min-height:82px; margin:20px auto;
  padding:22px 30px; border:2px solid #ffe8a6; border-radius:18px;
  background:linear-gradient(120deg,#603cac,#ad3977); color:#fff;
  font-family:Montserrat,system-ui,sans-serif; font-size:clamp(21px,3vw,30px);
  font-weight:800; line-height:1.25; text-decoration:none; text-align:center;
  box-shadow:0 6px 0 #3f2869,0 14px 28px #613b9b30 !important;
}
.site-home.sunshine-theme a.all-comics-cta span:last-child { font-size:1.3em; }
.site-home.sunshine-theme a.all-comics-cta:hover { background:linear-gradient(120deg,#513298,#923467); transform:translateY(-3px); }
.site-home.sunshine-theme a.all-comics-cta:focus-visible { outline:4px solid #28517b; outline-offset:6px; }
.site-home.sunshine-theme .full-width-books > .book-card:last-child { background:linear-gradient(120deg,#f0e7ff,#fff0cd); border:2px solid #c7b3e1; padding:28px; }
.site-home.sunshine-theme .creators { background:transparent; }
.intro-invitation { margin:28px auto 0; max-width:570px; }
.site-home.sunshine-theme .intro-invitation > p { margin:0 auto 8px; max-width:390px; font-size:14px; line-height:1.6; color:#65547c; }
.intro-button-stage { position:relative; display:flex; justify-content:center; align-items:center; padding:62px 60px 64px; }
.site-home.sunshine-theme .intro-watch-button { position:relative; margin:0; padding:15px 20px; min-height:52px; border:2px solid #c2b1e6; background:#fff7df; color:#513775; font-weight:800; box-shadow:0 4px 0 #d6c7ed; }
.site-home.sunshine-theme .intro-watch-button:hover { background:#f4eaff; }
.intro-watch-button span { color:#bb537e; margin-right:6px; }
.intro-arrow { position:absolute; fill:none; stroke:currentColor; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; filter:drop-shadow(0 3px 0 #ffffffb3); }
.intro-arrow-bottom-left { width:64px; height:46px; left:18%; bottom:10px; color:#ed5791; animation:intro-point-left 2.5s ease-in-out infinite; }
.intro-arrow-bottom-right { width:52px; height:40px; right:19%; bottom:14px; color:#498fea; animation:intro-point-right 2s ease-in-out infinite; }
.intro-arrow-left { width:78px; height:60px; left:0; top:40px; color:#df8a27; animation:intro-point-left 1.9s ease-in-out infinite; }
.intro-arrow-right { width:62px; height:48px; right:3px; top:48px; color:#409f9a; animation:intro-point-right 2.3s ease-in-out infinite; }
.intro-arrow-top { width:35px; height:46px; top:7px; left:calc(50% - 17px); color:#ad69c7; animation:intro-point-down 2.1s ease-in-out infinite; }
@keyframes intro-point-left { 50% { transform:translate(7px,3px) rotate(-4deg); } }
@keyframes intro-point-right { 50% { transform:translate(-7px,3px) rotate(4deg); } }
@keyframes intro-point-down { 50% { transform:translateY(7px); } }
@media(max-width:520px) {
  .intro-button-stage { padding:58px 14px 64px; }
  .intro-arrow-left { width:48px; height:40px; top:18px; left:0; transform:rotate(25deg); animation-name:intro-point-down; }
  .intro-arrow-right { width:40px; height:34px; top:22px; right:0; animation-name:intro-point-down; }
  .site-home.sunshine-theme .intro-watch-button { font-size:14px; padding:14px 12px; }
}
@media(prefers-reduced-motion:reduce) { .intro-arrow { animation:none; } }
.site-home.sunshine-theme .hero-banner { background:linear-gradient(120deg,#fff3b9,#fffdf0 52%,#d9f4ff); border-color:#6099d3; }
.site-home.sunshine-theme .lore-card { background:#d8f0ff; border-top-color:#368ed6; }
.site-home.sunshine-theme .lore-card:nth-child(2) { background:#ffe0cf; border-top-color:#ed8658; }
.site-home.sunshine-theme .lore-card:nth-child(3) { background:#d6f5df; border-top-color:#3dbb80; }
.site-home.sunshine-theme a.all-comics-cta { background:linear-gradient(120deg,#7140d0,#d13b91); }
.site-home .hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:16px; max-width:760px; margin:22px auto; }
.site-home.sunshine-theme .hero-actions a.all-comics-cta { width:100%; min-width:0; min-height:84px; margin:0; padding:17px 18px; font-size:clamp(18px,2vw,24px); gap:12px; }
.site-home.sunshine-theme a.characters-cta { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-width:0; min-height:84px; margin:0; padding:17px 18px; border:2px solid #c8fff3; border-radius:18px; background:linear-gradient(120deg,#117b91,#278d79); color:#fff; font-family:Montserrat,system-ui,sans-serif; font-size:clamp(18px,2vw,24px); font-weight:800; line-height:1.25; text-align:center; text-decoration:none; box-shadow:0 6px 0 #125968,0 14px 28px #23877b30 !important; }
.site-home.sunshine-theme a.characters-cta:hover { background:linear-gradient(120deg,#0b6579,#207662); transform:translateY(-3px); }
.site-home.sunshine-theme a.characters-cta span:first-child { color:#ffe38b; font-size:1.45em; }
.site-home.sunshine-theme a.characters-cta:focus-visible { outline:4px solid #28517b; outline-offset:6px; }
@media(max-width:650px) { .site-home .hero-actions { grid-template-columns:1fr; max-width:520px; } .site-home.sunshine-theme .hero-actions a.all-comics-cta,.site-home.sunshine-theme a.characters-cta { min-height:76px; } }
@media(max-width:520px) { .site-home.sunshine-theme a.all-comics-cta { padding:20px 16px; gap:12px; min-height:76px; } }
/* Let the welcome copy and introduction share the width of the hero. */
.site-home.sunshine-theme .hero-banner { padding:clamp(28px,4vw,52px); }
.site-home.sunshine-theme .hero-content { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.85fr); grid-template-areas:"title intro" "copy intro" "actions intro"; align-items:center; column-gap:clamp(24px,4vw,56px); width:100%; max-width:none; text-align:left; }
.site-home.sunshine-theme .hero-content h2 { grid-area:title; margin:0; font-size:clamp(32px,3.8vw,52px); }
.site-home.sunshine-theme .hero-content > p { grid-area:copy; margin:16px 0 20px; max-width:620px; line-height:1.55; }
.site-home.sunshine-theme .hero-actions { grid-area:actions; width:100%; max-width:none; margin:0; }
.site-home.sunshine-theme .hero-actions a.all-comics-cta,.site-home.sunshine-theme .hero-actions a.characters-cta { min-height:76px; padding:14px 12px; font-size:clamp(16px,1.5vw,21px); }
.site-home.sunshine-theme .intro-invitation { grid-area:intro; width:100%; max-width:none; margin:0; padding:22px 18px 14px; border:1px solid #e4cce8; border-radius:24px; background:#fffaf8cc; box-shadow:0 10px 24px #70477716; text-align:center; }
.site-home.sunshine-theme .intro-invitation > p { max-width:320px; margin:0 auto; }
.site-home .intro-button-stage { min-height:148px; padding:45px 18px 49px; }
.site-home.sunshine-theme .intro-watch-button { z-index:1; width:min(100%,245px); padding:14px 10px; white-space:nowrap; }
.site-home .intro-arrow-left { width:min(15%,48px); height:40px; left:0; top:calc(50% - 20px); }
.site-home .intro-arrow-right { width:min(15%,48px); height:40px; right:0; top:calc(50% - 20px); }
.site-home .intro-arrow-top { width:30px; height:40px; top:2px; left:calc(50% - 15px); }
.site-home .intro-arrow-bottom-left { width:48px; height:36px; left:12%; bottom:0; }
.site-home .intro-arrow-bottom-right { width:48px; height:36px; right:12%; bottom:0; }
@media(max-width:850px) {
  .site-home.sunshine-theme .hero-content { grid-template-columns:1fr; grid-template-areas:"title" "copy" "actions" "intro"; text-align:center; }
  .site-home.sunshine-theme .hero-content > p { margin:14px auto 20px; }
  .site-home.sunshine-theme .intro-invitation { width:min(100%,440px); margin:24px auto 0; }
}
@media(max-width:520px) {
  .site-home.sunshine-theme .hero-banner { padding:26px 18px; }
  .site-home.sunshine-theme .hero-content h2 { font-size:clamp(30px,9vw,42px); }
  .site-home.sunshine-theme .hero-actions { gap:10px; }
  .site-home.sunshine-theme .hero-actions a.all-comics-cta,.site-home.sunshine-theme .hero-actions a.characters-cta { min-height:68px; }
  .site-home.sunshine-theme .intro-invitation { padding:18px 12px 10px; }
  .site-home .intro-button-stage { min-height:140px; padding:43px 12px 44px; }
  .site-home .intro-arrow-left,.site-home .intro-arrow-right { width:34px; height:30px; top:calc(50% - 15px); transform:none; animation-name:intro-point-left; }
  .site-home .intro-arrow-right { animation-name:intro-point-right; }
  .site-home .intro-arrow-bottom-left,.site-home .intro-arrow-bottom-right { width:40px; height:30px; }
}