/* Inkcat home (S19): the Browse section's search, empty state and paging; everything else is the site's own CSS. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.browse-search { display: flex; gap: 8px; margin: 0 0 12px; }
.browse-search input { flex: 1; min-width: 0; font: inherit; padding: 10px 14px; border: 1px solid rgba(0,0,0,.18); border-radius: 999px; background: #fff; }
.browse-search button { font: inherit; font-weight: 600; padding: 10px 16px; border: 0; border-radius: 999px; background: #120e0d; color: #fff; cursor: pointer; }
.browse .cat-strip { margin: 0 0 16px; }
.browse .cat-chips a[aria-current="page"] { background: #120e0d; color: #fff; }
.browse-empty { list-style: none; color: #6b625c; padding: 24px 0; }
.browse-more { text-align: center; margin: 20px 0 0; }
.browse-more a { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(0,0,0,.18); color: inherit; text-decoration: none; font-weight: 600; }

/* The shared Inkcat header (logo mark, links, Account and Search at the right). */
.ik-head { display: flex; align-items: center; gap: 18px; height: auto; min-height: 112px; padding-top: 12px; padding-bottom: 12px; box-sizing: border-box; }
.ik-head .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-mark { width: 96px; height: 88px; flex: none; display: block; }
.ik-head .brand-word { color: #120e0d; }
.ik-head .brand-word span { color: #19a866; }
.ik-head .site-nav { margin-right: auto; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.head-pill { display: inline-block; padding: 7px 14px; border-radius: 999px; background: #efece7; color: #120e0d; font-weight: 700; font-size: .9rem; text-decoration: none; }
.head-pill[aria-current="page"] { background: #120e0d; color: #fff; }
.head-search { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #efece7; color: #120e0d; }
.head-search:hover, .head-pill:hover { background: #e3dfd8; }
@media (max-width: 520px) { .ik-head { gap: 10px; } .ik-head .site-nav { display: none; } .ik-head .head-actions { margin-left: auto; } .brand-mark { width: 84px; height: 77px; } .ik-head { min-height: 97px; padding-top: 10px; padding-bottom: 10px; } }
/* Rank numbers on Popular & trending (big outlined numerals over the bottom-left of the art). */
.card-art { position: relative; }
.rank { float: left; margin: -30px 8px 0 2px; position: relative; z-index: 2; font: 900 60px/1 system-ui, sans-serif; color: #120e0d; -webkit-text-stroke: 3px #f4f2ee; paint-order: stroke fill; letter-spacing: -.04em; }
@media (max-width: 520px) { .rank { font-size: 50px; margin-top: -24px; } }
/* The taller header is sticky: jumps (Originals, Browse, Search) stop below it, and nothing shows through it. */
html { scroll-padding-top: 128px; }
.ik-head { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 520px) { html { scroll-padding-top: 112px; } }
.head-actions [hidden] { display: none !important; }
.head-profile[aria-current="page"] { background: #120e0d; color: #fff; }
.continue-in-browse { margin: 0 0 18px; padding: 0; border: 0; }
.continue-in-browse .shelf-head h2 { font-size: 1rem; }
/* The library (S26). */
.library .lib-title { font-size: 1.6rem; margin: 28px 0 8px; }
.lib-none { color: #6b6460; margin: 0 0 12px; }
.lib-note { color: #0f8a57 !important; font-weight: 700; }
.lib-empty { max-width: 420px; margin: 48px auto; text-align: center; }
.lib-cta { display: block; text-decoration: none; text-align: center; margin-top: 16px; }
.lib-hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lib-hist a { display: grid; grid-template-columns: 1fr auto 120px 44px; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.lib-hist a:hover { background: #faf8f5; }
.lib-hist span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-bar { display: block; height: 8px; border-radius: 4px; background: #ece7e0; overflow: hidden; }
.lib-bar i { display: block; height: 100%; background: #19c27a; }
.lib-hist small { color: #6b6460; text-align: right; }
@media (max-width: 520px) { .lib-hist a { grid-template-columns: 1fr auto; } .lib-bar, .lib-hist small { grid-column: 1 / -1; } }
/* Coming soon. */
.badge-soon { position: absolute; left: 8px; top: 8px; font: 900 .68rem/1 system-ui, sans-serif; letter-spacing: .08em; padding: 6px 8px; border-radius: 6px; background: rgba(18,14,13,.85); color: #fff; z-index: 2; }
.ep-soon { opacity: .6; cursor: default; }
.btn-soon { cursor: default; opacity: .9; }
.head-credits { background: #e9f8f0; color: #0f6b43; }
.head-credits.is-unlimited { background: #120e0d; color: #ffd75e; }
@media (max-width: 520px) { .head-credits { padding: 7px 10px; font-size: .82rem; } }
.soon-tag { display: inline-block; margin: 2px 0 2px; font: 800 .7rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a6400; background: #fff3cd; padding: 4px 7px; border-radius: 5px; }
li.is-soon .card-art { opacity: .78; }
li.is-soon .card-art img { filter: saturate(.75); }