/* Stable topic hero layout: keep all title content below the fixed header. */
.cosy-topic-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:310px;padding:0;color:#fff;background:#25272c}
.cosy-topic-hero:before{position:absolute;inset:-45px;content:"";background-image:var(--topic-image);background-position:center;background-size:cover;filter:blur(22px) saturate(1.05);opacity:.62}
.cosy-topic-hero:after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,rgba(20,22,27,.7),rgba(20,22,27,.38))}
.cosy-topic-hero .cosy-container{position:relative;z-index:1;padding-top:44px;padding-bottom:42px}
.cosy-topic-hero a{display:inline-flex;font-size:12px}
.cosy-topic-hero em{display:block;margin-top:24px;color:#d7d4ff;font-size:11px;font-style:normal;letter-spacing:.12em}
.cosy-topic-hero h1{max-width:850px;margin:8px 0;font-size:32px;line-height:1.35}
.cosy-topic-hero p{max-width:700px;margin:0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.7}
.cosy-topic-hero footer{display:flex;gap:18px;margin-top:18px;font-size:11px}

/* Topic body and article-card type scale. */
.cosy-topic-content{width:min(1480px,calc(100% - 56px));padding-top:44px}
.cosy-topic-intro{max-width:980px;margin-bottom:38px;padding:30px 34px;font-size:16px;line-height:1.9;box-shadow:var(--c-shadow)}
.cosy-topic-chapter{margin-top:46px}
.cosy-topic-chapter>header{margin-bottom:19px}
.cosy-topic-chapter h2{margin:4px 0;font-size:23px}
.cosy-topic-chapter header p{font-size:14px}
.cosy-list-card h2{min-height:52px;margin-bottom:9px;font-size:19px;line-height:1.38}
.cosy-list-card-body>p{min-height:46px;font-size:13px;line-height:1.75}
.cosy-related-grid .cosy-list-cover{height:185px}
.cosy-related-grid .cosy-list-card h2{font-size:18px}
.cosy-related-grid .cosy-list-card-body>p{font-size:13px}
.cosy-topic-chapter .cosy-related-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

@media(max-width:700px){
  .cosy-topic-hero{min-height:260px}
  .cosy-topic-hero .cosy-container{padding-top:35px;padding-bottom:32px}
  .cosy-topic-hero h1{font-size:26px}
  .cosy-topic-intro{padding:23px 20px;font-size:15px}
  .cosy-topic-chapter h2{font-size:21px}
  .cosy-topic-chapter .cosy-related-grid{grid-template-columns:1fr}
}

@media(min-width:701px) and (max-width:1100px){.cosy-topic-chapter .cosy-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}