/* Articles v3 — Variant 3 «Тёплый лес»: музейный журнал */
.screen-articles{padding-left:16px;padding-right:16px;padding-bottom:34px}
.screen-articles .section-header{margin-bottom:16px}
.screen-articles .section-header h1{font-size:35px;letter-spacing:-.03em}
.screen-articles .search-box{height:52px;border-radius:17px;padding:0 14px;background:#fbf7ee;box-shadow:0 6px 18px rgba(45,58,47,.05)}
.screen-articles .search-box input{font-size:15px}

.articles-overview{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:14px 1px 4px}
.articles-overview-copy{min-width:0}
.articles-overview-copy strong{display:block;font:600 20px/1.1 Georgia,"Times New Roman",serif;color:#304338}
.articles-overview-copy small{display:block;margin-top:4px;color:#747b72;font-size:12px;line-height:1.35}
.articles-overview-badge{flex:0 0 auto;min-height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid #d5cbb9;border-radius:999px;background:#f5ede0;color:#6d745f;font-size:10.5px;font-weight:850;white-space:nowrap}
.articles-overview-badge .v3-svg-icon{width:15px;height:15px}

/* Категории — крупная горизонтальная лента */
.screen-articles .article-chips{gap:8px;margin:13px -16px 16px;padding:0 16px 4px;scroll-snap-type:x proximity}
.screen-articles .article-chips button{height:40px;padding:0 14px;border-radius:14px;font-size:12.5px;scroll-snap-align:start;background:#f4ede1;border-color:#d7cebd;color:#5f6e61}
.screen-articles .article-chips button.is-active{background:#dfe7d8;border-color:#aebba7;color:#304b39;box-shadow:0 4px 12px rgba(54,81,63,.06)}

.screen-articles .article-list{display:grid;gap:13px}

/* Обычная карточка */
.screen-articles .article-card{position:relative;display:grid;grid-template-columns:124px minmax(0,1fr);min-height:154px;border-radius:22px;border:1px solid #d7cfbf;background:#fbf7ee;box-shadow:0 7px 18px rgba(45,58,47,.055);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.screen-articles .article-card:active{transform:scale(.992)}
.screen-articles .article-media{min-height:154px;background:#dce4d9}
.screen-articles .article-media img{width:100%;height:100%;object-fit:cover}
.screen-articles .article-copy{display:flex;flex-direction:column;min-width:0;padding:14px 13px}
.screen-articles .article-copy>span:first-child{font-size:10.5px;line-height:1.2;letter-spacing:.075em;color:#758070}
.screen-articles .article-copy h3{font-size:19px;line-height:1.1;margin:5px 0 7px;color:#2f4336}
.screen-articles .article-copy p{font-size:13px;line-height:1.43;color:#687168;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:10px;color:#718071;font-size:10.5px;line-height:1.25}
.article-card-meta span{display:inline-flex!important;align-items:center;gap:4px;text-transform:none!important;letter-spacing:0!important;font-size:10.5px!important;font-weight:700!important;color:inherit!important}
.article-card-meta .v3-svg-icon{width:13px;height:13px}
.article-card-meta .archive-tag{padding:4px 6px;border-radius:999px;background:#ece5d8;color:#7a694e!important}

/* Первый материал — обложка текущей выборки */
.screen-articles .article-card:first-child{display:block;min-height:0;border-radius:25px;background:#f7f1e6}
.screen-articles .article-card:first-child .article-media{display:block;height:228px;min-height:228px;position:relative}
.screen-articles .article-card:first-child .article-media::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(32,48,37,.18))}
.screen-articles .article-card:first-child .article-copy{padding:17px 17px 18px}
.screen-articles .article-card:first-child .article-copy>span:first-child{font-size:10.5px}
.screen-articles .article-card:first-child .article-copy h3{font-size:25px;line-height:1.06;margin:6px 0 9px;letter-spacing:-.018em}
.screen-articles .article-card:first-child .article-copy p{font-size:14px;line-height:1.5;-webkit-line-clamp:3}
.screen-articles .article-card:first-child .article-card-meta{padding-top:12px}

/* Reader — спокойная журнальная колонка */
.screen-article{background:linear-gradient(180deg,#faf5eb 0%,#f6efe3 100%)}
.screen-article .reader-top{position:sticky;top:0;z-index:18;background:rgba(248,243,233,.98);border-bottom:1px solid rgba(214,206,189,.55)}
.screen-article #articleBack{min-height:40px;border-radius:12px}
.screen-article #articleFavorite,.screen-article [data-open-menu]{width:40px;height:40px;border-radius:50%}
.screen-article .reader-hero{height:min(54svh,470px);min-height:330px}
.screen-article .reader-title{left:20px;right:20px;bottom:23px}
.screen-article .reader-title span{font-size:10.5px}
.screen-article .reader-title h1{max-width:640px;font-size:clamp(31px,8.5vw,42px);line-height:1.01;text-wrap:balance}
.screen-article .reader-body{max-width:700px;margin:0 auto;padding:22px 19px 40px}
.screen-article .reader-meta{padding-bottom:13px;border-bottom:1px solid rgba(214,206,189,.7);margin-bottom:18px}
.screen-article .reader-lead{font-size:18px;line-height:1.56;padding:3px 0 3px 15px;margin:0 0 23px;border-left:3px solid #9dad95}
.screen-article .reader-body p{font-size:17px;line-height:1.72;margin:19px 0;color:#3f493f}
.screen-article .reader-body h2{font-size:25px;line-height:1.14;margin:31px 0 10px}
.screen-article .reader-gallery{grid-template-columns:1fr 1fr;gap:7px;margin:21px -4px}
.screen-article .reader-gallery img{height:145px;border-radius:13px}
.screen-article .reader-gallery img:first-child:nth-last-child(odd){grid-column:1/-1;height:210px}
.screen-article .reader-map-link{margin-top:30px;border-radius:20px;padding:18px;background:#edf0e7}
.screen-article .reader-map-link h3{font-size:20px}
.reader-swipe-note{display:flex;align-items:center;justify-content:center;gap:9px;max-width:520px;margin:27px auto 2px;padding:10px 13px;border-top:1px solid rgba(214,206,189,.65);color:#7b8178;font-size:11px;text-align:center}
.reader-swipe-note .v3-svg-icon{width:15px;height:15px;color:#667b64}

@media(max-width:380px){
  .screen-articles .article-card{grid-template-columns:110px minmax(0,1fr)}
  .screen-articles .article-copy{padding:12px}
  .screen-articles .article-copy h3{font-size:18px}
  .screen-articles .article-copy p{font-size:12.5px;-webkit-line-clamp:3}
  .screen-articles .article-card:first-child .article-media{height:205px;min-height:205px}
  .screen-articles .article-card:first-child .article-copy h3{font-size:23px}
  .screen-article .reader-body p{font-size:16.5px}
  .screen-article .reader-gallery img{height:126px}
}