/* Тема «Витрина»: схема сайта 2002 года — серая колонка меню, красная полоса,
   содержание в рамке со скруглением, зебра-список, курсивные заголовки по
   правому краю. Шрифты системные: сторонних запросов у архива нет. */
:root{--ink:#133038;--muted:#5b6b70;--line:#333;--rail:#cccccc;--zebra:#d2d2d2;
      --red:#c40308;--link:#2e16b4;--hover:#d21515;--pill:#1a4848}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.55 Arial,Helvetica,sans-serif}
a{color:var(--link)}a:hover{color:var(--hover)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;border:2px solid var(--line);padding:8px;z-index:9}

/* шапка */
header.site .masthead{max-width:980px;margin:0 auto;padding:18px 24px 10px;
  display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
header.site .masthead img{height:76px;width:auto}
header.site .masthead small{color:var(--ink);font-size:14px;padding-bottom:7px}
header.site .rule{background:var(--red)}
header.site .rule span{display:block;max-width:980px;margin:0 auto;padding:6px 24px;
  text-align:right;color:#fff;font-size:13px;font-weight:bold;letter-spacing:.42em}

/* колонка меню + содержание */
.page{max-width:980px;margin:0 auto;display:flex;align-items:stretch}
nav.rail{width:196px;flex-shrink:0;background:var(--rail);padding:22px 14px 40px 0;
  border-right:2px solid var(--line)}
nav.rail a{display:block;text-align:right;padding:4px 0;margin-bottom:2px;
  font-size:17px;font-weight:bold;color:var(--ink);text-decoration:none}
nav.rail a:hover{color:#797979}
nav.rail a.on{background:#fff;border:2px solid var(--pill);border-radius:16px;
  margin:0 -16px 4px 10px;padding:4px 16px 4px 0;color:var(--ink)}
main{flex-grow:1;min-width:0;padding:18px 24px 34px 28px}

h1{font-size:18px;font-style:italic;font-weight:bold;text-align:right;
   margin:0 0 10px;line-height:1.3;color:var(--ink)}
h1 a{text-decoration:none}
.panel{border:2px solid var(--line);border-radius:12px;padding:14px 18px 18px}

/* содержание страниц 2002 года */
div.title{font-style:italic;font-weight:bold;text-align:right;margin:16px 0 4px;
  font-size:15px;color:var(--ink);text-indent:0}
div{text-indent:0;text-align:left}
div.normal,div.addition{text-indent:0}
div.products{text-align:center}
div.products a{font-weight:bold;text-decoration:none}
div.products a:hover{text-decoration:underline}
td.products{background:var(--zebra)}
/* во всю ширину — только список изданий; остальные таблицы 2002 года
   держат распорки и от 100% разъезжаются */
main table:has(div.products){width:100%}
td.products,td:has(>div.products){padding:3px 12px}
div.products{line-height:1.7}
hr{border:0;border-top:1px solid var(--ink);margin:6px 0}
td[bgcolor="#333333"],td[bgcolor="#333333" i]{display:none}
/* цветные врезки 2002 года получают скругление, которое тогда рисовали уголками */
main td[bgcolor]{border-radius:8px;padding:14px 18px}
table{border-collapse:collapse;max-width:100%}
table[width],td[width],th[width]{width:auto}
td,th{vertical-align:top;padding:2px 4px}
img{max-width:100%;height:auto}
img[align=left]{float:left;margin:0 12px 8px 0}
img[align=right]{float:right;margin:0 0 8px 12px}
.screens td{display:inline-block;padding:6px}

/* витрина изданий */
.catalogue .title{margin:22px 0 4px}
.catalogue .title:first-child{margin-top:2px}
.catalogue .count{font-style:normal;font-weight:normal;color:var(--muted);font-size:13px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:18px 14px;margin:14px 0 4px}
a.ed{display:block;text-decoration:none;color:var(--ink)}
a.ed .box{display:flex;align-items:flex-end;justify-content:center;height:186px;
  background:var(--rail);border:1px solid #b4b4b4;overflow:hidden}
a.ed img{display:block;max-height:186px;width:auto}
a.ed .nocover{align-self:center;color:#8a8a8a;font-size:12px;font-style:italic}
a.ed b{display:block;margin:7px 0 1px;font-size:14px;line-height:1.25;color:var(--link)}
a.ed small{display:block;font-size:11px;color:var(--muted)}
a.ed:hover .box{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
a.ed:hover b{color:var(--hover);text-decoration:underline}

footer.site{border-top:2px solid var(--line);max-width:980px;margin:0 auto;
  padding:12px 24px 26px;color:var(--muted);font-size:12px;text-align:center}
footer.site a{color:var(--ink)}

/* главная */
.home main{padding-top:26px}
.home .lead{font-size:18px;max-width:660px;margin:0 0 18px;line-height:1.5}
.home .title{margin:0 0 4px}
.home .shelf{margin:14px 0 10px}
.home .shelf.plain a.ed small{display:none}
.home .more{margin:0 0 6px;font-size:14px}
.home .more a{font-weight:bold;text-decoration:none}
.home .more a:hover{text-decoration:underline}
.home .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin:24px 0}
.home .cards a{display:block;padding:16px;border:1.5px solid var(--line);border-radius:10px;
  text-decoration:none;color:var(--ink);background:#fff}
.home .cards a b{display:block;font-size:18px;margin-bottom:4px}
.home .cards a:hover{background:var(--rail)}
.contacts dt{font-weight:bold;font-style:italic;margin-top:14px}
.contacts dd{margin:2px 0 0}

@media (max-width:820px){
  body{font-size:15px}
  header.site .masthead{padding:16px 16px 10px;gap:14px}
  header.site .masthead img{height:62px}
  header.site .rule span{padding:5px 16px;letter-spacing:.3em}
  .page{display:block}
  nav.rail{width:auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:0 16px;
    border-right:0;border-bottom:2px solid var(--line)}
  nav.rail a{text-align:left;font-size:15px;padding:3px 0;margin:0}
  nav.rail a.on{background:none;border:0;border-radius:0;margin:0;padding:3px 0;color:var(--red)}
  main{padding:16px}
  .shelf{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:14px 10px}
  a.ed .box{height:158px}
  a.ed img{max-height:158px}
  h1{text-align:left;font-size:17px}
  .panel{padding:12px 12px 16px;border-radius:10px}
  footer.site{padding:10px 16px 20px}
  table,tbody,tr,td{display:block;width:auto!important}
  td[rowspan],td[colspan]{display:block}
  table.keep,table.keep tbody,table.keep tr,table.keep td{display:revert}
  img[align=left],img[align=right]{float:none;display:block;margin:0 auto 10px}
}