/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V5 */
/* Hallmark · theme: studied-DNA (source: user-supplied Xinpianchang screenshot)
   Full-bleed photographic banner, overlay navigation, category strip, compact gallery.
   Existing typography and accent retained; original generated architecture artwork. */
body { background: var(--color-surface); color: var(--color-ink); }
.topbar.site-header { position: relative; border-bottom: 1px solid var(--color-rule); }
.header-inner { max-width: none; padding: 16px 20px 0; }
.site-brand.brand { font-size: 24px; }
.site-brand .brand-en { font-size: 7px; }
.site-brand .brand-mark { width: 26px; transform: rotate(-12deg) scale(.9); }
.header-actions .button { min-height: 40px; background: var(--color-accent); color: var(--color-accent-ink); padding: 8px 16px; }
.header-actions .button svg { display: none; }
.top-navigation { justify-content: flex-start; gap: 28px; margin-top: 8px; }
.top-nav-item { font-size: 12px; min-height: 44px; }
.top-nav-item.active::after { display: none; }
.favorite-count { display: none; }
body[data-view="library"] .site-header { position: absolute; inset: 0 0 auto; border: 0; background: transparent; color: var(--color-nav-ink); }
body[data-view="library"] .site-brand, body[data-view="library"] .top-nav-item { color: var(--color-nav-ink); }
body[data-view="library"] .site-brand .brand-mark i { background: var(--color-nav-ink); }
body[data-view="library"] .top-nav-item.active { font-weight: 650; }
body[data-view="library"] .top-nav-item:focus-visible, body[data-view="library"] .brand:focus-visible { outline-color: var(--color-nav-ink); }
main { max-width: 1720px; padding: 32px 20px 40px; }
body[data-view="library"] main, body[data-view="favorites"] main { max-width: none; padding: 0; }
#main, .ai-results { scroll-margin-top: 24px; }
.home-hero.ai-banner { width: 100%; margin: 0; min-height: 400px; height: 400px; padding: 0; border-radius: 0; background: var(--color-sky); color: var(--color-ink); }
.home-hero .hero-art { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% center; }
.home-hero::before { background: linear-gradient(180deg,var(--color-nav-shade) 0,var(--color-nav-shade) 72px,var(--color-clear) 160px); }
.home-hero .hero-content { width: 100%; max-width: 1560px; padding: 164px 24px 32px; margin-inline: auto; }
.home-hero h1 { font-size: clamp(30px,7.8vw,40px); line-height: 1.38; font-weight: 700; letter-spacing: -.035em; }
.home-hero .hero-description { margin-top: 16px; font-size: 13px; color: var(--color-ink); }
.category-band { border-bottom: 1px solid var(--color-rule); background: var(--color-surface); color: var(--color-ink); }
.category-tabs { max-width: 1720px; margin: 0 auto; padding-inline: 20px; border-bottom: 0; gap: 24px; }
.category-tab { min-height: 60px; padding: 16px 0; font-size: 12px; }
.category-tab.active { color: var(--color-accent); }
.category-tab span { display: none; }
.library-content { max-width: 1720px; margin-inline: auto; padding: 24px 20px 32px; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gallery-toolbar .library-heading { margin: 0; }
.library-heading h2 { font-size: 22px; font-weight: 650; }
.library-heading p { display: none; }
.gallery-toolbar .filter-search { width: 100%; max-width: none; flex: 0 0 100%; }
.filter-search input { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-rule); border-radius: 6px; }
.result-line { min-height: 40px; font-size: 11px; justify-content: flex-start; }
.case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
.case-card .cover-link { aspect-ratio: 16 / 10; border-radius: 8px; container-type: inline-size; }
.case-grid .cover-link .typographic-cover { padding: 14px; }
.case-grid .cover-link .cover-kicker { display: none; font-size: 8px; letter-spacing: 0; white-space: nowrap; }
.case-grid .cover-link .cover-big { margin-top: 0; }
.case-grid .cover-link .cover-trae .cover-big { font-size: clamp(24px,24cqw,72px); letter-spacing: -.07em; }
.case-grid .cover-link .cover-yunnan .cover-big, .case-grid .cover-link .cover-kuaishou .cover-big { font-size: clamp(14px,8cqw,28px); letter-spacing: .02em; line-height: 1.45; }
.case-grid .cover-link .cover-sub, .case-grid .cover-link .cover-bracket { display: none; }
.case-grid .cover-link .cover-caption { font-size: 8px; right: 8px; bottom: 6px; }
.case-grid .cover-type { display: none; }
.favorite-button { width: 36px; height: 36px; top: 4px; right: 4px; box-shadow: none; }
.favorite-button::before { content: ''; position: absolute; inset: -4px; }
.favorite-button svg { width: 15px; height: 15px; }
.card-text { padding-top: 10px; }
.card-meta { font-size: 9px; gap: 5px; }
.card-meta time { display: none; }
.card-title { font-size: 12px; min-height: 40px; line-height: 1.65; font-weight: 600; }
.card-bottom { margin-top: 6px; }
.card-bottom .tags { display: none; }
.card-source { font-size: 9px; }
.page-footer { margin-top: 32px; padding-top: 20px; }
body[data-view="favorites"] .category-band { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  body[data-view="library"] .top-nav-item:hover { opacity: .75; color: var(--color-nav-ink); }
}
@media (min-width: 40rem) {
  .header-inner { display: flex; padding: 16px 32px; min-height: 80px; gap: 32px; }
  .top-navigation { margin: 0; gap: 24px; flex: 1; }
  .top-nav-item { font-size: 13px; }
  .header-actions { flex: 0 0 auto; }
  .home-hero.ai-banner { height: 400px; min-height: 400px; }
  .home-hero .hero-content { padding: 144px 64px 48px; }
  .home-hero h1 { font-size: 44px; }
  .home-hero .hero-description { font-size: 15px; }
  .category-tabs { justify-content: center; gap: 44px; padding-inline: 32px; }
  .category-tab { font-size: 13px; min-height: 64px; }
  .library-content { padding: 28px 32px 40px; }
  .gallery-toolbar .filter-search { max-width: 248px; flex: 0 1 248px; }
  .case-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 20px; }
  .card-title { font-size: 13px; }
  .card-meta { font-size: 10px; }
  .card-source { font-size: 10px; }
  .case-grid .cover-link .typographic-cover { padding: 16px; }
  .case-grid .cover-link .cover-kicker { display: block; font-size: 9px; }
  .case-grid .cover-link .cover-big { margin-top: 10px; }
}
@media (min-width: 60rem) {
  .header-inner { gap: 44px; padding: 16px 40px; }
  .site-brand.brand { font-size: 28px; }
  .top-navigation { gap: 32px; min-height: 44px; }
  .top-nav-item { min-height: 44px; padding-block: 16px; }
  .header-actions .button { font-size: 12px; padding-inline: 24px; }
  .home-hero.ai-banner { height: clamp(420px,32vw,560px); min-height: 420px; }
  .home-hero .hero-art { object-position: center; }
  .home-hero .hero-content { padding: clamp(148px,11vw,192px) 8% 64px; }
  .home-hero h1 { font-size: clamp(48px,4.2vw,66px); line-height: 1.3; }
  .home-hero .hero-description { font-size: 16px; margin-top: 20px; }
  .library-content { padding: 28px 40px 48px; }
  .case-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 24px; }
  .library-heading h2 { font-size: 24px; }
  .card-title { font-size: 14px; }
  .card-meta time { display: inline; }
  .card-bottom .tags { display: flex; }
  .card-bottom .tag { font-size: 9px; }
  .case-grid .cover-type { display: inline-flex; bottom: 8px; left: 8px; }
}
@media (min-width: 85rem) {
  .case-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .header-inner { padding-inline: 48px; }
  .home-hero .hero-content { padding-inline: 12%; }
  .library-content { padding-inline: 48px; }
}