@import url('public-pages.css');

/* Shared article layout; no viewport offsets or fixed content heights. */
body > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.front_title a { color: inherit; text-decoration: none; }
.back-to-blog { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }
main { width: min(100% - 32px, 880px); }
#blog_section { min-width: 0; }
#blog_section .blog-post {
  padding: clamp(20px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.blog-post h1 {
  margin: 0 0 24px;
  font-size: clamp(1.4rem, 3.4vw, 2.5rem);
  line-height: 1.4;
  text-wrap: balance;
  text-shadow: 0 0 24px #f28a1720;
}
#blog_section .blog-post h2 {
  margin: 32px 0 12px;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.5;
}
.blog-post p { font-size: 1rem; line-height: 1.8; }
.blog-post > img { aspect-ratio: 16 / 9; height: auto; max-height: 360px; object-fit: cover; }
.blog-post p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  body > header, main, body > footer { width: calc(100% - 24px); }
  #blog_section .blog-post { padding: 20px 16px; border-radius: 16px; }
  .blog-post h1 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }