/*
 * DM InkWave Dark presentation layer.
 * The selectors intentionally sit above the reference stylesheet so the
 * publishing, reader, account and SEO core can be upgraded independently.
 */
:root {
  --dw-bg: #1c2a31;
  --dw-bg-deep: #181d21;
  --dw-header: #1d1f23;
  --dw-panel: #2a3740;
  --dw-panel-2: #34424d;
  --dw-pill: #3d4a55;
  --dw-line: rgba(255,255,255,.10);
  --dw-text: #f5f7f8;
  --dw-muted: #94a5b0;
  --dw-soft: #c9d1d5;
  --dw-accent: #dd6165;
  --dw-accent-dark: #bc484d;
  --dw-purple: #b946e7;
  --dw-green: #19b76b;
  --header: var(--dw-header);
  --header-dark: #15171a;
  --bg: var(--dw-bg);
  --text: var(--dw-text);
  --muted: var(--dw-muted);
  --line: var(--dw-line);
  --blue: var(--dw-accent);
  --black: #121417;
  --container: 1410px;
}

html { color-scheme: dark; }
body {
  color: var(--dw-text);
  background: var(--dw-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
}
::selection { color: #fff; background: var(--dw-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.container { width: min(calc(100% - 40px), var(--container)); }

/* Header */
.site-header {
  position: sticky;
  z-index: 200;
  top: 0;
  height: 78px;
  background: rgba(28,30,34,.98);
  border-bottom: 1px solid rgba(255,255,255,.045);
  box-shadow: 0 5px 18px rgba(0,0,0,.12);
}
.site-header__inner { height: 78px; gap: 10px; }
.nav-toggle {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: block;
  padding: 0;
  margin: 0 2px 0 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.nav-toggle:hover { background: rgba(255,255,255,.07); }
.site-brand { min-width: 172px; max-width: 225px; gap: 10px; margin: 0 4px 0 0; color: #fff; font-size: 22px; letter-spacing: -.02em; }
.site-brand__image { width: auto; max-width: 210px; max-height: 51px; object-fit: contain; }
.site-brand__copy { min-width: 0; display: grid; gap: 3px; line-height: 1; }
.site-brand__mark, .footer-brand__mark { width: 42px; height: 42px; display: grid; align-content: center; gap: 4px; flex: 0 0 auto; padding: 8px; background: var(--dw-accent); border-radius: 10px; transform: skew(-4deg); }
.site-brand__mark i, .footer-brand__mark i { height: 4px; display: block; background: #fff; border-radius: 4px; }
.site-brand__name { overflow: hidden; font-size: 17px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.site-brand__url { overflow: hidden; color: var(--dw-muted); font-size: 10px; font-weight: 650; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.site-nav { flex: 0 0 auto; align-self: center; }
.site-nav__list { height: auto; gap: 7px; }
.site-nav__list li { height: auto; }
.site-nav a {
  height: 46px;
  padding: 0 15px;
  color: #f5f6f7;
  background: var(--dw-panel-2);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 750;
}
.site-nav a:hover, .site-nav .current-menu-item > a { color: #fff; background: var(--dw-accent); }
.site-nav .current-menu-item > a::after { display: none; }
.site-nav .inkwave-popular-tag > a::before { color: #ffb7b9; }
.header-search { min-width: 180px; height: 46px; display: flex; flex: 1 1 430px; margin-left: auto; overflow: hidden; background: #f7f7f8; border-radius: 11px; }
.header-search input[type="search"] { min-width: 0; width: 100%; padding: 0 18px; color: #3f4a52; background: transparent; border: 0; outline: 0; font-size: 15px; font-weight: 600; }
.header-search input::placeholder { color: #94a4af; opacity: 1; }
.header-search button { width: 61px; flex: 0 0 61px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--dw-accent); border: 0; cursor: pointer; }
.header-search button:hover { background: var(--dw-accent-dark); }
.header-search svg { width: 23px; height: 23px; stroke-width: 2.5; }
.site-actions { min-height: 46px; gap: 6px; padding-left: 0; margin-left: 3px; border: 0; }
.bookshelf-link, .account-link { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; color: #fff; background: transparent; border-radius: 10px; }
.bookshelf-link:hover, .account-link:hover { color: #fff; background: var(--dw-panel-2); }
.bookshelf-link svg, .account-link svg { width: 25px; height: 25px; }
.bookshelf-link span, .account-link span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.language-switcher > button { height: 46px; padding: 0 9px; background: var(--dw-panel-2); border-radius: 10px; }
.language-switcher__menu { top: 52px; color: var(--dw-text); background: var(--dw-panel); border-color: var(--dw-line); border-radius: 8px; box-shadow: 0 14px 35px rgba(0,0,0,.4); }
.language-switcher__menu a { color: var(--dw-soft); border-radius: 5px; }
.language-switcher__menu a:hover, .language-switcher__menu a.is-current { color: #fff; background: var(--dw-accent); }

/* Home */
.catalog-home { min-height: calc(100vh - 78px); padding: 14px 0 0; }
.catalog-alert { min-height: 61px; display: flex; align-items: center; gap: 16px; padding: 12px 25px; margin-bottom: 25px; color: #d2d9dd; background: var(--dw-panel-2); border: 1px solid rgba(255,255,255,.04); border-radius: 14px; }
.catalog-alert > span { width: 14px; height: 14px; flex: 0 0 auto; background: var(--dw-green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(25,183,107,.1); }
.catalog-alert p { margin: 0; font-size: 15px; line-height: 1.45; }
.catalog-section--primary { margin: 0; }
.catalog-title-row { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 9px; }
.catalog-title-row h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.catalog-title-row h1 span { color: var(--dw-muted); font-weight: 600; }
.catalog-title-row > a { color: var(--dw-muted); font-size: 13px; font-weight: 700; }
.catalog-title-row > a:hover { color: #fff; }
.catalog-toolbar { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.catalog-toolbar__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill, .filter-menu > summary {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  color: #f6f7f8;
  background: var(--dw-pill);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 23px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
.filter-pill:hover, .filter-menu > summary:hover, .filter-menu[open] > summary { background: #4a5965; }
.filter-pill--all { background: #27343d; border-color: rgba(255,255,255,.1); }
.filter-pill svg, .filter-menu--sort summary svg { width: 17px; height: 17px; }
.filter-menu { position: relative; }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-menu > summary span { color: var(--dw-muted); font-size: 11px; }
.filter-menu > div {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: #28363f;
  border: 1px solid var(--dw-line);
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(0,0,0,.42);
}
.filter-menu > div a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 11px; color: var(--dw-soft); border-radius: 6px; font-size: 13px; }
.filter-menu > div a:hover { color: #fff; background: var(--dw-panel-2); }
.filter-menu > div small { color: var(--dw-muted); }
.filter-menu > div .filter-menu__all { margin-top: 6px; color: #fff; background: var(--dw-accent); }
.filter-menu--sort { margin-left: auto; }
.filter-menu--sort > summary { border-radius: 12px; }
.filter-menu--sort > summary strong { color: var(--dw-muted); text-transform: uppercase; }
.filter-menu--sort > div { right: 0; left: auto; }
.comic-grid { grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: 18px; row-gap: 28px; }
.comic-card { position: relative; }
.comic-card__cover { position: relative; overflow: hidden; background: #101619; border-radius: 11px; box-shadow: 0 8px 18px rgba(0,0,0,.15); }
.comic-card__cover::after { position: absolute; right: 0; bottom: 0; left: 0; height: 45%; background: linear-gradient(transparent,rgba(0,0,0,.65)); content: ""; pointer-events: none; }
.comic-card__cover img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .28s ease, opacity .2s ease; }
.comic-card__cover:hover img { opacity: .9; transform: scale(1.025); }
.comic-card__quality { position: absolute; z-index: 2; top: 10px; right: 10px; color: #fff; font-size: 11px; font-weight: 900; font-style: italic; text-shadow: 0 1px 3px #000; }
.comic-card__chapter, .comic-card__rating { position: absolute; z-index: 2; bottom: 10px; padding: 4px 7px; color: #fff; background: rgba(20,20,20,.78); border-radius: 8px; font-size: 11px; font-weight: 750; }
.comic-card__chapter { left: 10px; }
.comic-card__rating { right: 10px; color: #ffd06a; }
.comic-card h3 { min-height: 0; margin: 8px 0 2px; color: #f7f8f9; font-size: 14px; font-weight: 750; line-height: 1.35; }
.comic-card h3 a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comic-card h3 a:hover { color: var(--dw-accent); }
.comic-card__author { display: block; margin-bottom: 5px; overflow: hidden; color: #b2bec5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.comic-card__author:hover { color: #fff; }
.comic-card__meta { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 11px; margin: 0; color: var(--dw-muted); font-size: 11px; }
.comic-card__meta > span { min-width: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.comic-card__meta time { overflow: hidden; text-overflow: ellipsis; }
.comic-card__meta svg { width: 13px; height: 13px; flex: 0 0 auto; }
.home-about { grid-template-columns: 190px minmax(0,1fr); gap: 36px; padding: 38px 0 45px; margin-top: 45px; border-color: var(--dw-line); }
.home-about__heading span { color: var(--dw-accent); }
.home-about__heading h2 { color: #fff; font-weight: 750; }
.home-about__body p { color: var(--dw-muted); }
.home-about__body a { color: var(--dw-accent); }

/* Shared controls, archives and directories */
.button { color: var(--dw-text); background: var(--dw-panel-2); border-color: var(--dw-line); border-radius: 9px; }
.button:hover { color: #fff; background: #455560; border-color: #52636f; }
.button--primary { color: #fff; background: var(--dw-accent); border-color: var(--dw-accent); }
.button--primary:hover { background: var(--dw-accent-dark); border-color: var(--dw-accent-dark); }
.button--outline, .button--ghost { color: var(--dw-soft); background: transparent; border-color: rgba(255,255,255,.25); }
.archive-page, .directory-page, .tag-directory-page, .author-page, .comic-detail, .dashboard-page { min-height: calc(100vh - 78px); }
.archive-hero, .directory-hero, .dashboard-hero { padding: 38px 0 25px; background: linear-gradient(180deg,rgba(255,255,255,.025),transparent); border-color: var(--dw-line); }
.archive-hero h1, .directory-hero h1, .dashboard-hero h1 { color: #fff; font-size: clamp(27px,3vw,40px); font-weight: 800; letter-spacing: -.03em; }
.archive-hero p:last-child, .directory-hero p, .dashboard-hero p { color: var(--dw-muted); }
.directory-hero span { color: var(--dw-accent); }
.filter-panel { overflow: hidden; margin: 18px 0 28px; background: var(--dw-panel); border-color: var(--dw-line); border-radius: 13px; }
.filter-panel__fields { padding: 17px 21px 11px; }
.filter-panel fieldset { grid-template-columns: 70px 1fr; padding: 8px 0; }
.filter-panel legend { width: 70px; color: var(--dw-muted); }
.filter-options { gap: 5px; }
.filter-options a { padding: 6px 11px; color: var(--dw-soft); border-radius: 16px; }
.filter-options a:hover { color: #fff; background: var(--dw-panel-2); }
.filter-options a.is-active { color: #fff; background: var(--dw-accent); }
.filter-panel__footer { background: rgba(0,0,0,.13); border-color: var(--dw-line); }
.filter-panel__footer label, .filter-panel__footer > div > a { color: var(--dw-muted); }
.filter-panel__footer select, .profile-form input { color: var(--dw-text); background: var(--dw-bg-deep); border-color: var(--dw-line); border-radius: 7px; }
.archive-results-head, .tag-archive-actions, .author-works-heading { border-color: var(--dw-line); }
.archive-results-head p, .tag-archive-actions { color: var(--dw-muted); }
.view-switch button { color: var(--dw-muted); background: var(--dw-panel); border-color: var(--dw-line); }
.view-switch button.is-active { color: #fff; background: var(--dw-accent); }
.archive-grid.is-list .comic-card { border-color: var(--dw-line); }
.archive-grid.is-list .comic-card__cover { max-width: 180px; }
.pagination { padding: 46px 0 40px; }
.pagination ul { flex-wrap: wrap; gap: 9px; }
.pagination a, .pagination span { width: auto; min-width: 45px; height: 45px; padding: 0 14px; color: var(--dw-soft); background: var(--dw-panel-2); border: 0; border-radius: 10px; font-weight: 750; }
.pagination a:hover { color: #fff; background: #45545f; }
.pagination .current { color: #fff; background: var(--dw-accent); }
.catalog-pagination li:first-child a, .catalog-pagination li:last-child a { min-width: 150px; }
.empty-state { color: var(--dw-text); background: rgba(255,255,255,.018); border-color: var(--dw-line); border-radius: 13px; }
.empty-state p { color: var(--dw-muted); }
.tag-directory ul { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.tag-directory a { color: var(--dw-soft); background: var(--dw-panel); border-color: var(--dw-line); border-radius: 10px; }
.tag-directory a:hover { color: #fff; background: var(--dw-panel-2); border-color: rgba(255,255,255,.2); }
.tag-directory small { color: var(--dw-muted); }
.ranked-comic__number { background: rgba(221,97,101,.92); border: 0; border-radius: 7px; }
.ranked-comic:nth-child(-n+3) .ranked-comic__number { color: #17191b; background: #ffd067; border: 0; }
.ranked-comic > strong, .latest-comic > time { color: var(--dw-muted); }

/* Author and comic detail */
.breadcrumbs { color: var(--dw-muted); }
.breadcrumbs a:hover { color: var(--dw-accent); }
.author-profile, .comic-hero, .detail-section, .detail-sidebar > div { color: var(--dw-text); background: var(--dw-panel); border-color: var(--dw-line); border-radius: 13px; }
.author-profile__avatar, .creator-card__avatar { background: var(--dw-accent); }
.author-profile__copy > p:last-child, .author-profile__count span { color: var(--dw-muted); }
.author-profile__count { border-color: var(--dw-line); }
.author-works-heading span { color: var(--dw-accent); }
.comic-hero { grid-template-columns: 280px minmax(0,1fr); gap: 39px; padding: 24px; }
.comic-hero__cover img { border-radius: 10px; box-shadow: 0 15px 30px rgba(0,0,0,.25); }
.comic-hero h1 { font-size: clamp(30px,4vw,48px); font-weight: 850; letter-spacing: -.04em; }
.comic-hero__tax, .comic-hero__alias, .comic-hero__credits span, .comic-update-note { color: var(--dw-muted); }
.tag-list span, .tag-list a { color: var(--dw-soft); background: var(--dw-panel-2); border-radius: 15px; }
.tag-list a:hover { color: #fff; background: var(--dw-accent); }
.tag-list--topics .tag-list__label { color: var(--dw-muted); background: transparent; }
.tag-list--topics a { color: #d4dbe0; background: rgba(255,255,255,.07); }
.comic-stats { max-width: 720px; border-color: var(--dw-line); }
.comic-stats div { border-color: var(--dw-line); }
.comic-stats span { color: var(--dw-muted); }
.comic-actions .bookshelf-button.is-added { background: var(--dw-accent); }
.share-menu { color: var(--dw-text); background: var(--dw-panel); border-color: var(--dw-line); border-radius: 11px; box-shadow: 0 18px 38px rgba(0,0,0,.45); }
.share-menu__close, .share-network { color: var(--dw-muted); }
.detail-layout { grid-template-columns: minmax(0,1fr) 285px; gap: 24px; }
.detail-section { padding: 24px; }
.detail-section__heading, .chapter-list, .chapter-list a, .info-card dl > div { border-color: var(--dw-line); }
.detail-section__heading > span, .detail-section__heading > div > span, .chapter-list a > span { color: var(--dw-accent); }
.detail-section__heading small, .prose, .chapter-list time, .info-card dt { color: var(--dw-muted); }
.chapter-order { color: var(--dw-soft); background: var(--dw-panel-2); border-color: var(--dw-line); border-radius: 7px; }
.chapter-list a:hover { color: #fff; background: rgba(255,255,255,.045); }
.creator-card h2 a:hover { color: var(--dw-accent); }
.recommendations { background: rgba(0,0,0,.11); border-color: var(--dw-line); }

/* User pages and generic content */
.dashboard-nav, .dashboard-content > section, .login-card, .account-card, .text-card, .prose-page { color: var(--dw-text); background: var(--dw-panel); border-color: var(--dw-line); border-radius: 12px; }
.dashboard-nav a { color: var(--dw-soft); border-color: var(--dw-line); }
.dashboard-nav a:hover, .dashboard-nav a.is-active { color: #fff; background: var(--dw-accent); }
.muted-note, .account-card p, .login-card p, .profile-form small { color: var(--dw-muted); }
.history-list a { border-color: var(--dw-line); }
.profile-form input { padding: 10px 12px; }
.form-notice.is-success { color: #bff4d4; background: rgba(25,183,107,.16); }
.form-notice.is-error { color: #ffc5c5; background: rgba(221,97,101,.17); }
.text-card { padding: 22px; }
.not-found > span { color: var(--dw-accent); }
.inkwave-toast { background: var(--dw-accent); border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,.35); }

/* Reader: retain a real day/night distinction while using the new controls. */
.inkwave-reader-page { color-scheme: light; --reader-bg: #dfe3e5; --reader-paper: #fff; background: var(--reader-bg); }
.inkwave-reader-page.is-night { color-scheme: dark; --reader-bg: #11181c; --reader-paper: #1c272d; }
.reader-toolbar { height: 58px; background: var(--dw-header); border-color: var(--dw-line); }
.reader-toolbar__back { height: 58px; border-color: var(--dw-line); }
.reader-toolbar__title a { color: #ff9da0; }
.reader-tool { border-color: var(--dw-line); }
.brightness-control input, .reader-settings input { accent-color: var(--dw-accent); }
.reader-settings { top: 68px; color: var(--dw-text); background: var(--dw-panel); border-color: var(--dw-line); border-radius: 11px; box-shadow: 0 18px 38px rgba(0,0,0,.4); }
.reader-settings button { color: var(--dw-soft); background: var(--dw-bg-deep); border-color: var(--dw-line); }
.reader-settings button.is-active { color: #fff; background: var(--dw-accent); }
.reader-settings label, .reader-setting-value output { color: var(--dw-muted); }
.reader { padding-top: 58px; }
.reader-progress { top: 57px; }
.reader-progress span { background: var(--dw-accent); }
.reader-page-nav { background: var(--dw-panel); border-color: var(--dw-line); border-radius: 9px; overflow: hidden; }
.reader-chapter-nav { border-color: var(--dw-line); border-radius: 10px; overflow: hidden; }
.reader-chapter-nav__catalog { background: var(--dw-accent) !important; }
.reader-end > span { color: var(--dw-accent); }

/* Footer */
.site-footer { padding: 42px 0 24px; color: var(--dw-muted); background: var(--dw-bg-deep); border-top: 1px solid rgba(255,255,255,.04); }
.footer-brand { width: max-content; display: grid; grid-template-columns: 58px auto; grid-template-rows: auto auto; align-items: center; gap: 0 12px; margin: 0 auto 25px; color: #fff; }
.footer-brand__avatar { width: 58px; height: 58px; grid-row: 1 / 3; object-fit: contain; }
.footer-brand__mark { width: 50px; height: 50px; grid-row: 1 / 3; border-radius: 11px; }
.footer-brand strong { align-self: end; font-size: 27px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.footer-brand small { align-self: start; color: var(--dw-accent); font-size: 10px; font-weight: 750; letter-spacing: .04em; }
.site-footer__notice { max-width: 980px; padding: 0 0 25px; margin: 0 auto; color: var(--dw-muted); border-color: var(--dw-line); text-align: center; }
.site-footer__notice a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom { align-items: center; padding-top: 21px; }
.site-footer__menu a { color: var(--dw-soft); }
.site-footer__menu a:hover { color: var(--dw-accent); }

@media (max-width: 1280px) {
  .site-brand { min-width: 145px; max-width: 170px; }
  .site-nav a { padding-inline: 12px; }
  .site-nav .inkwave-popular-tag { display: none; }
  .header-search { flex-basis: 310px; }
}

@media (max-width: 1020px) {
  .site-header, .site-header__inner { height: 68px; }
  .site-brand { max-width: none; margin-right: auto; }
  .site-nav { position: fixed; z-index: 210; top: 68px; right: 0; bottom: 0; left: 0; display: none; padding: 15px 20px 30px; overflow-y: auto; background: rgba(24,29,33,.98); }
  .site-nav.is-open { display: block; }
  .site-nav__list { display: grid; gap: 8px; padding: 0; }
  .site-nav__list li { display: block !important; }
  .site-nav a { height: 49px; padding: 0 17px; border: 0; font-size: 15px; }
  .header-search { order: 3; min-width: 240px; max-width: 430px; flex: 1 1 320px; }
  .comic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .filter-menu--sort { align-self: flex-end; margin: 0; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .site-header, .site-header__inner { height: 62px; }
  .site-header__inner { gap: 7px; }
  .nav-toggle { width: 42px; height: 42px; flex-basis: 42px; border-radius: 9px; }
  .site-brand { min-width: 0; font-size: 18px; }
  .site-brand__name { font-size: 15px; }
  .site-brand__url { font-size: 9px; }
  .site-brand__mark { width: 38px; height: 38px; }
  .site-nav { top: 62px; }
  .header-search { position: absolute; top: 72px; right: 12px; left: 12px; max-width: none; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
  .site-actions { margin-left: auto; }
  .language-switcher { display: none; }
  .bookshelf-link, .account-link { width: 39px; height: 39px; }
  .bookshelf-link svg, .account-link svg { width: 21px; height: 21px; }
  .catalog-home { padding-top: 68px; }
  .catalog-alert { align-items: flex-start; padding: 14px 16px; border-radius: 10px; }
  .catalog-alert > span { margin-top: 4px; }
  .catalog-toolbar__filters { flex-wrap: nowrap; padding-bottom: 5px; overflow-x: auto; scrollbar-width: none; }
  .catalog-toolbar__filters::-webkit-scrollbar { display: none; }
  .filter-pill, .filter-menu > summary { min-height: 41px; flex: 0 0 auto; padding: 0 14px; }
  .filter-menu > div { position: fixed; top: 130px; right: 12px; left: 12px; max-height: calc(100vh - 150px); }
  .filter-menu--sort { align-self: flex-start; }
  .comic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 11px; row-gap: 22px; }
  .comic-card__cover img { aspect-ratio: 4 / 3; }
  .comic-card__meta { grid-template-columns: 1fr auto; }
  .comic-card__meta > span:last-child { display: none; }
  .catalog-pagination li:first-child, .catalog-pagination li:last-child { width: 100%; }
  .catalog-pagination li:first-child a, .catalog-pagination li:last-child a { width: 100%; min-width: 0; }
  .tag-directory ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .comic-hero { grid-template-columns: 1fr; padding: 18px; }
  .comic-hero__cover { width: min(75%,280px); }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { grid-template-columns: 1fr; }
  .chapter-list { grid-template-columns: 1fr; }
  .chapter-list a:nth-child(odd) { border-right: 0; }
  .chapter-list a:nth-child(even) { padding-left: 0; }
  .site-footer__bottom { align-items: center; flex-direction: column; text-align: center; }
  .site-footer__nav, .site-footer__menu { margin-left: 0; justify-content: center; }
}

@media (max-width: 460px) {
  .site-brand__copy { max-width: 130px; }
  .bookshelf-link { display: none; }
  .catalog-title-row h1 { font-size: 20px; }
  .comic-card__rating { display: none; }
  .comic-card h3 { font-size: 13px; }
  .comic-card__author { font-size: 10px; }
  .tag-directory ul { grid-template-columns: 1fr; }
  .home-about { grid-template-columns: 1fr; gap: 12px; }
}