.container.homepage { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }
.section-title { font-size: 1.4rem; margin: 2.5rem 0 1rem; }


.hero { padding: 2rem 0 1rem; text-align: center; }
.hero-title { font-size: 2.2rem; margin: 0; }
.hero-tagline { font-size: 1.1rem; opacity: .9; margin: .5rem 0 1rem; }
.hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.hero-note { font-size: .95rem; opacity: .9; margin-top: 1rem; }
.hero-image { width: 96px; height: 96px; border-radius: 50%; margin: 1rem auto 0; display:block; }


.btn { display:inline-block; padding:.6rem .9rem; border-radius:.6rem; text-decoration:none; border:1px solid currentColor; }
.btn-primary { background: currentColor; color: var(--bg, #fff); }
.btn-primary { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.btn-secondary { background: transparent; }


.card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { border: 1px solid var(--border, rgba(0,0,0,.1)); border-radius: .8rem; overflow: hidden; text-decoration: none; }
.card-img { width: 100%; height: 140px; object-fit: cover; }
.card-body { padding: .9rem; }
.card-title { margin:.2rem 0 .25rem; font-size:1.05rem; }
.card-kicker { font-size:.8rem; opacity:.7; margin:0 0 .35rem; text-transform:uppercase; letter-spacing:.02em; }
.card-desc { margin:0; opacity:.9; }


.about-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:1.25rem; align-items:center; }
.about-media img { width:100%; border-radius:.8rem; }
.about-points { margin:.5rem 0 0; padding-left: 1.1rem; }


.post-list { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.post-item { border-bottom:1px dashed var(--border, rgba(0,0,0,.12)); padding-bottom:.6rem; }
.post-link { font-weight:600; text-decoration:none; }
.post-meta { font-size:.85rem; opacity:.7; margin-left:.5rem; }
.post-excerpt { margin:.35rem 0 0; opacity:.95; }
.more-link { margin-top: .75rem; }


.connect-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:1rem; align-items:start; }
.connect-actions { display:flex; flex-wrap: wrap; gap:.6rem; }
.inline-link { text-decoration: none; border-bottom: 1px solid currentColor; }


@media (max-width: 820px) {
.about-grid, .connect-grid { grid-template-columns: 1fr; }
}