/* Article entry and reading page, using the existing site theme. */
.articles-section { background: #f7ffff; }
.article-teaser { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 32px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 14px 36px rgba(7,28,47,.06); }
.article-category { margin: 0 0 12px; font-size: .875rem; font-weight: 750; color: #08666b; }
.article-teaser h3 { margin: 0 0 14px; font-size: clamp(22px,2.4vw,30px); line-height: 1.5; }
.article-teaser h3 a:hover { color: #08666b; text-decoration: underline; text-underline-offset: 5px; }
.article-teaser p:last-child { margin: 0; color: #46596c; }
.article-shell[hidden] { display: none; }
.article-hero { padding: 38px 0 48px; background: linear-gradient(180deg,#fff,#eefafa); border-bottom: 1px solid var(--line); }
.article-container { width: min(840px,92vw); margin: 0 auto; }
.article-breadcrumbs { margin: 0 0 32px; font-size: .875rem; color: #526477; }
.article-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 12px; list-style: none; padding: 0; margin: 0; }
.article-breadcrumbs li + li::before { content: '/'; margin-right: 12px; color: #80949f; }
.article-breadcrumbs a { color: #08666b; text-decoration: underline; text-underline-offset: 3px; }
.article-hero h1 { font-size: clamp(30px,4vw,46px); line-height: 1.45; letter-spacing: -.015em; margin: 10px 0 24px; }
.article-byline { margin: 0; color: #526477; font-size: .875rem; }
.article-reading { padding: 40px 0 64px; }
.article-introduction, .article-content { font-size: 1.0625rem; line-height: 1.9; overflow-wrap: break-word; }
.article-introduction p { margin: 0 0 20px; color: #344b60; }
.article-toc { margin: 30px 0 40px; border: 1px solid var(--line); border-radius: 20px; padding: 24px; background: #f5fbfb; }
.article-toc h2 { font-size: 1.15rem; margin: 0 0 14px; line-height: 1.6; letter-spacing: 0; }
.article-toc ol { padding-left: 24px; margin: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 30px; }
.article-toc a { color: #08666b; text-decoration: underline; text-underline-offset: 4px; }
.article-content h2 { margin: 38px 0 18px; padding-top: 12px; font-size: clamp(22px,2.7vw,29px); line-height: 1.55; letter-spacing: 0; scroll-margin-top: 94px; }
.article-content p { color: #344b60; margin: 0 0 20px; }
.article-content strong { color: var(--navy); }
.article-content ul { padding-left: 25px; margin: 0 0 24px; color: #344b60; }
.article-content li + li { margin-top: 10px; }
.article-content a { color: #08666b; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.article-content p:last-child { font-size: .9375rem; }
.article-next-links { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); margin-top: 38px; padding-top: 28px; }
.article-next-links .btn { white-space: normal; }
@media (max-width: 760px) {
  .article-teaser { grid-template-columns: 1fr; padding: 24px; gap: 22px; }
  .article-teaser > .btn { justify-self: start; white-space: normal; }
  .article-toc ol { grid-template-columns: 1fr; }
  .article-hero { padding: 26px 0 34px; }
  .article-breadcrumbs { margin-bottom: 24px; }
  .article-reading { padding-top: 28px; }
}