/* Гражданская оборона — любительская страница. Один файл, шрифты системные, картинок извне нет. */
:root{
  --paper:#e9e4d7;
  --paper-2:#f2eee3;
  --ink:#171412;
  --ink-soft:#3b3530;
  --red:#a81f16;
  --olive:#5c5a3c;
  --rule:#c6bfae;
  --sans:"Haettenschweiler","Arial Narrow Bold","Impact","Franklin Gothic Medium",sans-serif;
  --body:Georgia,"Times New Roman",serif;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font:17px/1.62 var(--body);
  background-image:
    repeating-linear-gradient(0deg,rgba(23,20,18,.045) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(168,31,22,.05) 0 1px,transparent 1px 90px);
  animation:grain 26s linear infinite;
}
@keyframes grain{from{background-position:0 0,0 0}to{background-position:0 12px,90px 0}}
@media (prefers-reduced-motion:reduce){body{animation:none}}
.wrap{max-width:820px;margin:0 auto;padding:0 22px 60px}

/* шапка */
.mast{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:14px 0 10px;border-bottom:3px solid var(--ink)}
.mast a{color:var(--ink);text-decoration:letter-spacing:.14em;font:700 13px/1 var(--mono);text-transform:uppercase}
.mast a:hover{color:var(--red)}
.mast .who{margin-left:auto;color:var(--olive);font:12px/1.4 var(--mono)}

/* первый экран: одна композиция */
.hero{padding:34px 0 26px;position:relative}
.hero h1{
  margin:0;font:400 clamp(38px,9vw,86px)/0.86 var(--sans);
  letter-spacing:.01em;text-transform:uppercase;
}
.hero h1 .l2{display:block;color:var(--red)}
.stamp{
  display:inline-block;margin-top:16px;padding:4px 12px;border:2px solid var(--red);color:var(--red);
  font:700 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;transform:rotate(-1.6deg);
}
.hero p.lede{margin:20px 0 0;max-width:34em;color:var(--ink-soft)}
.art{display:block;width:min(100%,420px);height:auto;margin:26px 0 0}
@media (min-width:860px){.hero-split{display:grid;grid-template-columns:1fr 420px;gap:34px;align-items:start}
  .art{margin:6px 0 0}}

/* навигация по разделам: не карточки, а оглавление самиздата */
.toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin:30px 0}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.toc li{display:grid;grid-template-columns:2.6em 1fr;gap:6px;align-items:baseline}
.toc .n{font:700 13px/1.5 var(--mono);color:var(--red)}
.toc a{font:400 26px/1.1 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-decoration:none;position:relative}
.toc a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:6px;background:rgba(168,31,22,.35);transition:width .22s ease-out}
.toc a:hover::after,.toc a:focus-visible::after{width:100%}
.toc .d{grid-column:2;color:var(--ink-soft);font-size:15px}

/* текст страницы */
h2{margin:34px 0 6px;font:400 clamp(24px,4.6vw,34px)/1 var(--sans);letter-spacing:.02em;text-transform:uppercase}
h3{margin:22px 0 4px;font:700 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
p{margin:0 0 14px}
p.note{color:var(--ink-soft)}
blockquote{margin:24px 0;padding:10px 0 10px 18px;border-left:4px solid var(--red);font:400 21px/1.4 var(--sans);letter-spacing:.01em}
blockquote cite{display:block;margin-top:6px;font:400 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--olive);font-style:normal}
ul.plain{list-style:none;margin:0 0 14px;padding:0}
ul.plain li{padding:5px 0;border-bottom:1px dotted var(--rule)}

/* таблица записей */
table{border-collapse:collapse;width:100%;margin:8px 0 18px;font-size:16px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:700 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
td.y{font:700 14px/1.5 var(--mono);white-space:nowrap;color:var(--red)}

/* сноска и подвал */
footer{margin-top:44px;padding-top:14px;border-top:3px solid var(--ink);color:var(--ink-soft);font-size:14px}
footer .cols{display:grid;gap:10px}
@media (min-width:700px){footer .cols{grid-template-columns:1fr 1fr}}
a{color:var(--red)}
a:hover{text-decoration-thickness:2px}
.kicker{font:700 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.err{font:400 clamp(60px,16vw,150px)/0.9 var(--sans);color:var(--red);margin:30px 0 10px}