/* ============================================================================
   LL2WOT — вариант «Пергамент»
   Тёплая бумага, тёмные чернила, бордовый акцент, засечный шрифт.
   ============================================================================ */

:root {
    --paper: #f2ebdc;
    --paper-soft: #ebe2cf;
    --paper-card: #f8f2e6;
    --ink: #2a231a;
    --ink-soft: #55483a;
    --ink-mute: #8a7a63;
    --red: #6f1b1b;
    --red-bright: #a02b2b;
    --gold: #a8863f;
    --line: rgba(90, 70, 45, .22);
    --line-soft: rgba(90, 70, 45, .12);
}

* { box-sizing: border-box; }

html { background: #e8dfcc; }

body {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--ink);
    font: 14.5px/1.7 Georgia, 'Times New Roman', serif;
    background-color: var(--paper);
    background-image:
        radial-gradient(rgba(120, 95, 55, .06) 1px, transparent 1px);
    background-size: 22px 22px;
    overflow-x: hidden;
}

/* фон-арт: виден сверху и по краям, растворяется в бумаге */
body:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 780px;
    background: url('/assets/images/bg.jpg') center top / cover no-repeat;
    opacity: .68;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 45%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 45%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.bar,
.wrap,
.site-footer {
    position: relative;
    z-index: 1;
}

::selection { background: rgba(160, 43, 43, .2); color: #2a231a; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e4dac6; }
::-webkit-scrollbar-thumb { background: #c6b69a; border: 2px solid #e4dac6; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

a { color: var(--red); text-decoration: none; transition: color .15s; }
a:hover { color: var(--red-bright); }

/* ---------- шапка ---------- */

.bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(242, 235, 220, .97);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.bar-inner {
    max-width: 1220px;
    height: 64px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.bar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    flex: 0 0 auto;
}

.bar-logo:hover { color: var(--ink); }

.logo-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: var(--red);
    color: #f6ecd8;
    font: 700 12px/1 'Cinzel', serif;
    letter-spacing: .5px;
}

.logo-text {
    font: 600 13.5px/1 'Cinzel', serif;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}

.logo-text small {
    display: block;
    margin-top: 4px;
    font: 400 8.5px/1 Georgia, serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.bar-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

.bar-nav a {
    font: 400 10.5px/1 Georgia, serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.bar-nav a:hover { color: var(--red); }

.bar-enter {
    flex: 0 0 auto;
    padding: 10px 18px;
    background: var(--red);
    color: #f6ecd8;
    font: 400 10.5px/1 Georgia, serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid var(--red);
    transition: background .15s;
}

.bar-enter:hover { background: var(--red-bright); color: #fff8e9; }

.l2top { transition: opacity .2s; }
.l2top:hover { opacity: 1; }

/* ---------- сетка ---------- */

.wrap {
    max-width: 1220px;
    margin: 0 auto;
    padding: 240px 20px 0;
}

.cols {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

/* ---------- колонка ---------- */

.rail {
    padding: 18px 16px 20px;
    border: 1px solid var(--line);
    background: rgba(248, 242, 230, .6);
}

.rail-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line-soft);
}

.rail-status .dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-mute);
}

.rail-status.on .dot { background: #3f7f4a; box-shadow: 0 0 6px rgba(63, 127, 74, .5); }
.rail-status.off .dot { background: var(--red); }

.rail-status b {
    display: block;
    font: 600 10px/1.3 Georgia, serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink);
}

.rail-status span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--ink-mute);
}

.rail .menu {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.rail .menu-title { display: none; }

.rail .menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rail .menu-button {
    position: relative;
    padding: 8px 10px 8px 12px;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    font: 400 13.5px/1.4 Georgia, serif;
    gap: 9px;
}

.rail .menu-button i {
    width: 14px;
    font-size: 11px;
    color: rgba(111, 27, 27, .45);
}

.rail .menu-button:hover { background: rgba(111, 27, 27, .06); color: var(--red); }

.rail .menu-button.active {
    background: rgba(111, 27, 27, .08);
    color: var(--red);
    font-weight: 700;
    box-shadow: none;
}

.rail .menu-button.active:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--red);
}

.rail .menu-button.active i { color: var(--red); }

.rail .menu-foot {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.rail .menu-cabinet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--red);
    color: var(--red);
    font: 400 9.5px/1.2 Georgia, serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.rail .menu-cabinet:hover { background: rgba(111, 27, 27, .08); }

/* ---------- лист ---------- */

.sheet {
    position: relative;
    min-width: 0;
    padding: 34px 38px 40px;
    background: rgba(248, 242, 230, .94);
    border: 1px solid var(--line);
    background: rgba(248, 242, 230, .9);
    box-shadow: 0 18px 44px rgba(90, 70, 45, .12);
}

/* ---------- типографика ---------- */

h1,
.sheet .content-title {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: .2px;
    color: var(--ink);
}

.sheet .content-title:before,
.sheet .content-title:after { content: none; }

.sheet .fire-text { animation: none; text-shadow: none; }
.sheet .title-decor { display: none; }

.sheet h1 + .welcome-block,
.sheet .content-title + .welcome-block { margin-top: 18px; }

h2 {
    margin: 0;
    font: 600 12px/1.35 Georgia, serif;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ink-mute);
}

h3 {
    margin: 0 0 3px;
    font: 700 14.5px/1.35 Georgia, serif;
    color: var(--ink);
}

h4 {
    margin: 0 0 6px;
    font: 400 9.5px/1.3 Georgia, serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.sheet p {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.78;
    color: var(--ink-soft);
}

.sheet p:last-child { margin-bottom: 0; }

strong, b { color: var(--ink); }

.sheet code {
    padding: 1px 6px;
    background: rgba(111, 27, 27, .07);
    color: var(--red);
    font-family: Consolas, monospace;
    font-size: .92em;
}

.highlight, .highlight-gold, .rule-highlight, .warning-highlight { color: var(--red); }
.highlight-red { color: var(--red-bright); }

/* ---------- секции ---------- */

.sheet .features-block,
.sheet .instruction-block,
.sheet .download-block,
.sheet .rules-block,
.sheet .punishment-block,
.sheet .important-block,
.sheet .security-block,
.sheet .info-block,
.sheet .rates-block,
.sheet .c4-features-block,
.sheet .professions-block,
.sheet .functions-block,
.sheet .warning-block,
.sheet .warning-alert {
    margin: 30px 0 0;
    padding: 0;
}

.sheet .section-title,
.sheet .rules-header,
.sheet .punishment-header,
.sheet .important-header,
.sheet .security-header,
.sheet .info-header,
.sheet .rates-header,
.sheet .c4-header,
.sheet .professions-header,
.sheet .functions-header,
.sheet .instruction-header,
.sheet .download-header,
.sheet .additional-header,
.sheet .warning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0 0 9px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
}

.sheet .section-title:before,
.sheet .rules-header:before,
.sheet .punishment-header:before,
.sheet .important-header:before,
.sheet .security-header:before,
.sheet .info-header:before,
.sheet .rates-header:before,
.sheet .c4-header:before,
.sheet .instruction-header:before,
.sheet .download-header:before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 1px;
    margin-right: 4px;
    background: var(--red);
}

.sheet .section-title h2,
.sheet .rules-header h2,
.sheet .punishment-header h2,
.sheet .important-header h2,
.sheet .security-header h2,
.sheet .info-header h2,
.sheet .rates-header h2,
.sheet .c4-header h2,
.sheet .professions-header h2,
.sheet .functions-header h2,
.sheet .instruction-header h2,
.sheet .download-header h2,
.sheet .additional-header h2,
.sheet .warning-header h2 {
    font: 400 10px/1.4 Georgia, serif;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.sheet .section-title {
    font: 400 10px/1.4 Georgia, serif;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.sheet .section-icon { display: none; }

.sheet .section-icon,
.sheet .rules-icon,
.sheet .punishment-icon,
.sheet .important-icon,
.sheet .security-icon,
.sheet .info-icon,
.sheet .rates-icon,
.sheet .c4-icon,
.sheet .professions-icon,
.sheet .functions-icon,
.sheet .instruction-icon,
.sheet .download-icon,
.sheet .additional-icon,
.sheet .warning-icon,
.sheet .title-icon,
.sheet .label-icon,
.sheet .note-icon,
.sheet .badge-icon,
.sheet .size-icon,
.sheet .item-icon,
.sheet .shield-icon {
    font-size: 11px;
    line-height: 1;
    color: var(--red);
    opacity: .7;
}

/* ---------- строки ---------- */

.sheet .feature-item,
.sheet .rule-item,
.sheet .step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
}

.sheet .feature-item:last-child,
.sheet .rule-item:last-child,
.sheet .step:last-child { border-bottom: 0; }

.sheet .feature-emoji {
    flex: 0 0 18px;
    width: 18px;
    margin: 1px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--red);
    opacity: .75;
}

.sheet .feature-text h3 { font-size: 14.5px; }

.sheet .feature-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink-mute);
}

.sheet .rule-number {
    flex: 0 0 26px;
    min-width: 26px;
    font: 700 12px/1.9 Georgia, serif;
    color: var(--red);
}

.sheet .rule-text {
    font-size: 14px;
    line-height: 1.72;
    color: var(--ink-soft);
}

.sheet .step-number {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    display: grid;
    place-items: center;
    font: 700 11px/1 Georgia, serif;
    color: var(--red);
    border: 1px solid rgba(111, 27, 27, .35);
}

.sheet .step-content h3 { font-size: 13.5px; }

.sheet .step-content p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-mute);
}

/* ---------- пары и сетки ---------- */

.sheet .info-grid,
.sheet .rates-grid,
.sheet .c4-features,
.sheet .important-points,
.sheet .functions-grid,
.sheet .patches-grid,
.sheet .mods-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

.sheet .info-item,
.sheet .detail-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
}

.sheet .info-label,
.sheet .detail-label,
.sheet .detail-icon {
    font-size: 12.5px;
    color: var(--ink-mute);
}

.sheet .info-value,
.sheet .detail-value {
    font-size: 13.5px;
    color: var(--ink);
    text-align: right;
}

.sheet .detail-item .detail-label { flex: 0 0 auto; }
.sheet .detail-item .detail-value { margin-left: auto; }

.sheet .rate-card {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
}

.sheet .rate-icon { font-size: 11px; opacity: .6; }

.sheet .rate-title {
    flex: 0 0 96px;
    font: 400 9.5px/1.6 Georgia, serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.sheet .rate-value { font-size: 14px; color: var(--red); }
.sheet .rate-sub { display: block; font-size: 11px; color: var(--ink-mute); }

.sheet .function-card,
.sheet .c4-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
}

.sheet .function-icon,
.sheet .c4-feature-icon {
    flex: 0 0 14px;
    font-size: 11px;
    color: var(--red);
    opacity: .7;
}

.sheet .function-text { font-size: 13px; color: var(--ink-soft); }

.sheet .c4-feature-text h3 { font-size: 13.5px; margin: 0 0 2px; }

.sheet .c4-feature-text p {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-mute);
}

/* ---------- быстрые факты: бордовая лента ---------- */

.sheet .quick-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 24px 0 4px;
    padding: 18px 0;
    background: var(--red);
    border: 0;
}

.sheet .quick-facts .fact {
    padding: 0 20px;
    border: 0;
    border-left: 1px solid rgba(246, 236, 216, .18);
}

.sheet .quick-facts .fact:first-child { border-left: 0; }

.sheet .quick-facts b {
    display: block;
    margin-bottom: 3px;
    font: 600 25px/1.1 'Cinzel', serif;
    color: #f6ecd8;
}

.sheet .quick-facts span {
    display: block;
    font: 400 9px/1.4 Georgia, serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(246, 236, 216, .75);
}

.sheet .quick-facts b.mc-status.on { color: #a9e3b4; }
.sheet .quick-facts b.mc-status.off { color: #ffc0b4; }

/* ---------- предупреждения ---------- */

.sheet .warning-alert,
.sheet .warning-block {
    padding: 14px 16px;
    border: 0;
    border-left: 3px solid var(--red);
    background: rgba(111, 27, 27, .05);
}

.sheet .warning-header { margin-bottom: 6px; border: 0; padding: 0; }

.sheet .warning-header h2 {
    font: 600 10.5px/1.4 Georgia, serif;
    letter-spacing: 2px;
    color: var(--red);
}

.sheet .warning-header .warning-icon:nth-of-type(2) { display: none; }

.sheet .warning-text,
.sheet .warning-content {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.sheet .note,
.sheet .rules-note,
.sheet .punishment-note,
.sheet .security-note,
.sheet .warning-note,
.sheet .driver-warning,
.sheet .final-note,
.sheet .mods-instruction {
    margin: 0 0 16px;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 2px solid rgba(111, 27, 27, .3);
    background: none;
    font-size: 12.5px;
    color: var(--ink-mute);
    font-style: italic;
}

/* ---------- кнопки ---------- */

.sheet .cta-block {
    margin: 30px 0 0;
    padding: 0;
    border: 0;
}

.sheet .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.sheet .cta-button,
.sheet .register-btn,
.sheet .download-btn,
.sheet .patch-button,
.sheet .mod-button,
.sheet .download-button,
.sheet .driver-button,
.sheet .additional-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid var(--red);
    background: transparent;
    color: var(--red);
    font: 400 10px/1.2 Georgia, serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sheet .register-btn {
    background: var(--red);
    color: #f6ecd8;
}

.sheet .register-btn:hover { background: var(--red-bright); border-color: var(--red-bright); color: #fff8e9; }

.sheet .download-btn:hover,
.sheet .patch-button:hover,
.sheet .mod-button:hover,
.sheet .download-button:hover,
.sheet .driver-button:hover,
.sheet .additional-button:hover {
    background: rgba(111, 27, 27, .08);
}

/* ---------- файлы ---------- */

.sheet .patches-grid,
.sheet .mods-grid { gap: 12px; }

.sheet .patch-card,
.sheet .mod-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
    transition: border-color .15s;
}

.sheet .patch-card:hover,
.sheet .mod-card:hover { border-color: rgba(111, 27, 27, .35); }

.sheet .patch-card .patch-content,
.sheet .mod-card .mod-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 auto;
}

.sheet .patch-card .patch-button,
.sheet .mod-card .mod-button {
    margin-top: 14px;
    align-self: stretch;
    padding: 10px 12px;
}

.sheet .patch-header,
.sheet .mod-header,
.sheet .additional-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    margin: 0 0 6px;
    border: 0;
}

.sheet .patch-header h3,
.sheet .mod-header h3 { font-size: 13.5px; margin: 0; }

.sheet .patch-badge,
.sheet .required-badge {
    align-self: flex-start;
    margin: 6px 0 0;
    font: 400 8.5px/1.4 Georgia, serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.sheet .patch-size,
.sheet .mod-size,
.sheet .patch-desc,
.sheet .mod-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-mute);
}

.sheet .download-card {
    padding: 16px;
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
}

/* ---------- галерея ---------- */

.sheet .server-image {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 30px;
}

.sheet .server-image img,
.sheet .server-image .server-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin: 0;
    border: 1px solid var(--line);
}

.sheet .image-caption {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    font: 400 9px/1.5 Georgia, serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: left;
}

.sheet .section-divider { display: none; }

/* ---------- правила: лист документа ---------- */

.page-rules .paper {
    margin: 18px 0 0;
    padding: 34px 38px 38px;
    background: #fffdf8;
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(90, 70, 45, .1);
}

.page-rules .paper .warning-alert {
    margin: 0 0 24px;
    padding: 14px 16px;
    background: rgba(111, 27, 27, .05);
    border: 0;
    border-left: 3px solid var(--red);
}

.page-rules .paper .warning-header h2 { color: var(--red); }

.page-rules .paper .rule-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
}

.page-rules .paper .rule-number { color: var(--red); }

.page-rules .paper .rule-text { color: var(--ink); font-size: 13.5px; }

.sheet .quick-facts + .features-block { margin-top: 26px; }

/* ---------- футер ---------- */

.site-footer {
    max-width: 1220px;
    margin: 26px auto 0;
    padding: 16px 20px 28px;
    border-top: 1px solid var(--line);
    background: none;
}

.site-footer .copyright {
    margin: 0;
    font-size: 11px;
    line-height: 1.7;
    color: var(--ink-mute);
    text-align: left;
}

.copyright-icon { color: var(--red); }

/* ---------- адаптив ---------- */

