* { box-sizing: border-box; }
body { margin: 0; background: #f7f8fc; color: #182541; font: 16px/1.65 system-ui,"Segoe UI",Arial,sans-serif; }
header { background: #fff; border-bottom: 1px solid #e0e5f1; }
nav, main { width: min(100% - 40px, 1060px); margin-inline: auto; }
nav { min-height: 68px; display: flex; justify-content: space-between; align-items: center; }
a { color: #493fd3; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: inherit; }
.brand img { width: 38px; height: 38px; }
main { padding-block: 36px 64px; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.16; margin: 0 0 24px; overflow-wrap: anywhere; }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.posts article, .post { background: #fff; border: 1px solid #e0e5f1; border-radius: 16px; overflow: hidden; }
.posts a { display: block; text-decoration: none; color: inherit; }
.posts a:hover h2 { color: #493fd3; }
.posts article img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.posts article div { padding: 16px; overflow-wrap: anywhere; }
.posts h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.posts p { margin-bottom: 0; color: #57647d; }
.posts p:empty { display: none; }
.post { max-width: 800px; margin: auto; padding: clamp(20px, 5vw, 44px); }
.post h1 { margin-block: 18px 8px; }
.post time { color: #57647d; }
.post > img { display: block; max-width: 100%; max-height: 540px; margin: 24px auto; border-radius: 12px; }
.copy { font-size: 18px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.copy h2 { margin: 1.6em 0 .45em; font-size: 1.3em; line-height: 1.35; }
.post-action { margin: 28px 0 0; }
.post-action a { display: inline-block; padding: 10px 16px; border-radius: 10px; background: #493fd3; color: #fff; font-weight: 700; text-decoration: none; }
.post-action a:hover, .post-action a:focus-visible { text-decoration: underline; }