:root {
  --ink: #1d2327;
  --muted: #6b747b;
  --line: #e7eaec;
  --green: #2f7d5b;
  --green-soft: #eaf5ef;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 17px/1.6 var(--font); }
a { color: var(--green); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 18px; }
.muted { color: var(--muted); }

.top-bar { background: #fff; border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.bar-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.search input { font: .85rem var(--font); padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; width: 210px; background: #fafbfb; }
.brand-row { padding-top: 22px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 2rem; font-weight: 300; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand b { font-weight: 800; color: var(--green); }
.rubriky { border-top: 1px solid var(--line); border-bottom: 2px solid var(--green); }
.rubriky .wrap { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 11px; padding-bottom: 11px; font-size: .92rem; font-weight: 600; }
.rubriky a { color: var(--ink); text-decoration: none; }
.rubriky a:hover { color: var(--green); }

.page { padding-top: 30px; padding-bottom: 60px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
.page.single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.page h1.title { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--green); margin: 0 0 18px; }

.item { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.item:first-of-type { padding-top: 0; }
.item .pic { display: block; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.item .pic img { width: 100%; height: 100%; object-fit: contain; }
.item h2 { margin: 4px 0 8px; font: 700 1.5rem/1.25 var(--serif); }
.item h2 a { color: var(--ink); text-decoration: none; }
.item h2 a:hover { color: var(--green); }
.item p.perex { margin: 0 0 10px; color: #3d464c; }
.tag { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green); text-decoration: none; }
.meta { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.meta .dot::before { content: "·"; margin-right: 8px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 700; flex: none; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }

.more-wrap { text-align: center; padding: 28px 0; }
.more-wrap[hidden] { display: none; }
.btn-more { font: 600 .95rem var(--font); background: #fff; color: var(--green); border: 2px solid var(--green); border-radius: 999px; padding: 10px 28px; cursor: pointer; }
.btn-more:hover { background: var(--green-soft); }
.end { text-align: center; color: var(--muted); padding: 28px 0; font-size: .9rem; }

aside.side section { margin-bottom: 36px; }
aside.side h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--green); }
.pop { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.pop li { counter-increment: p; display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.35; }
.pop li::before { content: counter(p); font: 800 1.2rem var(--serif); color: var(--green); }
.pop a { color: var(--ink); text-decoration: none; font-weight: 600; }
.pop small { display: block; color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .85rem; color: var(--ink); text-decoration: none; }
.chips a:hover { border-color: var(--green); color: var(--green); }
.side-pic { border: 1px solid var(--line); }

.article-head .tag { margin-bottom: 6px; }
.article h1 { font: 800 2.3rem/1.2 var(--serif); margin: 6px 0 12px; letter-spacing: -.01em; }
.article .perex { font-size: 1.2rem; color: #3d464c; margin: 0 0 18px; }
.byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; font-size: .9rem; }
.byline strong { display: block; }
.byline span { color: var(--muted); }
.hero-pic { border: 1px solid var(--line); margin-bottom: 26px; aspect-ratio: 16 / 10; }
.hero-pic img { width: 100%; height: 100%; object-fit: contain; }
.prose { font-size: 1.1rem; line-height: 1.75; font-family: var(--serif); }
.prose h3 { font: 800 1.4rem var(--font); margin: 34px 0 8px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 4px; }
.disclaimer { margin-top: 32px; padding: 14px 18px; background: var(--green-soft); font-size: .88rem; color: #345; }

.comments { margin-top: 44px; }
.comments h2 { font-size: 1.3rem; margin: 0 0 18px; }
.comment { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.comment.reply { margin-left: 52px; }
.comment .avatar { width: 40px; height: 40px; font-size: .9rem; }
.comment .who { font-weight: 700; font-size: .92rem; }
.comment .when { color: var(--muted); font-size: .8rem; margin-left: 8px; font-weight: 400; }
.comment p { margin: 2px 0 6px; font-size: .97rem; }
.comment .acts { font-size: .8rem; color: var(--muted); }
.comments .closed { color: var(--muted); font-size: .9rem; margin-top: 18px; }

.related > h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--green); margin: 44px 0 6px; }

.search-big { display: flex; gap: 8px; max-width: 560px; margin-bottom: 22px; }
.search-big input { flex: 1; font: 1rem var(--font); padding: 10px 14px; border: 1px solid #cfd5d9; border-radius: 6px; }
.search-big button, .btn { font: 600 .95rem var(--font); background: var(--green); color: #fff; border: 0; border-radius: 6px; padding: 10px 20px; cursor: pointer; }

.form-narrow { max-width: 460px; }
label { display: block; font-weight: 600; font-size: .92rem; margin: 14px 0 4px; }
.form-narrow input[type=text], .form-narrow textarea { width: 100%; font: 1rem var(--font); padding: 9px 12px; border: 1px solid #cfd5d9; border-radius: 6px; }
.form-narrow textarea { min-height: 120px; }
.flash.success { background: var(--green-soft); color: var(--green); padding: 10px 14px; border-radius: 6px; }

.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 20px 0 0; }
.team li { display: flex; gap: 12px; align-items: center; font-family: var(--font); font-size: .9rem; line-height: 1.35; }
.team .medal em, .team .medal span:not(.avatar) { color: var(--muted); }

.foot { border-top: 1px solid var(--line); background: #fafbfb; color: var(--muted); font-size: .85rem; padding: 26px 0; }
.foot p { margin: 4px 0; }
.foot a { color: var(--muted); }
.foot-brand { font-size: 1.2rem; font-weight: 300; color: var(--ink); }
.foot-brand b { color: var(--green); }

@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  aside.side { order: 2; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .item { grid-template-columns: 1fr; gap: 12px; }
  .article h1 { font-size: 1.7rem; }
  .bar-row span { display: none; }
  .search { width: 100%; }
  .search input { width: 100%; }
  .brand { font-size: 1.6rem; }
}

.promo { background: #f3faf6; border-bottom: 1px solid var(--line); padding: 14px 0; }
.promo-btn { display: block; text-align: center; text-decoration: none; color: #fff; font: 800 1.45rem/1.25 var(--font); letter-spacing: .01em; padding: 20px 24px; border-radius: 10px; background: linear-gradient(#35a76f, #1f8a55); border: 2px solid #167a48; box-shadow: 0 4px 0 #136b3f, 0 8px 18px rgba(31,138,85,.35); text-shadow: 0 1px 2px rgba(0,0,0,.25); animation: promo-pulse 2.2s ease-in-out infinite; }
.promo-btn:hover { background: linear-gradient(#3cb67b, #229a5f); }
@keyframes promo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .promo-btn { animation: none; } }
@media (max-width: 640px) { .promo-btn { font-size: 1.1rem; padding: 16px 14px; } }

a.by { color: inherit; text-decoration: none; }
a.by:hover { text-decoration: underline; }
.authorhead { align-items: flex-start; gap: 18px; margin-bottom: 8px; }
.authorhead p { margin: 8px 0 0; color: var(--ink); line-height: 1.5; }
.avatar.xl { width: 72px; height: 72px; font-size: 1.6rem; flex: none; }
.sub { font: 800 1.2rem var(--font); margin: 26px 0 6px; }
.share { display: flex; gap: 10px; align-items: center; margin: 22px 0 10px; font: .9rem var(--font); color: var(--muted); flex-wrap: wrap; }
.share a { border: 1px solid var(--line); border-radius: 18px; padding: 5px 14px; color: var(--ink); text-decoration: none; }
.share a:hover { border-color: var(--green); color: var(--green); }
.sponsor { display: block; border: 1px solid var(--line); background: #fafbfb; border-radius: 8px; padding: 14px 16px; margin: 20px 0; text-decoration: none; color: var(--ink); font-family: var(--font); }
.sponsor small { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.sponsor strong { display: block; font-size: 1rem; line-height: 1.3; }
.sponsor span { display: block; margin-top: 6px; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.sponsor:hover strong { color: var(--green); }
.rec { list-style: none; padding: 0; margin: 0; font: .92rem/1.35 var(--font); }
.rec li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.rec a { color: var(--ink); text-decoration: none; }
.rec a:hover { color: var(--green); }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: 14px 20px; display: flex; gap: 16px; align-items: center; justify-content: center; font: .88rem/1.4 var(--font); }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; max-width: 760px; }
.cookie button { background: var(--green); color: #fff; border: 0; border-radius: 6px; padding: 9px 20px; font: 700 .9rem var(--font); cursor: pointer; }
@media (max-width: 640px) { .cookie { flex-direction: column; align-items: stretch; text-align: center; } }
.avatar { color: #fff; }
.authorhead h1.title { text-transform: none; letter-spacing: 0; font: 800 1.6rem var(--font); color: var(--ink); }
.byline span.avatar, .team span.avatar, .meta span.avatar { color: #fff; }
.sponsor:hover strong { color: inherit; }
.medal { background: #fafbfb; border: 1px solid var(--line); border-radius: 10px; padding: 16px; text-align: center; font-family: var(--font); font-size: .9rem; line-height: 1.4; }
.medal .ph { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: top; display: block; margin: 0 auto 10px; }
.medal .avatar { width: 112px; height: 112px; font-size: 2.2rem; margin: 0 auto 10px; display: flex; }
.medal strong { display: block; font-size: 1rem; }
.medal em { display: block; color: var(--muted); font-style: normal; margin: 2px 0 8px; }
.medal p { margin: 0; color: var(--ink); font-size: .85rem; }
.avatar.xl.photo { object-fit: cover; object-position: top; }
.medal .nm { font-weight: 700; font-size: 1rem; }
.medal .rl { color: var(--muted); margin: 2px 0 8px; }