body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); overflow-x: hidden; }
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; }

.site-nav { padding: var(--space-4) clamp(20px, 5vw, 64px); gap: var(--space-6); flex-wrap: wrap; }
.site-nav .nav-brand { font-size: 24px; margin-right: auto; }
.site-nav nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; font-size: 14px; }

.section { padding: clamp(36px, 5vw, 72px) clamp(20px, 5vw, 64px); }
.band { background: var(--color-surface); }
.wrap { max-width: 1280px; margin: 0 auto; }
.btn { border-radius: 999px; }

.hero { padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(36px, 5vw, 72px); }
.hero-copy { max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.hero-copy .tag { border-radius: 999px; padding: 6px 14px; font-size: 12px; }
.hero-copy h1 { font-size: clamp(38px, 7vw, 76px); line-height: 1.04; text-wrap: balance; }
.hero-copy p { margin: 0; font-size: 18px; max-width: 56ch; color: var(--color-neutral-700); text-wrap: pretty; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-1); }
.actions .btn { padding: 14px 28px; font-size: 15px; }
.hero-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin: clamp(32px, 4vw, 56px) auto 0; max-width: 1280px; }
.hero-images figure { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; }
.hero-images figure.offset { margin-top: clamp(0px, 3vw, 40px); }
.hero-images img { width: 100%; height: 100%; object-fit: cover; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.section-head h2, .page-title { font-size: clamp(30px, 4vw, 44px); margin: 0 0 var(--space-2); }
.section-head p { margin: 0; color: var(--color-neutral-700); font-size: 16px; }
.section-head .btn-ghost { font-size: 14px; color: var(--color-accent-700); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.5vw, 32px); }
.post-card { border-radius: var(--radius-lg); padding: var(--space-3); gap: var(--space-3); }
.post-card .thumb { display: block; aspect-ratio: 5 / 4; border-radius: var(--radius-md); overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.meta { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--color-neutral-700); }
.meta .tag { border-radius: 999px; }
.post-card .card-title { font-size: 22px; line-height: 1.2; }
.post-card .excerpt { margin: 0; font-size: 15px; color: var(--color-neutral-700); }
.post-card time { font-size: 13px; color: var(--color-neutral-700); }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.intro { max-width: 36ch; }
.intro .tag { border-radius: 999px; padding: 6px 14px; font-size: 12px; }
.intro h2 { font-size: clamp(30px, 4vw, 44px); margin: var(--space-3) 0 var(--space-2); }
.intro p { margin: 0; color: var(--color-neutral-700); font-size: 16px; text-wrap: pretty; }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rank-list li { display: flex; gap: var(--space-4); align-items: center; background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.rank { font-family: var(--font-heading); font-size: 22px; color: var(--color-accent-700); min-width: 34px; }
.rank-list h3 { font-size: 19px; line-height: 1.25; margin: 0 0 2px; }
.meta-line { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

.article { max-width: 760px; }
.article-head { margin-bottom: var(--space-8); }
.article-head h1, .article > .page-title { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin: var(--space-3) 0; text-wrap: balance; }
.article-head time { font-size: 14px; color: var(--color-neutral-700); }
.prose { font-size: 17px; line-height: 1.7; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); margin: var(--space-8) 0 var(--space-3); }
.prose h3 { font-size: clamp(20px, 2.4vw, 26px); margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose a { color: var(--color-accent-700); text-decoration: underline; }
.prose figure { margin: var(--space-6) 0; text-align: center; }
.prose img { width: 100%; max-width: 480px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); margin: 0 auto; filter: saturate(.6) contrast(.85) brightness(1.1) opacity(.94); }
.prose figcaption { margin-top: var(--space-2); font-size: 13px; color: var(--color-neutral-700); }
.back { margin-top: var(--space-8); font-size: 15px; }

.site-footer { padding: var(--space-8) clamp(20px, 5vw, 64px); display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-neutral-700); }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }