:root { --ink: #252525; --muted: #8c8c8c; --line: #dfdfdf; --field: #f5f5f5; --page: #fff; --sans: Arial, Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font-family: var(--sans); font-size: 14px; line-height: 1.12; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 20; padding: .6rem .8rem; color: #fff; background: var(--ink); }
.skip-link:focus { top: 1rem; }

/* 页眉：超大分区标识 */
.masthead { display: grid; grid-template-columns: repeat(4, 1fr); height: 220px; border-bottom: 1px solid var(--line); }
.mast-title { align-self: center; font-size: 200px; font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.mast-title-left { grid-column: 1; margin-left: 1.2vw; }
.mast-title-right { grid-column: 3; justify-self: center; }

/* 通用四列信息行 */
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; padding-right: 2.2vw; padding-left: 2.2vw; }

/* 导航行 */
.mast-meta { min-height: 42px; padding-top: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.mast-meta p { margin: 0; }
.mast-meta nav { display: flex; flex-direction: column; gap: 1px; }
.mast-meta nav a { width: fit-content; color: var(--muted); font-size: 11px; }
.mast-meta nav a:hover { color: var(--ink); }
.mast-meta nav a.active { color: var(--ink); }
.mast-meta .mast-meta-end { justify-self: end; align-self: start; color: var(--muted); }
.mast-meta a.mast-meta-end:hover { color: var(--ink); }

/* 作品网格 */
.works-grid { row-gap: 40px; padding-top: 90px; padding-bottom: 90px; }
.work-card { min-width: 0; border-top: 1px solid var(--line); }
.work-meta { display: flex; justify-content: space-between; min-height: 44px; padding: 10px 0 8px; color: var(--ink); font-size: 13px; }
.work-meta span:last-child { color: #b4b4b4; }
.work-meta a:hover { text-decoration: underline; }
.work-image { display: grid; width: 100%; aspect-ratio: 1 / 1.16; place-items: center; overflow: visible; border: 0; padding: 16px; background: var(--field); }
.work-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.work-image-status { color: var(--muted); font-size: 12px; line-height: 1.6; }
.work-card--missing .work-image { cursor: default; }
.work-image:hover, .work-image:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); }
.work-image:focus-visible, .lightbox button:focus-visible, .filter:focus-visible { outline: 2px solid #5277ba; outline-offset: 3px; }
.work-empty { display: grid; width: 100%; aspect-ratio: 1 / 1.16; place-content: center; gap: 6px; border: 1px dashed var(--line); background: var(--field); text-align: center; color: var(--muted); font-size: 13px; }
.work-empty p { margin: 0; }
.work-empty .work-empty-sub { color: #b4b4b4; font-size: 11px; }
footer { margin: 0 2.2vw; padding: 12px 0 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
footer p { margin: 0; }

/* 归档条与筛选 */
.archive-bar { padding-top: 82px; row-gap: 10px; color: var(--ink); font-size: 13px; }
.archive-bar > p { margin: 0; }
.archive-bar > p:nth-child(2) { color: var(--muted); }
.archive-filters { display: flex; flex-direction: column; gap: 7px; }
.filter-group, .spec-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; }
.meta-label { color: var(--muted); font-size: 12px; }
.filter { padding: 0 0 2px; border: 0; border-bottom: 1px solid transparent; color: var(--muted); background: transparent; font-size: 12px; }
.filter[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.filter[disabled] { color: #c4c4c4; cursor: default; }
.archive-note { text-align: right; color: var(--muted); font-size: 11px; }
.archive-bar + .works-grid { padding-top: 85px; }
.empty-state { grid-column: 1 / -1; margin: 0; padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
.load-error p { margin: 0 0 12px; }
.retry-button { padding: 6px 12px; border: 1px solid var(--ink); color: var(--ink); background: var(--page); font-size: 12px; }
.retry-button:hover, .retry-button:focus-visible { color: var(--page); background: var(--ink); }

/* 漫画：篇目分组 */
.series-list { padding-top: 82px; padding-bottom: 90px; }
.series { padding-bottom: 90px; }
.series-head { row-gap: 7px; padding-bottom: 24px; }
.series-head p { margin: 0; }
.series-title { font-size: 13px; }
.series-sub { color: var(--muted); font-size: 11px; }
.series-pages { padding-top: 0; padding-bottom: 0; }

/* 关于 */
.about-body { padding-top: 82px; padding-bottom: 90px; row-gap: 12px; }
.about-main { grid-column: 2 / 4; }
.about-body p { margin: 0 0 14px; font-size: 13px; line-height: 1.8; }
.about-body .about-note { color: var(--muted); font-size: 11px; line-height: 1.7; }

/* 文章：列表 */
.article-list { padding: 0 2.2vw; }
.archive-bar + .article-list { padding-top: 85px; padding-bottom: 90px; }
.article-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.article-row:last-child { border-bottom: 1px solid var(--line); }
.article-row > * { min-width: 0; }
.article-order { color: #b4b4b4; font-size: 13px; }
.article-row-title { grid-column: 2 / 4; font-size: 15px; }
.article-row-date { grid-column: 4; color: var(--muted); font-size: 12px; }
.article-row:hover .article-row-title { text-decoration: underline; }
.article-row--unavailable { color: var(--muted); }
.article-row--unavailable:hover .article-row-title { text-decoration: none; }

/* 文章：正文 */
.article-body { padding-top: 82px; padding-bottom: 90px; row-gap: 26px; }
.article-head, .article-prose { grid-column: 2 / 4; }
.article-title { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: .02em; line-height: 1.35; }
.article-meta { margin: 0; color: var(--muted); font-size: 11px; }
.article-flag { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.article-prose p { margin: 0 0 18px; font-size: 14px; line-height: 2; }
.article-prose h2 { margin: 30px 0 12px; font-size: 15px; font-weight: 700; }
.article-prose blockquote { margin: 0 0 22px; padding: 4px 0 4px 18px; border-left: 2px solid var(--line); color: var(--muted); }
.article-prose blockquote p { margin: 0; }
.article-prose .article-end { padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.7; }

/* 首页的文章入口行 */
.section-row { align-items: baseline; padding-top: 34px; padding-bottom: 34px; border-top: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.section-row > p { margin: 0; }
.section-row > p:nth-child(2), .section-row > p:nth-child(3) { color: var(--muted); }
.section-more { justify-self: end; color: var(--muted); }
.section-row:hover .section-more { color: var(--ink); }
.section-row:hover > p:first-child { text-decoration: underline; }

/* 提示气泡 */
.notice { position: fixed; right: 18px; bottom: 18px; z-index: 10; max-width: 240px; transform: translateY(12px); padding: 9px 11px; color: #fff; background: var(--ink); font-size: 11px; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.notice.show { transform: translateY(0); opacity: 1; }

/* 完整大图查看 */
.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; color: #fff; background: rgba(20, 20, 20, .97); }
.lightbox::backdrop { background: rgba(20, 20, 20, .97); }
.lightbox-frame { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; grid-template-rows: 1fr auto; width: 100%; height: 100%; padding: 26px 3vw 16px; }
.lightbox figure { display: grid; height: calc(100vh - 66px); margin: 0; place-items: center; }
.lightbox figure img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; }
.lightbox figcaption { align-self: end; padding-top: 8px; color: #aaa; font-size: 10px; }
.lightbox button { border: 0; color: #fff; background: transparent; }
.lightbox-close { position: absolute; top: 18px; right: 3vw; font-size: 28px; line-height: 1; }
.lightbox-step { font-size: 20px; opacity: .78; }
.lightbox-step:hover { opacity: 1; }
.lightbox-frame > p { grid-column: 2; margin: 0; color: #777; text-align: center; font-size: 10px; }

@media (max-width: 760px) {
  .masthead { height: 140px; min-height: 0; }
  .mast-title { font-size: 120px; line-height: 1; }
  .mast-title-left { margin-left: 2vw; }
  .mast-title-right { grid-column: 3 / 5; justify-self: end; margin-right: 4vw; }
  .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; padding-right: 4vw; padding-left: 4vw; }
  .mast-meta { min-height: 48px; padding-top: 7px; font-size: 10px; }
  .mast-meta p:nth-child(3) { display: none; }
  .mast-meta nav a { font-size: 12px; }
  .works-grid { row-gap: 25px; padding-top: 68px; padding-bottom: 58px; }
  .work-meta { min-height: 34px; padding-top: 7px; font-size: 11px; }
  .work-image { aspect-ratio: 1 / 1.27; padding: 7px; }
  .archive-bar { padding-top: 46px; }
  .archive-bar > p:nth-child(2) { text-align: right; font-size: 11px; }
  .archive-filters { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid var(--line); }
  .archive-note { grid-column: 1 / -1; margin-top: -3px; text-align: left; }
  .archive-bar + .works-grid { padding-top: 54px; }
  .series-list { padding-top: 46px; padding-bottom: 58px; }
  .series { padding-bottom: 54px; }
  .series-head { padding-bottom: 16px; }
  .about-body { padding-top: 46px; padding-bottom: 58px; }
  .about-main { grid-column: 1 / -1; }
  .archive-bar + .article-list { padding-top: 54px; padding-bottom: 58px; }
  .article-list { padding-right: 4vw; padding-left: 4vw; }
  .article-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 5px; padding: 15px 0; }
  .article-order { grid-column: 1; grid-row: 1 / 3; }
  .article-row-title { grid-column: 2; font-size: 14px; }
  .article-row-date { grid-column: 2; }
  .article-body { padding-top: 46px; padding-bottom: 58px; row-gap: 20px; }
  .article-head, .article-prose { grid-column: 1 / -1; }
  .article-title { font-size: 21px; }
  .article-prose p { font-size: 13.5px; line-height: 1.95; }
  .section-row { padding-top: 24px; padding-bottom: 24px; row-gap: 5px; }
  .section-row > p:nth-child(2) { display: none; }
  .section-more { grid-column: 2; justify-self: end; }
  footer { margin: 0 4vw; }
  .lightbox-frame { grid-template-columns: 34px minmax(0, 1fr) 34px; padding-right: 2vw; padding-left: 2vw; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }