/* ==========================================================================
   Salurexa — slx-frame.css
   Базовий шар: скидання, палітра, типографіка, шапка, титул сторінки, підвал
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --slx-deep: #6e1b3f;
    --slx-mid: #96305c;
    --slx-gold: #d4a017;
    --slx-gold-dark: #a97c11;
    --slx-ink: #2a1420;
    --slx-mute: #7d6570;
    --slx-edge: #ecdfe4;
    --slx-paper: #fdf8fa;
    --slx-tint: #f7ecf0;
    --slx-panel: #ffffff;
    --slx-night: #1d0d16;

    --slx-head: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
    --slx-ui: 'Futura', 'Century Gothic', 'Avenir', sans-serif;

    --slx-r-sm: 4px;
    --slx-r-md: 10px;
    --slx-r-lg: 18px;

    --slx-lift-1: 0 6px 18px rgba(42, 20, 32, .05);
    --slx-lift-2: 0 14px 38px rgba(42, 20, 32, .09);
    --slx-lift-3: 0 26px 64px rgba(42, 20, 32, .13);

    --slx-rule: 1px solid var(--slx-edge);
    --slx-rule-gold: 1px solid rgba(212, 160, 23, .55);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--slx-ui);
    font-size: 16px;
    line-height: 1.76;
    color: var(--slx-ink);
    background:
        radial-gradient(circle at 88% -4%, rgba(212, 160, 23, .10), transparent 34%),
        radial-gradient(circle at 4% 2%, rgba(110, 27, 63, .09), transparent 30%),
        linear-gradient(180deg, var(--slx-paper) 0%, var(--slx-tint) 100%);
    background-attachment: fixed;
}

a {
    color: var(--slx-deep);
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

a:hover {
    color: var(--slx-mid);
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- Шапка ------------------------------------------------------- */

.slx-top-bar {
    padding: 20px 20px 18px;
    background: rgba(253, 248, 250, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(110, 27, 63, .14);
    box-shadow: 0 1px 0 rgba(212, 160, 23, .28);
}

.slx-top-inner {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.slx-brand {
    display: inline-block;
    font-family: var(--slx-head);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: .34em;
    text-indent: .34em;
    text-transform: uppercase;
    color: var(--slx-deep);
}

.slx-brand:hover {
    color: var(--slx-mid);
}

/* ---------- Титул документа («редакційний розворот») -------------------- */

.slx-doc-masthead {
    max-width: 1180px;
    margin: 0 auto;
    padding: 62px 24px 34px;
    text-align: center;
}

.slx-doc-rule {
    height: 0;
    border-top: 1px solid rgba(212, 160, 23, .75);
    position: relative;
}

.slx-doc-rule::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    border-top: 1px solid rgba(110, 27, 63, .16);
}

.slx-doc-kicker {
    display: block;
    margin: 18px 0 14px;
    font-family: var(--slx-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .42em;
    text-indent: .42em;
    text-transform: uppercase;
    color: var(--slx-gold-dark);
}

.slx-doc-title {
    font-family: var(--slx-head);
    font-weight: 400;
    font-size: clamp(34px, 6.4vw, 76px);
    line-height: 1.03;
    letter-spacing: -.012em;
    color: var(--slx-deep);
    margin: 0 auto 16px;
    max-width: 15ch;
}

.slx-doc-title em {
    font-style: italic;
    color: var(--slx-gold-dark);
}

.slx-doc-standfirst {
    max-width: 62ch;
    margin: 0 auto 22px;
    font-family: var(--slx-head);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.7;
    color: var(--slx-mute);
}

.slx-doc-dateline {
    font-family: var(--slx-ui);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--slx-mute);
    margin: 16px 0 18px;
}

/* ---------- Полотно документа ------------------------------------------ */

.slx-doc-body {
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 24px 84px;
}

.slx-columns {
    column-count: 2;
    column-gap: 56px;
    column-rule: 1px solid rgba(110, 27, 63, .13);
    text-align: justify;
    hyphens: auto;
}

.slx-columns > * {
    break-inside: avoid-column;
}

.slx-columns p {
    color: var(--slx-mute);
    margin: 0 0 14px;
    orphans: 3;
    widows: 3;
}

.slx-columns p strong,
.slx-doc-body strong {
    color: var(--slx-ink);
    font-weight: 700;
}

.slx-columns ul,
.slx-columns ol {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--slx-mute);
}

.slx-columns li {
    margin-bottom: 6px;
}

/* Заголовки розділів — капітель із розрядкою */
.slx-section-head {
    font-family: var(--slx-ui);
    font-size: 13px;
    font-weight: 700;
    font-variant: small-caps;
    letter-spacing: .26em;
    text-transform: lowercase;
    color: var(--slx-deep);
    text-align: left;
    margin: 26px 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(212, 160, 23, .5);
}

.slx-section-head:first-child {
    margin-top: 0;
}

.slx-sub-head {
    font-family: var(--slx-head);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--slx-ink);
    text-align: left;
    margin: 18px 0 8px;
}

.slx-drop p:first-of-type::first-letter {
    float: left;
    font-family: var(--slx-head);
    font-size: 3.5em;
    line-height: .82;
    padding: 6px 10px 0 0;
    color: var(--slx-deep);
}

/* ---------- Підвал ------------------------------------------------------ */

.slx-foot {
    margin-top: 40px;
    padding: 26px 20px 22px;
    background: var(--slx-night);
    color: #cbb2bd;
    text-align: center;
    border-top: 3px solid var(--slx-gold-dark);
    font-family: var(--slx-ui);
}

.slx-foot-inner {
    max-width: 920px;
    margin: 0 auto;
}

.slx-foot-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
    margin-bottom: 12px;
}

.slx-foot-links a {
    color: #e3c9a6;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.slx-foot-links a:hover {
    color: var(--slx-gold);
}

.slx-foot-copy {
    font-size: 11px;
    letter-spacing: .12em;
    color: #a68b98;
    margin-bottom: 10px;
}

.slx-foot-note {
    max-width: 780px;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.7;
    color: #8b7280;
}

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

@media (max-width: 860px) {
    .slx-columns {
        column-count: 1;
        column-gap: 0;
        column-rule: none;
        text-align: left;
    }

    .slx-doc-masthead {
        padding: 44px 20px 26px;
    }

    .slx-doc-body {
        padding: 6px 20px 62px;
    }
}

@media (max-width: 480px) {
    .slx-brand {
        font-size: 20px;
        letter-spacing: .26em;
        text-indent: .26em;
    }
}