:root{
  --bg:#f4f5f1;
  --surface:#ffffff;
  --surface-soft:#edf3ee;
  --text:#17211b;
  --muted:#6b746e;
  --line:rgba(23,33,27,.10);
  --accent:#12a35a;
  --accent-dark:#08783f;
  --accent-soft:#dff4e7;
  --shadow-sm:0 8px 28px rgba(26,47,34,.07);
  --shadow-lg:0 24px 60px rgba(26,47,34,.14);
  --radius-sm:16px;
  --radius-md:22px;
  --radius-lg:28px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  min-width:320px;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 7% -5%,rgba(18,163,90,.10),transparent 27rem),
    var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  -webkit-text-size-adjust:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before{
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;
  z-index:1200;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
svg{display:block;flex:0 0 auto}
.wrap{width:min(100% - 32px,620px);margin-inline:auto}

.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  padding:10px 0;
  background:rgba(246,247,244,.88);
  border-bottom:1px solid rgba(23,33,27,.07);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-badge{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  color:#fff;
  background:linear-gradient(145deg,#19b868,var(--accent-dark));
  border:1px solid rgba(255,255,255,.48);
  border-radius:13px;
  box-shadow:0 8px 20px rgba(18,163,90,.24),inset 0 1px rgba(255,255,255,.35);
  font-size:20px;
  font-weight:850;
  letter-spacing:-.04em;
}
.brand-copy{display:grid;gap:1px;min-width:0}
.brand-title{font-size:17px;font-weight:850;line-height:1.08;letter-spacing:-.025em;white-space:nowrap}
.brand-title b{color:var(--accent);font-weight:850}
.brand-subtitle{color:var(--muted);font-size:10px;font-weight:650;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
.burger{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  cursor:pointer;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 5px 18px rgba(26,47,34,.06);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  touch-action:manipulation;
}
.burger:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(26,47,34,.10)}
.burger:active{transform:scale(.96)}
.burger svg{width:22px;height:22px}

.nav-panel{
  display:none;
  position:fixed;
  top:72px;
  left:50%;
  width:min(calc(100% - 32px),588px);
  z-index:1100;
  padding:10px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.98);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow-lg);
}
.nav-panel.active{display:grid;animation:menu-in .18s ease-out}
.nav-panel a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:54px;
  padding:0 16px;
  color:var(--text);
  border-radius:14px;
  font-size:16px;
  font-weight:720;
  transition:background .16s ease,color .16s ease;
}
.nav-panel a::after{content:"→";color:#9aa29d;font-size:19px;font-weight:500}
.nav-panel a:hover{color:var(--accent-dark);background:var(--accent-soft)}
.nav-panel a svg{display:none}
@keyframes menu-in{from{opacity:0;transform:translate(-50%,-8px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

.content{position:relative;padding:22px 0 64px}
.hero{padding:0 2px 8px;display:flex;justify-content:center;align-items:center;text-align:center}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:0;
  color:var(--accent-dark);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-kicker::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 0 6px rgba(18,163,90,.11);
}
.hero h1{display:none}
.feed{display:grid;gap:14px}
.article__link{
  position:relative;
  display:grid;
  grid-template-columns:136px minmax(0,1fr);
  min-height:136px;
  overflow:hidden;
  color:var(--text);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(23,33,27,.08);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  content-visibility:auto;
  contain-intrinsic-size:160px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  touch-action:manipulation;
}
.article__link:hover{transform:translateY(-3px);border-color:rgba(18,163,90,.22);box-shadow:0 16px 38px rgba(26,47,34,.11)}
.article__link:active{transform:scale(.992)}
.article__cover{
  width:100%;
  height:100%;
  min-height:136px;
  object-fit:cover;
  background:linear-gradient(145deg,#dfe8e1,#edf1ee);
}
.article__content{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:17px 17px 16px}
.article__content h2{
  display:-webkit-box;
  overflow:hidden;
  color:var(--text);
  font-size:16px;
  font-weight:780;
  line-height:1.28;
  letter-spacing:-.018em;
  text-wrap:pretty;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.time__ago{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  color:#858e88;
  font-size:12px;
  font-weight:620;
}
.time__ago svg{width:14px;height:14px}

.article__link-start{
  display:block;
  min-height:0;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(25,43,31,.14);
  contain-intrinsic-size:600px;
}
.article__link-start::before{
  content:"Выбор редакции";
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  padding:8px 12px;
  color:#fff;
  background:rgba(13,28,19,.74);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:780;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.article__link-start .article__cover{width:100%;height:auto;min-height:0;aspect-ratio:16/9;object-fit:cover}
.article__link-start .article__content{display:block;padding:23px 22px 24px}
.article__link-start .article__content h2{
  display:block;
  overflow:visible;
  color:#142018;
  font-size:clamp(24px,6.5vw,34px);
  font-weight:880;
  line-height:1.09;
  letter-spacing:-.042em;
  -webkit-line-clamp:unset;
}
.article__link-start .article__content p{
  margin-top:14px;
  color:#5f6963;
  font-size:16px;
  line-height:1.55;
}
.article__stat{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin:17px 0 0;
  color:#78827c;
  font-size:12px;
  font-weight:650;
}
.article__stat>div{display:flex;align-items:center;gap:6px}
.article__stat>div svg{width:15px;height:15px}
.article__stat>div:nth-child(2){color:var(--accent-dark)}
.article__stat>div:nth-child(3){color:#7e8781}
.read__more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  min-height:52px;
  margin-top:22px;
  padding:0 18px;
  color:#fff;
  background:linear-gradient(135deg,#18ad62,#0b8848);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(18,163,90,.22);
  font-size:15px;
  font-weight:800;
}
.read__more::after{
  content:"→";
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  color:#fff;
  background:rgba(255,255,255,.15);
  border-radius:50%;
  font-size:17px;
  transition:transform .18s ease;
}
.article__link-start:hover .read__more::after{transform:translateX(3px)}

.feed-sentinel{height:1px}
.feed-sentinel[hidden]{display:none}

.overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:2000;
  align-items:flex-end;
  padding:18px;
  overflow-y:auto;
  background:rgba(11,22,15,.58);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.overlay.active{display:flex;animation:overlay-in .18s ease-out}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;
  width:min(100%,620px);
  max-height:calc(100dvh - 36px);
  margin:auto;
  padding:26px 18px 18px;
  overflow:auto;
  background:#f8faf8;
  border:1px solid rgba(255,255,255,.55);
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.26);
}
.modal h1{
  padding:0 44px 20px 4px;
  font-size:27px;
  font-weight:860;
  line-height:1.1;
  letter-spacing:-.035em;
}
.modal-close{
  position:absolute;
  top:17px;
  right:17px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  cursor:pointer;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 5px 18px rgba(26,47,34,.08);
  touch-action:manipulation;
}
.modal-close svg{width:19px;height:19px}
.modal-list{display:grid;gap:12px}
.modal .article__link{
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  min-height:116px;
  border-radius:18px;
  box-shadow:none;
}
.modal .article__cover{position:static;width:100%;height:100%;min-height:116px;object-fit:cover}
.modal .article__content{position:relative;z-index:1;padding:14px}
.modal .article__content h2{color:var(--text);font-size:15px;-webkit-line-clamp:3}
.modal .article__link::after{display:none}
.modal .article__stat{display:none}

@media(max-width:480px){
  .wrap{width:min(100% - 24px,620px)}
  .topbar{padding:8px 0}
  .brand-badge{width:38px;height:38px;flex-basis:38px;border-radius:12px}
  .brand-title{font-size:16px}
  .brand-subtitle{font-size:9px}
  .burger{width:42px;height:42px;flex-basis:42px}
  .nav-panel{top:66px;width:calc(100% - 24px)}
  .content{padding-top:23px}
  .hero{padding:0 2px 12px;display:flex;justify-content:center;align-items:center;text-align:center}
  .hero p{font-size:15px}
  .feed{gap:11px}
  .article__link{grid-template-columns:116px minmax(0,1fr);min-height:116px;border-radius:18px}
  .article__cover{min-height:116px}
  .article__content{padding:14px 14px 13px}
  .article__content h2{font-size:15px}
  .article__link-start{display:block;border-radius:24px}
  .article__link-start .article__content{padding:20px 18px 20px}
  .article__link-start .article__content h2{font-size:clamp(23px,7vw,30px)}
  .article__link-start .article__content p{font-size:15px}
  .article__stat{gap:7px 12px}
  .read__more{min-height:50px;margin-top:19px;border-radius:15px}
  .overlay{padding:10px}
  .modal{max-height:calc(100dvh - 20px);padding:24px 12px 12px;border-radius:24px}
  .modal h1{padding-left:4px;font-size:25px}
  .modal .article__link{grid-template-columns:104px minmax(0,1fr);min-height:104px}
  .modal .article__cover{min-height:104px}
}
@media(max-width:370px){
  .brand-subtitle{display:none}
  .article__link{grid-template-columns:104px minmax(0,1fr)}
  .article__content h2{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}