@media (max-width: 1100px) {
    .bar-nav { display: none; }
    .cols { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
    .sheet { padding: 26px 24px 30px; }
    h1, .sheet .content-title { font-size: 32px; }
}

@media (max-width: 820px) {
    .l2top { display: none; }

    .bar-inner { height: 56px; padding: 0 12px; gap: 12px; }
    .logo-text { font-size: 12px; letter-spacing: 2px; }
    .bar-enter { padding: 9px 14px; font-size: 9.5px; }

    .wrap { padding: 130px 12px 0; }

    .cols { display: block; }

    .rail { margin-bottom: 14px; }

    .rail .menu-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px;
    }

    .rail .menu-button.active:before { display: none; }

    .sheet { padding: 20px 16px 24px; }

    h1, .sheet .content-title { font-size: 26px; }

    .sheet .quick-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 0; }

    .sheet .quick-facts .fact { padding: 6px 14px; }

    .sheet .info-grid,
    .sheet .rates-grid,
    .sheet .c4-features,
    .sheet .important-points,
    .sheet .functions-grid,
    .sheet .patches-grid,
    .sheet .mods-grid,
    .sheet .server-image { grid-template-columns: 1fr; }

    .sheet .cta-buttons { flex-direction: column; align-items: stretch; }

    .page-rules .paper { padding: 20px 16px 24px; }

    .site-footer { padding: 14px 14px 20px; }
}

/* ============================================================================
   ЛОГОТИП ПО ЦЕНТРУ СВЕРХУ
   ============================================================================ */

.top-logo {
    position: absolute;
    top: 34px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 5;
}

/* мягкая бумажная подложка, чтобы логотип читался на арте */
.top-logo:before {
    content: "";
    position: absolute;
    top: -26px;
    left: 50%;
    width: 880px;
    height: 280px;
    margin-left: -440px;
    background: radial-gradient(ellipse at center,
        rgba(242, 235, 220, .96) 0%,
        rgba(242, 235, 220, .72) 42%,
        rgba(242, 235, 220, 0) 74%);
    pointer-events: none;
    z-index: -1;
}

.top-logo a {
    display: block;
    opacity: .98;
    transition: opacity .2s;
}

.top-logo a:hover { opacity: 1; }

.top-logo svg {
    display: block;
    width: 520px;
    height: auto;
}

.top-logo .word {
    font-family: 'Cinzel', 'Times New Roman', serif;
}

.top-logo .sub {
    font-family: Georgia, 'Times New Roman', serif;
    fill: #6b5d4a;
    font-size: 10.5px;
}

/* орнамент прорисовывается и дальше мягко дышит */
.top-logo .orn path {
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    animation: logoDraw 1.6s ease-out forwards;
}

@keyframes logoDraw {
    to { stroke-dashoffset: 0; }
}

.top-logo .orn {
    animation: ornPulse 7s ease-in-out 1.6s infinite;
}

@keyframes ornPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* подпись медленно проявляется и затухает */
.top-logo .sub {
    animation: subFade 7s ease-in-out infinite;
}

@keyframes subFade {
    0%, 100% { opacity: .95; }
    50% { opacity: .5; }
}

/* слово чуть дышит тенью */
.top-logo .word {
    animation: wordGlow 7s ease-in-out infinite;
}

@keyframes wordGlow {
    0%, 100% { filter: drop-shadow(0 1px 0 rgba(242, 235, 220, .6)); }
    50% { filter: drop-shadow(0 1px 6px rgba(168, 134, 63, .35)); }
}

@media (prefers-reduced-motion: reduce) {
    .top-logo .orn path,
    .top-logo .orn,
    .top-logo .sub,
    .top-logo .word { animation: none; }

    .top-logo .orn path { stroke-dashoffset: 0; }
}

@media (max-width: 820px) {
    .top-logo { top: 20px; }

    .top-logo:before {
        width: 460px;
        height: 160px;
        margin-left: -230px;
        top: -14px;
    }

    .top-logo svg { width: 320px; }
}
/* Счётчик LiveInternet в сайдбаре */
.site-counter {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
    opacity: .4;
    filter: grayscale(1);
    transition: opacity .2s ease, filter .2s ease;
}

.site-counter:hover {
    opacity: .85;
    filter: grayscale(0);
}

.site-counter img {
    display: inline-block;
    border: 0;
}