@import url('/assets/site.css');

.insights-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 70px 36px 90px;
}
.insights-heading { max-width: 760px; margin-bottom: 46px; }
.insights-heading h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 18px; }
.insights-heading p { color: var(--muted); font-size: 1.15rem; }
.insights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.insights-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.insights-card img { width: 100%; height: 260px; object-fit: cover; display: block; }
.insights-card-copy { padding: 24px; }
.insights-card h2 { font-size: 1.38rem; line-height: 1.25; margin: 0 0 8px; }
.insights-card h2 a { text-decoration: none; }
.insights-card p { color: var(--muted); }
.post-date { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: #888 !important; }
.no-posts { max-width: 680px; padding: 28px; background: var(--soft); border-radius: 10px; }

.post { max-width: 800px; margin: 0 auto; padding: 60px 36px 90px; }
.post h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.04em; margin: 24px 0 12px; }
.post-cover { width: 100%; max-height: 470px; object-fit: cover; border-radius: 12px; }
.post-content { font-size: 1.07rem; line-height: 1.8; color: #3f3f3f; }
.post-content h2, .post-content h3 { color: var(--ink); margin-top: 2.2em; line-height: 1.25; }
.post-content a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-content pre { padding: 18px; overflow-x: auto; background: #111; color: #eee; border-radius: 8px; }
.post-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.share { display: flex; gap: 12px; align-items: center; margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line); }
.share span { color: var(--muted); font-size: .9rem; }
.share a { width: 22px; height: 22px; display: inline-flex; color: var(--accent); }
.share svg { width: 100%; height: 100%; fill: currentColor; }

@media (max-width: 760px) {
  .insights-wrap, .post { padding-left: 20px; padding-right: 20px; }
  .insights-grid { grid-template-columns: 1fr; }
}