/* Shared finishing layer: keep the illustrations and individual page identities. */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-padding-top:64px; }
body { min-width:0; line-height:1.65; -webkit-font-smoothing:antialiased; }
img, video, iframe { max-width:100%; }
img { vertical-align:middle; }
.site-footer,
body.sunshine-theme > .site-footer,
.site-home #footer {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 28px;
  justify-items:center;
  padding:44px clamp(20px,6vw,70px) 32px;
  border-top:6px solid #ffcb62;
  background:radial-gradient(circle at 10% 20%,#315a78 0,transparent 32%),radial-gradient(circle at 90% 80%,#564275 0,transparent 30%),#172b45;
  color:#f7fbff;
  text-align:center;
  box-shadow:0 -10px 30px #14274322;
  overflow:hidden;
}
.site-footer::before,
.site-home #footer::before { content:"Sunshine Comics"; grid-column:1/-1; color:#ffdb80; font-size:clamp(24px,3vw,34px); font-weight:900; letter-spacing:-.04em; line-height:1.1; }
.site-footer p,
.site-home #footer p { position:relative; margin:0; width:100%; padding:12px 16px; border:1px solid #ffffff30; border-radius:12px; background:#ffffff0d; color:#f7fbff; font-size:14px; line-height:1.45; }
.site-footer p:nth-last-child(-n+2),
.site-home #footer p:nth-last-child(-n+2) { grid-column:1/-1; width:min(100%,660px); }
.site-footer a,
body.sunshine-theme > .site-footer a,
.site-home #footer a { color:#ffdf89; font-weight:750; text-decoration:underline; text-underline-offset:3px; }
.site-footer a:hover,
.site-home #footer a:hover { color:white; text-shadow:0 0 10px #ffcf63; }
@media(max-width:600px) {
  .site-footer,.site-home #footer { grid-template-columns:1fr; }
  .site-footer p,.site-home #footer p { grid-column:1 !important; }
}
button, input, select { font:inherit; }
button, a.button, a.button2, a.read-bio-btn { min-height:44px; }
a.button, a.read-bio-btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
button, a, input, select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #cf591e; outline-offset:4px; }
[hidden] { display:none !important; }
header nav { flex-wrap:wrap; }
p, h1, h2, h3, a { overflow-wrap:break-word; }
.container, .page, .character-page { width:min(100%,1200px); }
.card, .book-card, .creator-card, .Pack-card { border:1px solid #193b5714; box-shadow:0 5px 22px #193b570a; }
.site-home, .site-catalog { background:#f8f6f0; color:#19364b; }
.site-home { --primary-color:#193b57; --secondary-color:#d84b32; --background-color:#f8f6f0; --card-bg-color:#fff; --text-color:#19364b; --light-text-color:#566473; overflow-x:visible; }
.site-home > header { padding:16px clamp(16px,4vw,48px); gap:16px; }
.site-home header h1 { font-size:clamp(20px,3vw,32px); letter-spacing:-.04em; text-shadow:none; }
.site-home .header-logo { width:72px !important; height:48px !important; object-fit:cover; border:0; box-shadow:none; }
.site-home .hero-banner { width:calc(100% - 32px); max-width:1200px; padding:clamp(32px,6vw,80px) 24px; margin:28px auto 36px; background:#fffdf7; border:1px solid #d7dcd9; border-bottom:5px solid #f0b642; border-radius:24px; box-shadow:0 12px 36px #193b5708; }
.site-home .hero-content { max-width:760px; }
.site-home .hero-content h2 { font-size:clamp(28px,5vw,56px); line-height:1.1; letter-spacing:-.045em; text-transform:none; }
.site-home .hero-content p { font-size:clamp(16px,2vw,19px); max-width:660px; margin:20px auto 28px; }
.site-home .button { border-radius:12px; background:#193b57; color:white; text-transform:none; letter-spacing:0; box-shadow:none; margin:6px 0; }
.site-home .button:hover { background:#285575; transform:translateY(-2px); box-shadow:none; }
.site-home .lore-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.site-home .lore-card { padding:24px; border:1px solid #e2e5de; border-top:3px solid #edb947; border-radius:16px; box-shadow:none; }
.site-home .full-width-books { max-width:1240px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:24px 20px; }
.site-home .comic { background:transparent; color:#193b57; text-shadow:none; box-shadow:none; text-align:left; padding:0; font-size:30px; }
.site-home .book-card { min-width:0; min-height:0; padding:18px; border-radius:18px; overflow:visible; }
.site-home .book-card:hover { transform:translateY(-4px); box-shadow:0 10px 25px #193b5710; }
.site-home .comic-cover { width:100% !important; height:260px !important; object-fit:contain; background:#f3f1e9; border:0; border-radius:12px; }
.site-home .comic-title, .site-home .comic-short { opacity:1 !important; transform:none !important; }
.site-home .comic-details { position:static; opacity:1; transform:none; background:none; color:inherit; border:0; padding:0; margin-top:auto; }
.site-home .comic-details h4, .site-home .comic-details > p:first-of-type { display:none; }
.site-home .comic-details p { color:#566473; font-size:13px; }
.site-home .comic-details .button { width:100%; margin-top:14px; }
.site-home .book-card > p { margin:8px 0 18px; font-size:15px; }
.site-home .full-width-books > .book-card:last-child { grid-column:1 / -1; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between !important; gap:12px 24px; text-align:left; }
.site-home .full-width-books > .book-card:last-child h3, .site-home .full-width-books > .book-card:last-child p { margin:0; }
.site-home .full-width-books > .book-card:last-child .button { font-size:14px; padding:12px 20px; }
.site-home .badge { position:static; align-self:flex-start; margin:12px 0 0; background:#fff0bb; color:#604713; box-shadow:none; animation:none; }
.site-home .creators, .site-home .fanart { max-width:1240px; margin:auto; padding:24px 20px; }
.site-home .creator-profiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.site-home .creator-card { min-width:0; max-width:none; border-radius:16px; }
.site-home .creator-card img { width:80px; height:80px; }
.site-home .scrollbox { max-width:1200px; border:1px solid #e1e5e7; border-radius:20px; box-shadow:none; height:clamp(300px,45vw,450px); }
.site-home .slide-caption { max-width:calc(100% - 96px); left:48px; background:#193b57ee; }
.site-home .saver-buddies { width:calc(100% - 32px); max-width:1200px; padding:24px; border-radius:20px; background:white; }
.site-home > .card { width:calc(100% - 32px); max-width:1200px; margin:28px auto; }
.site-home .card { border-radius:18px; }
.site-home .card:hover { transform:none; }
.site-home .gallery-grid { grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); }
.site-home .puzzle-frame iframe { width:100%; height:880px; border:0; }
.site-home .top-strip { font-size:12px; line-height:22px; background:#284b63; }
.nav-dropdown .dropdown-content, .nav-dropdown:hover .dropdown-content { top:100%; padding-top:16px; visibility:hidden; opacity:0; }
.nav-dropdown.is-open .dropdown-content { visibility:visible; opacity:1; top:100%; }
.slider-pause { position:absolute; right:16px; top:16px; border:0; border-radius:10px; padding:8px 12px; color:white; background:#193b57; cursor:pointer; font-size:12px; }
.slide-buttons a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:10px; background:#f8c760; color:#193b57; text-decoration:none; font-weight:700; font-size:13px; }
.site-catalog .comic-cover { width:100% !important; height:240px !important; }
a.cta { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; min-height:44px; }
.modal, .popup-overlay { padding:20px !important; overscroll-behavior:contain; }
.modal-content, .popup-content { position:relative; width:min(100%,700px); max-height:calc(100dvh - 40px); overflow:auto; margin:auto; }
.modal-content { margin:5vh auto; }
.close, .close-btn { border:0; background:#eef2f5; color:#193b57; width:44px; min-height:44px; border-radius:50%; padding:0; font-size:26px; display:inline-flex; align-items:center; justify-content:center; }
.close-btn { position:sticky; top:0; float:right; right:0; z-index:2; }
body.dialog-open { overflow:hidden; }
.site-catalog .page { max-width:1200px; margin:24px auto; padding:0 20px; }
.site-catalog .books, .site-catalog .packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:24px; }
.site-catalog .book-card, .site-catalog .Pack-card { min-width:0; border-radius:18px; background:white; }
.site-catalog .book-card, .site-catalog .Pack-card { display:flex; flex-direction:column; gap:16px; }
.site-catalog .book-content { min-width:0; width:100%; }
.site-catalog .meta-row { margin-top:auto; flex-wrap:wrap; }
.site-catalog .badge { animation:none; }
.page > header { flex-wrap:wrap; gap:16px; }
.page > header .title-block { min-width:0; }
.button-group { flex-wrap:wrap; max-width:100%; }
.gallery-grid { width:100%; height:auto; background:transparent; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); }
.gallery-thumb-vid { width:100%; height:auto; }
.site-catalog .comic-cover { object-fit:contain; background:#f3f1e9; }
.site-catalog header.site, .site-catalog header.site-hero { flex-wrap:wrap; gap:24px; }
.site-catalog .controls { flex-wrap:wrap; min-width:0; max-width:100%; }
.site-catalog .search { min-width:0; max-width:100%; }
.site-catalog input { min-width:0; max-width:100%; }
.catalog-status { margin:12px 0 20px; color:#526473; font-size:14px; }
@media(max-width:800px) {
 .site-home .full-width-books { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .site-home .lore-row { grid-template-columns:1fr; }
 .site-home .creator-profiles { grid-template-columns:1fr; }
 body:not(.site-home):not(.site-catalog) > header { flex-wrap:wrap; gap:16px; padding:20px 16px; }
 body:not(.site-home):not(.site-catalog) > header h1 { font-size:clamp(24px,6vw,36px); }
 .character-page { padding:20px 16px; }
 .character-hero, .character-details { min-width:0; }
}
@media(max-width:540px) {
 .site-home .full-width-books { grid-template-columns:1fr; }
 .site-home .hero-banner { padding:32px 20px; }
 .site-home .creator-card { padding:16px; gap:16px; }
 .site-home .creator-card img { width:64px; height:64px; }
 .site-home .slide-caption { bottom:16px; padding:12px; }
 .site-home .scrollbox { height:auto; }
 .site-home #heroSlide { height:260px; }
 .site-home .slide-caption { position:static; max-width:none; border-radius:0; padding:18px; }
 .site-home .slider-btn { top:130px; }
 .site-home .slide-buttons { flex-wrap:wrap; gap:6px; }
 .site-home .slide-buttons button, .site-home .slide-buttons .button { font-size:12px; padding:8px; }
 .site-home .card { padding:16px; }
 .site-home .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .site-home .saver-buddies { padding:18px; }
 .site-catalog .site-main-nav { flex-wrap:wrap; gap:12px; padding:16px; }
 .site-catalog .site-main-nav h1 { font-size:24px; }
 .site-catalog .controls, .site-catalog .search { width:100%; }
 .site-catalog .search input { width:100%; }
 .site-catalog .filters { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto !important; } *,*::before,*::after { animation:none !important; transition:none !important; } }
