/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 */
/* Hallmark · genre: atmospheric · macrostructure: Long Document · design-system: design.md · designed-as-app · contrast: pass (40–41) */
@import url('/assets/css/tokens.css');

* { box-sizing: border-box; }
html, body { min-width: 320px; overflow-x: clip; }
html { min-height: 100%; background: var(--color-ink); }
body { min-height: 100vh; margin: 0; color: var(--color-paper); background: var(--color-ink) url('/assets/download-bg.png') center / cover fixed no-repeat; font-family: var(--font-body); }
a { color: inherit; }
.page-shell { width: min(100% - 48px, 1180px); margin-inline: auto; }
.content-shell { width: min(100% - 48px, 920px); margin-inline: auto; }

.content-page { min-height: calc(100vh - 64px); padding: 138px 0 var(--space-2xl); background: var(--color-page-overlay); }
.content-surface { padding: var(--space-xl) clamp(var(--space-md), 5vw, var(--space-xl)); border: var(--rule-hair) solid var(--color-rule); background: var(--color-surface); box-shadow: var(--shadow-card); backdrop-filter: blur(16px); }
.content-kicker { margin: 0 0 var(--space-xs); color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.content-title { min-width: 0; margin: 0; color: var(--color-paper); font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 3.75rem); font-style: normal; font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.08; overflow-wrap: anywhere; }

.article-filters { margin: var(--space-lg) 0 var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.article-filters a { padding: .65rem .9rem; border: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); font-weight: 800; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.article-filters a:hover,
.article-filters a:focus-visible,
.article-filters a.active { border-color: var(--color-accent); color: var(--color-accent-strong); background: var(--color-accent-soft); }
.article-filters a:active,
.article-back:active,
.article-index-item:active { transform: translateY(1px); }

.article-index { border-top: var(--rule-hair) solid var(--color-rule); }
.article-index-item { min-height: 76px; display: grid; grid-template-columns: 105px minmax(0, 1fr) 24px; align-items: center; gap: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-paper-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.article-index-item:hover,
.article-index-item:focus-visible { color: var(--color-paper); transform: translateX(4px); }
.article-index-item time { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.article-index-item h2 { min-width: 0; margin: 0; font-size: var(--text-sm); font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.article-index-item span { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-xl); }
.content-empty { padding: var(--space-xl) 0; color: var(--color-muted); text-align: center; }
.pagination { margin-top: var(--space-lg); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2xs); }
.pagination a,
.pagination span { min-width: 40px; height: 40px; display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.pagination .active { border-color: var(--color-accent); color: var(--color-accent-ink); background: var(--color-accent); }

.article-back { display: inline-flex; margin-bottom: var(--space-lg); color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.article-back:hover,
.article-back:focus-visible { color: var(--color-accent-strong); transform: translateX(-3px); }
.article-header { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.article-meta { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.article-meta span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.article-meta i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-accent); }
.article-meta .category { color: var(--color-accent-strong); font-weight: 800; }
.article-content { color: var(--color-paper-2); font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.9; overflow-wrap: anywhere; }
.article-content p { margin: 0 0 var(--space-md); }
.article-content h2,
.article-content h3,
.article-content h4 { margin: var(--space-xl) 0 var(--space-sm); color: var(--color-paper); font-family: var(--font-display); font-style: normal; font-weight: 600; line-height: 1.3; }
.article-content h2 { font-size: var(--text-2xl); }
.article-content h3 { font-size: var(--text-xl); }
.article-content h4 { font-size: var(--text-lg); }
.article-content strong { color: var(--color-accent-strong); }
.article-content a { color: var(--color-accent); }
.article-content blockquote { margin: var(--space-lg) 0; padding: var(--space-md); border-left: var(--rule-fine) solid var(--color-accent); color: var(--color-paper-3); background: var(--color-accent-soft); }
.article-content img { display: block; max-width: 100%; height: auto; max-height: 720px; margin: var(--space-lg) auto; object-fit: contain; border: var(--rule-hair) solid var(--color-rule); }
.article-content table { width: 100%; margin: var(--space-lg) 0; border-collapse: collapse; font-family: var(--font-body); font-size: var(--text-sm); }
.article-content th,
.article-content td { padding: var(--space-xs); border: var(--rule-hair) solid var(--color-rule); text-align: left; }
.article-content th { color: var(--color-accent-strong); }
.article-close { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.not-found { min-height: 70vh; display: grid; place-content: center; text-align: center; }

@media (max-width: 600px) {
    .page-shell,
    .content-shell { width: min(100% - 30px, 1180px); }
    .content-page { padding-top: 104px; padding-bottom: var(--space-xl); }
    .content-surface { padding: var(--space-lg) var(--space-md); }
    .article-index-item { grid-template-columns: minmax(0, 1fr) 20px; gap: var(--space-2xs); padding: var(--space-sm) 0; }
    .article-index-item time { grid-column: 1 / -1; }
    .article-content { font-size: var(--text-md); }
    .article-content table { display: block; overflow-x: auto; }
}