.single-article { max-width: 980px; margin: auto; padding: 75px max(5vw,22px) 100px; }
.article-header { max-width: 820px; margin-bottom: 38px; }
.article-back { display: inline-block; margin-bottom: 34px; color: #c72027; font-size: 13px; font-weight: 800; }
.article-header time { display: block; color: #c72027; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.article-header h1 { margin: 12px 0 20px; font-size: clamp(36px,5vw,62px); line-height: 1.08; letter-spacing: -.04em; }
.article-lead { color: #566775; font-size: 19px; line-height: 1.7; }
.single-article figure { margin: 0 0 45px; }
.single-article figure img { width: 100%; max-height: 590px; object-fit: cover; border-radius: 8px; }
.single-article figcaption { margin-top: 10px; color: #71808c; font-size: 12px; text-align: right; }
.article-content { max-width: 760px; margin: auto; font-size: 17px; line-height: 1.85; color: #344753; }
.article-content p { margin: 0 0 25px; }
.article-gallery { margin-top: 60px; }
.article-gallery h2 { margin: 0 0 24px; font-size: clamp(27px,3vw,38px); letter-spacing: -.025em; }
.article-gallery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.single-article .article-gallery figure { margin: 0; }
.single-article .article-gallery img { display: block; width: 100%; height: 310px; object-fit: cover; border-radius: 8px; }
.single-article .article-gallery figcaption { margin: 9px 4px 0; text-align: left; line-height: 1.45; }
.article-error { padding: 80px 0; text-align: center; }
.article-error .button { margin-top: 20px; color: #fff; background: #c72027; }
.loading { padding: 100px 0; text-align: center; color: #607080; }
@media (max-width: 650px) {
  .article-gallery-grid { grid-template-columns: 1fr; }
  .single-article .article-gallery img { height: auto; max-height: none; }
}

/* Czytelny, magazynowy układ dłuższych materiałów. */
.single-article{max-width:1080px;padding-top:clamp(58px,7vw,86px)}
.article-header{max-width:880px;margin-bottom:44px}
.article-back{display:inline-flex;align-items:center;min-height:42px;margin-bottom:30px;text-underline-offset:4px}
.article-back:hover{text-decoration:underline}
.article-header h1{font-size:clamp(38px,5vw,66px);text-wrap:balance}
.article-lead{max-width:820px;color:#4f626f;font-size:clamp(18px,2vw,21px)}
.single-article>figure{overflow:hidden;border-radius:20px;background:#eef2f4;box-shadow:0 20px 52px rgba(7,28,45,.14)}
.single-article>figure img{max-height:640px;border-radius:0}
.single-article>figure figcaption{margin:0;padding:10px 14px 12px;background:#fff;text-align:left}
.article-content{font-size:clamp(16px,1.7vw,18px);line-height:1.9;color:#304550}
.article-content p:first-child::first-letter{float:left;margin:8px 9px 0 0;color:#c72027;font-size:3.25em;font-weight:800;line-height:.75}
.article-content h2{margin:48px 0 18px;color:#071c2d;font-size:clamp(27px,3vw,38px);line-height:1.22}
.article-content h3{margin:34px 0 14px;color:#071c2d;font-size:23px}
.article-content a{color:#a91319;text-decoration:underline;text-underline-offset:3px}
.article-gallery{padding-top:48px;border-top:1px solid #dde5e9}
.article-gallery-grid{gap:22px}
.single-article .article-gallery figure{overflow:hidden;border:1px solid #dce4e9;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(7,28,45,.08)}
.single-article .article-gallery img{border-radius:0;transition:transform .35s ease}
.single-article .article-gallery img[alt^="Jan Rulewski, fundator"]{object-position:center 28%}
.single-article .article-gallery figure:hover img{transform:scale(1.025)}
.single-article .article-gallery figcaption{margin:0;padding:10px 13px 13px}
@media(max-width:650px){
  .single-article{padding-top:48px;padding-bottom:76px}
  .article-header h1{font-size:clamp(35px,10vw,47px)}
  .article-content p:first-child::first-letter{float:none;margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
  .single-article>figure{border-radius:14px}
}