/* =====================================================================
   THE COMICS SHELF inside the library (owner 2026-09-05).

   Two pages, both borrowed from the free comic sites so a child sees the same
   publisher on both hosts:
     body.shelf-page   — the hub (/ signed out, /series signed in): masthead,
                         tally, one card per series          (.sh-*)
     body.comic-series — one series (/series/<slug>): the World25 landing —
                         kicker, title, write-up, chain, the grid of books (.cs-*)
   Palette = the product's (cream / navy / amber, home.css tokens); type = the
   comics' (Bangers display, Baloo 2 labels, Nunito text), all self-hosted.
   Class names are prefixed so nothing here collides with home.css.
   ===================================================================== */
.shelf-page, .comic-series { --sh-ink:#14304f; --sh-ink-2:#4a5768; --sh-ink-3:#7d8a9c; --sh-line:#e6e2d6; --sh-accent:#d97e06; --sh-accent-2:#1f6f8b; --sh-gold:#e0a12e; }
.shelf-page main, .comic-series main { font-family:'Nunito',ui-rounded,system-ui,sans-serif; font-weight:700; color:var(--sh-ink); line-height:1.55; }

/* ---------- the hub ---------- */
.sh-wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
.sh-top { padding:56px 0 36px; text-align:center;
  background: radial-gradient(1200px 380px at 50% -120px, rgba(217,126,6,.12), transparent 70%), linear-gradient(180deg,#fff, transparent);
  border-bottom:1px solid var(--sh-line); }
.sh-kicker-top { font-family:'Baloo 2',sans-serif; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--sh-accent); margin-bottom:6px; }
.sh-top h1 { font-family:'Bangers',cursive,sans-serif; font-size:clamp(46px,9vw,86px); letter-spacing:2px; line-height:.95; color:var(--sh-ink); margin:0; font-weight:400; }
.sh-lede { max-width:640px; margin:16px auto 0; font-size:clamp(15px,2.2vw,18px); font-weight:700; color:var(--sh-ink-2); }
.sh-tally { display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:8px 18px; background:var(--sh-ink); color:#fff; border-radius:999px; font-family:'Baloo 2',sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.sh-tally b { color:var(--sh-gold); font-size:15px; }
.sh-sec { font-family:'Bangers',cursive,sans-serif; font-size:clamp(28px,5vw,40px); letter-spacing:1.5px; margin:52px 0 4px; text-align:center; font-weight:400; color:var(--sh-ink); }
.sh-sec-sub { text-align:center; color:var(--sh-ink-3); font-size:14px; margin:0 0 28px; }
.sh-shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:26px; padding-bottom:8px; }
.sh-card { display:flex; flex-direction:column; background:#fff; border:2px solid var(--sh-ink); border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(15,23,42,.10); transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease; color:inherit; }
.sh-card:hover { transform:translateY(-5px); box-shadow:0 16px 34px rgba(15,23,42,.18); }
.sh-card:focus-visible { outline:4px solid var(--sh-gold); outline-offset:3px; }
.sh-art { position:relative; aspect-ratio:1/1; background:var(--hue,#dfe7f0); overflow:hidden; }
.sh-art img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .5s cubic-bezier(.2,.8,.3,1); }
.sh-art svg { width:100%; height:100%; }
.sh-card:hover .sh-art img { transform:scale(1.045); }
.sh-chip { position:absolute; top:10px; left:10px; font-family:'Baloo 2',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:rgba(20,48,79,.88); color:#fff; backdrop-filter:blur(2px); }
.sh-count { position:absolute; right:10px; bottom:10px; font-family:'Baloo 2',sans-serif; font-size:12px; padding:4px 11px; border-radius:999px; background:rgba(255,255,255,.93); color:var(--sh-ink); border:1.5px solid var(--sh-ink); }
.sh-body { padding:14px 16px 18px; display:flex; flex-direction:column; flex:1; }
.sh-kicker { font-family:'Baloo 2',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sh-accent-2); margin-bottom:3px; }
.sh-card h3 { font-family:'Bangers',cursive,sans-serif; font-size:26px; letter-spacing:.8px; line-height:1.05; color:var(--sh-accent); margin:0 0 7px; font-weight:400; }
.sh-card p { font-size:14px; font-weight:700; color:var(--sh-ink-2); flex:1; margin:0; }
.sh-go { margin-top:12px; font-family:'Baloo 2',sans-serif; font-size:13px; color:var(--sh-ink); letter-spacing:.04em; }
.sh-go span { transition:margin-left .18s ease; display:inline-block; margin-left:4px; }
.sh-card:hover .sh-go span { margin-left:10px; }
.sh-free { margin:44px auto 8px; max-width:720px; text-align:center; color:var(--sh-ink-2); font-size:15px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.sh-free b { color:var(--sh-ink); font-family:'Baloo 2',sans-serif; font-size:20px; }
@media (max-width:560px) { .sh-top { padding:40px 0 28px; } .sh-shelf { grid-template-columns:1fr; gap:20px; } }

/* ---------- one series: the World25 landing ---------- */
.cs-wrap { max-width:960px; margin:0 auto; padding:0 16px 48px; }
.cs-head { text-align:center; padding:36px 16px 26px; }
.cs-back { display:inline-block; margin-bottom:18px; font-family:'Baloo 2',sans-serif; font-size:13px; letter-spacing:.06em; color:var(--sh-ink-3); border:1.5px solid var(--sh-line); border-radius:999px; padding:5px 14px; background:#fff; }
.cs-back:hover { color:var(--sh-ink); border-color:var(--sh-ink); }
.cs-series { font-family:'Baloo 2',sans-serif; letter-spacing:3px; font-size:14px; color:var(--accent,var(--sh-accent)); }
.cs-head h1 { font-family:'Bangers',cursive,sans-serif; letter-spacing:1.5px; font-size:clamp(42px,10vw,84px); line-height:.92; margin:6px 0 4px; font-weight:400; color:var(--sh-ink); }
.cs-sub { font-family:'Baloo 2',sans-serif; font-size:clamp(15px,3.2vw,21px); color:#55606c; }
.cs-orig { display:inline-block; margin-top:14px; background:var(--sh-ink); color:#fff; border-radius:20px; padding:5px 16px; font-family:'Baloo 2',sans-serif; font-size:12px; letter-spacing:1.5px; }
.cs-lede { max-width:680px; margin:22px auto 0; text-align:center; font-size:clamp(15px,2.6vw,18px); color:#3a444f; }
.cs-lede b { color:var(--accent,var(--sh-accent)); }
.cs-q { max-width:680px; margin:16px auto 0; text-align:center; font-family:'Baloo 2',sans-serif; font-size:clamp(16px,3vw,22px); color:var(--accent,var(--sh-accent)); }
.cs-chain { max-width:720px; margin:18px auto 0; text-align:center; font-family:'Baloo 2',sans-serif; color:#7a8592; font-size:14px; line-height:2; }
.cs-chain span { background:#fff; border:1.5px solid #d6dde5; border-radius:20px; padding:3px 12px; margin:3px; display:inline-block; white-space:nowrap; }
.cs-chain b { color:var(--accent,var(--sh-accent)); }
.cs-sec { font-family:'Bangers',cursive,sans-serif; letter-spacing:1px; font-size:clamp(24px,5vw,34px); text-align:center; margin:40px 0 8px; font-weight:400; color:var(--sh-ink); }
.cs-sec-note { text-align:center; color:#6a7480; font-size:14px; margin-bottom:22px; }
.cs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.cs-card { background:#fff; border:2px solid var(--sh-ink); border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.08); transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; color:inherit; }
.cs-card:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.16); }
.cs-card:focus-visible { outline:4px solid var(--sh-gold); outline-offset:3px; }
.cs-cover { aspect-ratio:5/6; background:linear-gradient(135deg,var(--accent,var(--sh-accent)),#e0a12e); position:relative; overflow:hidden; }
.cs-cover img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.cs-card.locked .cs-cover img { filter:saturate(.55) brightness(.92); }
.cs-bno { position:absolute; top:10px; left:10px; background:var(--sh-ink); color:#fff; font-family:'Baloo 2',sans-serif; font-size:12px; letter-spacing:1px; padding:3px 10px; border-radius:14px; }
.cs-free { position:absolute; top:10px; right:10px; background:#1f8a4c; color:#fff; font-family:'Baloo 2',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:3px 10px; border-radius:14px; }
.cs-lock { position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--sh-ink); display:grid; place-items:center; }
.cs-lock svg { width:16px; height:16px; }
.cs-body { padding:14px 16px 16px; flex:1; }
.cs-nat { font-family:'Bangers',cursive,sans-serif; letter-spacing:1px; font-size:24px; line-height:1.05; color:var(--accent,var(--sh-accent)); }
.cs-t { font-family:'Baloo 2',sans-serif; font-size:15px; color:var(--sh-ink); margin:4px 0 6px; }
.cs-d { font-size:13px; color:#5a646f; }
.cs-cta { margin-top:auto; padding:12px 16px; border-top:1.5px dashed #d6dde5; font-family:'Baloo 2',sans-serif; font-size:14px; color:var(--accent,var(--sh-accent)); display:flex; justify-content:space-between; align-items:center; }
.cs-unlock { margin:40px auto 0; max-width:640px; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; color:var(--sh-ink-2); font-size:14px; }
.cs-unlock b { font-family:'Baloo 2',sans-serif; font-size:20px; color:var(--sh-ink); }
.cs-foot { text-align:center; padding:44px 16px 0; color:#7a8592; font-size:13.5px; }
.cs-foot b { font-family:'Bangers',cursive,sans-serif; letter-spacing:1px; color:var(--accent,var(--sh-accent)); font-weight:400; }
.cs-foot span { font-size:12px; }

/* inside the app shell (signed-in Series tab): the greeting sits above the masthead */
.page-series .sh-top { padding-top: 22px; }
.page-series main.home { max-width: none; padding: 0; }