/* Blog list + article styles (builds on site.css tokens) */

.page-head a { color: inherit; text-decoration: none; }

/* Topic chips */
.b-topics { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-block: 0.5rem 2.5rem; border-bottom: 1px solid var(--mist); margin-bottom: 2.5rem; }
.chip-n { opacity: 0.55; font-size: 0.8em; margin-left: 0.15rem; font-variant-numeric: tabular-nums; }

/* Meta line */
.b-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.b-meta span:first-child:empty { display: none; }

/* Cards */
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 1.75rem; }
@media (max-width: 960px) { .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .b-grid { grid-template-columns: minmax(0, 1fr); } }
.b-card { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.b-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--mist); }
.b-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.22,.6,.36,1); }
.b-card:hover .b-card-img img { transform: scale(1.03); }
.b-card-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-display); font-size: 4rem; color: var(--ink-soft); opacity: 0.35; }
.b-card-body { display: flex; flex-direction: column; gap: 0.6rem; }
.b-card-title { font-family: var(--font-body); font-weight: 400; font-size: 1.15rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink); text-wrap: balance; }
.b-card-title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--accent-lt), var(--accent-lt)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s; }
.b-card:hover .b-card-title a { background-size: 100% 1px; }
.b-card-excerpt { font-size: 0.95rem; line-height: 1.85; color: var(--ink-mid); letter-spacing: 0.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b-card-foot { font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.04em; }

/* Featured */
.b-card-big { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(3rem, 7vw, 5rem); }
.b-card-big .b-card-img { aspect-ratio: 7 / 5; }
.b-card-big .b-card-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.15; letter-spacing: -0.005em; }
.b-card-big .b-card-excerpt { -webkit-line-clamp: 4; font-size: 1.02rem; }
@media (max-width: 760px) { .b-card-big { grid-template-columns: minmax(0, 1fr); } }

.b-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 4rem; }
.b-pager a:last-child { justify-self: end; }
.b-pager-n { font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.b-rss { margin-block: 3rem 5rem; font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.b-rss a { color: inherit; }
.b-empty { padding-block: 4rem; color: var(--ink-soft); }

/* Article */
.b-post-head { padding-block: clamp(2.5rem, 7vw, 5rem) 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.b-crumbs { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.b-crumbs a { color: inherit; text-decoration: none; }
.b-crumbs a:hover { color: var(--ink); }
.b-post-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 5.5vw, 3.8rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
html[lang^="zh"] .b-post-title { font-family: var(--font-body); font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.4; letter-spacing: 0.02em; }
.b-post-meta { padding-top: 1.25rem; border-top: 1px solid var(--mist); }
.b-cover { margin-block: 0.5rem 3rem; }
.b-cover img { width: 100%; height: auto; max-height: 72vh; object-fit: cover; border-radius: 8px; display: block; background: var(--mist); }

.b-short { border: 1px solid var(--accent-lt); border-radius: 8px; padding: 1.4rem 1.6rem; margin-bottom: 2.75rem; background: var(--card); }
.b-short-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }
.b-short p:last-child { font-size: 1.05rem; line-height: 1.9; color: var(--ink); letter-spacing: 0.02em; }

.prose { font-size: clamp(1.05rem, 1.4vw, 1.13rem); line-height: 2; color: var(--ink-mid); letter-spacing: 0.02em; }
.prose > * + * { margin-top: 1.4em; }
.prose h2 { font-family: var(--font-body); font-weight: 400; font-size: 1.45rem; line-height: 1.5; color: var(--ink); margin-top: 2.4em; letter-spacing: 0.03em; text-wrap: balance; }
.prose h3 { font-weight: 400; font-size: 1.18rem; color: var(--ink); margin-top: 2em; }
.prose strong { color: var(--ink); font-weight: 400; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose blockquote { border-left: 1px solid var(--accent); padding-left: 1.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.35em; line-height: 1.55; color: var(--ink); }
html[lang^="zh"] .prose blockquote { font-family: var(--font-body); font-style: normal; font-size: 1.12em; }
.prose img { width: 100%; height: auto; border-radius: 6px; display: block; }
.prose figure { margin-block: 2em; }
.prose figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.6rem; text-align: center; }
.prose hr { border: none; border-top: 1px solid var(--mist); margin-block: 2.5em; }

.b-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 2.5rem; }
.b-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--mist); }
.b-video, .b-source { margin-top: 2rem; font-size: 0.92rem; letter-spacing: 0.03em; }
.b-video a, .b-source a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--mist); }
.b-video a:hover, .b-source a:hover { color: var(--ink); border-color: var(--ink); }

.b-author { display: grid; grid-template-columns: 96px 1fr; gap: 1.5rem; align-items: start; margin-top: 4rem; padding-block: 2.25rem; border-block: 1px solid var(--mist); }
.b-author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--mist); }
.b-author-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin-bottom: 0.4rem; }
.b-author p { font-size: 0.95rem; color: var(--ink-mid); line-height: 1.9; }
.b-author-links { margin-top: 0.75rem; }
.b-author-links span { color: var(--ink-soft); }
.b-author-links a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 520px) { .b-author { grid-template-columns: 1fr; } }

.b-adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-block: 2.5rem 1rem; }
.b-adjacent a { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: var(--ink); font-size: 0.98rem; line-height: 1.6; }
.b-adjacent a span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.b-adjacent a.right { text-align: right; }
@media (max-width: 520px) { .b-adjacent { grid-template-columns: 1fr; } .b-adjacent a.right { text-align: left; } }

.b-related { padding-block: clamp(4rem, 9vw, 7rem); }
.b-related > .t-label { font-size: 0.85rem; margin-bottom: 2rem; }
.prose video { width: 100%; border-radius: 6px; display: block; background: var(--mist); }