.page-articles { background:#faf8f3; }
.articles-main { max-width:1152px; margin:auto; padding:64px 24px 96px; }
.articles-main h1 { font:500 clamp(44px,6.1vw,88px)/1.06 'Newsreader',serif; margin:0 0 48px; letter-spacing:-.025em; }
.articles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px; list-style:none; padding:0; margin:0; }
.articles-grid li { min-width:0; }
.article-card { display:flex; flex-direction:column; height:100%; background:white; border:1px solid #e5ded2; border-radius:20px; overflow:hidden; color:#292929; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.article-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px #29292912; }
.article-card:focus-visible,.articles-back:focus-visible { outline:3px solid #5a1721; outline-offset:4px; }
.article-thumbnail { aspect-ratio:16/9; overflow:hidden; background:#f2ebdd; }
.article-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }
.article-placeholder { width:100%; height:100%; min-height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; background:#f2ebdd; color:#5a1721; }
.article-placeholder span { font:italic 64px/1 'Newsreader',serif; }
.article-placeholder small { font:500 12px/1.6 'Plus Jakarta Sans',sans-serif; }
.article-card-copy { padding:24px; display:flex; flex:1; flex-direction:column; }
.article-meta { font:500 12px/1.6 'Plus Jakarta Sans',sans-serif; color:#71665f; }
.article-card h2 { font:600 19px/1.45 'Plus Jakarta Sans',sans-serif; margin:12px 0; letter-spacing:0; }
.article-card p { font-size:14px; line-height:1.6; color:#625b55; margin:0 0 24px; }
.article-action { margin-top:auto; color:#5a1721; font-weight:600; font-size:14px; }
.article-reader { max-width:832px; padding:48px 24px 80px; margin:auto; }
.articles-back { display:inline-block; color:#5a1721; font-size:14px; text-underline-offset:5px; margin-bottom:32px; }
.article-reader h1 { font:500 clamp(36px,4.5vw,60px)/1.12 'Newsreader',serif; letter-spacing:-.025em; margin:0 0 16px; overflow-wrap:break-word; }
.article-reader header { max-width:680px; margin:0 auto 32px; }
.article-cover { border-radius:20px; overflow:hidden; margin-bottom:48px; }
.article-cover img { display:block; width:100%; height:auto; }
.article-cover .article-placeholder { min-height:240px; }
.article-prose,.article-source { max-width:680px; margin-left:auto; margin-right:auto; font-size:17px; line-height:1.75; overflow-wrap:anywhere; }
.article-prose p { margin:0 0 24px; }
.article-prose :is(h2,h3,h4,h5) { color:#292929; line-height:1.25; margin:40px 0 16px; }
.article-prose h2 { font:500 34px/1.2 'Newsreader',serif; }
.article-prose h3 { font:600 23px/1.3 'Plus Jakarta Sans',sans-serif; }
.article-prose h4 { font-size:20px; }
.article-prose blockquote { margin:32px 0; padding:8px 0 8px 24px; border-left:3px solid #5a1721; color:#5a1721; }
.article-prose blockquote p:last-child { margin-bottom:0; }
.article-prose :is(ul,ol) { padding-left:24px; margin:0 0 24px; }
.article-prose li { margin-bottom:8px; }
.article-prose img { display:block; max-width:100%; height:auto; border-radius:12px; margin:24px auto; }
.article-prose a,.article-source a { color:#5a1721; text-underline-offset:3px; }
.article-prose hr { border:0; border-top:1px solid #d8d0c5; margin:32px 0; }
.article-prose table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.article-prose :is(td,th) { padding:12px; border:1px solid #d8d0c5; }
.article-source { font-size:13px; border-top:1px solid #d8d0c5; padding-top:24px; margin-top:40px; }
.article-bottom { margin-top:32px; margin-bottom:0; }
@media(max-width:1000px) { .articles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .articles-main { padding:40px 24px 64px; } .articles-main h1 { margin-bottom:32px; } .articles-grid { grid-template-columns:1fr; gap:24px; } .article-reader { padding-top:32px; } .article-prose { font-size:16px; line-height:1.7; } .article-cover { margin-bottom:32px; } }
@media(prefers-reduced-motion:reduce) { .article-card { transition:none; } .article-card:hover { transform:none; } }