.kl-layout { display: flex; flex-direction: column; min-height: 100vh; }
.kl-layout > main { flex: 1; }
.kl-page {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) 0;
  color: #173f3b;
  font-family: KoHo, "Segoe UI", sans-serif;
}
.kl-page h1, .kl-page h2, .kl-page h3, .kl-page h4 { font-family: inherit; font-weight: 700; }
.kl-page h1 { font-size: clamp(2.25rem, 1.7rem + 3vw, 4rem); margin: 0 0 .65rem; }
.kl-eyebrow { margin: 0 0 .45rem; color: #385e55; font-weight: 700; letter-spacing: .1em; }
.kl-lead { max-width: 55ch; margin: 0 0 2rem; font-size: 1.16rem; }
.kl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.15rem; }
.kl-card { position: relative; min-width: 0; border: 1px solid #b9d0c4; border-radius: 1rem; background: #f5faf7; overflow: hidden; }
.kl-card:hover { border-color: #176b63; }
.kl-card:focus-within { outline: 3px solid #176b63; outline-offset: 3px; }
.kl-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #dfeae4; }
.kl-card h2 { margin: 0; padding: 1rem 1rem 1.1rem; font-size: 1.25rem; overflow-wrap: anywhere; }
.kl-card a { text-underline-offset: .16em; }
.kl-card a::after { content: ""; position: absolute; inset: 0; }
.kl-empty { background: #f5faf7; border: 1px solid #b9d0c4; border-radius: 1rem; padding: 1.25rem; }
.kl-article { max-width: 49rem; margin: auto; }
.kl-back { display: inline-block; margin-bottom: 1.15rem; text-underline-offset: .16em; }
.kl-meta { display: grid; gap: .4rem; margin: 1rem 0 1.5rem; }
.kl-meta div { display: flex; flex-wrap: wrap; column-gap: .5rem; }
.kl-meta dt { font-weight: 700; }
.kl-meta dd { margin: 0; }
.kl-cover { width: 100%; height: auto; border-radius: 1rem; }
.kl-prose { font-size: 1.12rem; line-height: 1.7; overflow-wrap: anywhere; }
.kl-prose a { color: #0c4d48; text-underline-offset: .16em; }

.kl-card img.kl-placeholder { object-fit: contain; padding: 1.5rem; }