* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #ECD196 url("/images/background.jpg");
  color: #000;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.5;
}
img { border: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header: coat of arms | title + menu | language + socials */
.site-header {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  max-width: 1100px; margin: 0 auto; padding: .5rem 1rem;
}
.site-header__main { flex: 1; min-width: 0; text-align: center; }
.site-title img { max-width: 100%; height: auto; }
.site-nav ul {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem;
}
.site-nav img { display: block; }
.site-nav a[aria-current="page"] img { filter: brightness(.75); }
.site-header__side { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.site-header__side img { display: block; width: 100px; height: auto; }
.lang-switch { font-size: .95rem; }

/* Content column with the decorative right border */
.page { display: flex; max-width: 1100px; margin: 0 auto; }
.page main { flex: 1; min-width: 0; padding: 0 1rem; }
.page__border { flex: 0 0 100px; background: url("/images/right.gif") repeat-y; }
main img, main iframe, main video, main table { max-width: 100%; }
main img { height: auto; }
main iframe[src*="youtube"] { aspect-ratio: 16 / 9; height: auto; }
main { overflow-wrap: anywhere; }
.illustration { text-align: center; margin: .5rem 0 1rem; }
hr.divider {
  border: 0; height: 46px; margin: 1.5rem 0;
  background: url("/images/zatichka.jpg") center / 150px 46px no-repeat;
}

/* About page: band members */
.member { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.member img { flex: 0 1 400px; min-width: 0; }
.member p { flex: 1 1 250px; margin: 0; }

/* Videos */
.video-list { list-style: none; margin: 0; padding: 0; text-align: center; }
.video-list li { margin: 0 0 2rem; }
.video-frame { aspect-ratio: 16 / 9; max-width: 560px; margin: 0 auto .5rem; }
main .video-frame iframe { width: 100%; height: 100%; border: 0; }

/* Gallery */
.lg-album { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 2rem; }
.lg-album img { display: block; }
.album-title { text-align: center; }
.kb-lg.lg-outer .lg-inner { background-image: url("/images/background.jpg"); }

/* News */
.news-item__title { margin: 0 0 .25rem; font-size: 1.3rem; }
.news-item__date { margin: 0 0 .75rem; font-weight: bold; }
.pager { text-align: center; font-size: 1.6rem; margin: 2rem 0 1rem; }
.pager a, .pager span { margin: 0 .35rem; }
.img-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.img-row img { flex: 0 1 auto; min-width: 0; }

.site-footer { text-align: center; padding: 1rem; }
.site-footer img { max-width: 100%; height: auto; }
.credits { max-width: 1100px; margin: 0 auto; text-align: right; font-size: .85rem; font-style: italic; }

.chooser { text-align: center; padding: 2rem 1rem; }
.chooser img { max-width: 100%; height: auto; }

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .site-header { flex-direction: column; gap: .5rem; }
  .site-header__gerb img { width: 60px; height: auto; }
  .site-header__side { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .site-header__side img { width: 80px; }
  .page__border { display: none; }
}