/* Sdelechner — базова типографіка та каркас текстових сторінок */

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

:root {
    --sdl-gr: #232629;
    --sdl-mn: #4a5157;
    --sdl-ac: #f4772e;
    --sdl-ik: #1a1c1e;
    --sdl-pp: #f7f7f5;
    --sdl-lt: #e8e8e4;
    --sdl-dk: #121416;
    --sdl-wt: #ffffff;
    --sdl-ui: "Arial Narrow", Arial, sans-serif;
    --sdl-hf: "Hoefler Text", Garamond, serif;
    --sdl-r1: 4px;
    --sdl-r2: 10px;
    --sdl-r3: 18px;
    --sdl-s1: 0 2px 10px rgba(18, 20, 22, .07);
    --sdl-s2: 0 12px 30px rgba(18, 20, 22, .11);
    --sdl-s3: 0 26px 62px rgba(18, 20, 22, .18);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--sdl-hf);
    background: var(--sdl-pp);
    color: var(--sdl-ik);
    line-height: 1.74;
    font-size: 16px;
}

a {
    color: var(--sdl-gr);
    text-decoration: underline;
    text-decoration-color: rgba(244, 119, 46, .55);
    text-underline-offset: 3px;
    transition: color .2s ease, text-decoration-color .2s ease;
}
a:hover { color: var(--sdl-ac); text-decoration-color: var(--sdl-ac); }

/* ---- темна шапка на всю ширину ---- */
.sdl-hd {
    width: 100%;
    text-align: center;
    background: var(--sdl-dk);
    border-bottom: 4px solid var(--sdl-ac);
}
.sdl-hd-in {
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sdl-hd-lnk {
    font-family: var(--sdl-ui);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--sdl-pp);
    text-decoration: none;
}
.sdl-hd-lnk:hover { color: var(--sdl-ac); }
@media (max-width: 620px) {
    .sdl-hd-in { padding: 16px 18px; }
}

/* ---- hero без бейджа, вирівняний ліворуч ---- */
.sdl-hro {
    background: linear-gradient(180deg, var(--sdl-lt) 0%, var(--sdl-pp) 100%);
    border-bottom: 1px solid rgba(35, 38, 41, .12);
    padding: 66px 24px 56px;
}
.sdl-hro-in {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}
.sdl-hro-t {
    max-width: 860px;
    margin: 0 0 18px;
    font-size: clamp(32px, 5.4vw, 60px);
    line-height: 1.06;
    font-weight: 500;
    color: var(--sdl-gr);
}
.sdl-hro-s {
    max-width: 660px;
    margin: 0;
    color: var(--sdl-mn);
    font-size: 18px;
    line-height: 1.8;
}
.sdl-hro-d {
    margin-top: 22px;
    font-family: var(--sdl-ui);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sdl-mn);
    border-left: 3px solid var(--sdl-ac);
    padding-left: 12px;
}
@media (max-width: 620px) {
    .sdl-hro { padding: 46px 18px 40px; }
    .sdl-hro-s { font-size: 16px; }
}

/* ---- колонка контенту ---- */
.sdl-wrp {
    display: block;
    max-width: 1000px;
    margin: 0 auto;
    padding: 54px 24px 84px;
}
.sdl-wrp.sdl-nar { max-width: 840px; }
@media (max-width: 620px) {
    .sdl-wrp { padding: 36px 18px 60px; }
}

/* ---- базова типографіка всередині карток ---- */
.sdl-sec h2 {
    font-size: clamp(21px, 2.8vw, 29px);
    line-height: 1.2;
    font-weight: 500;
    color: var(--sdl-gr);
    margin: 0 0 14px;
    padding-right: 76px;
}
.sdl-sec h3 {
    font-family: var(--sdl-ui);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sdl-ik);
    margin: 24px 0 9px;
}
.sdl-sec p { color: var(--sdl-mn); margin-bottom: 14px; }
.sdl-sec p:last-child { margin-bottom: 0; }
.sdl-sec ul,
.sdl-sec ol {
    padding-left: 20px;
    margin: 0 0 16px;
    color: var(--sdl-mn);
}
.sdl-sec li { margin-bottom: 8px; }
.sdl-sec li::marker { color: var(--sdl-ac); }
.sdl-sec strong { color: var(--sdl-ik); font-weight: 700; }

/* ---- футер ---- */
.sdl-ft {
    background: var(--sdl-dk);
    color: #9aa0a4;
    padding: 30px 20px 24px;
    text-align: center;
    border-top: 4px solid var(--sdl-ac);
    font-family: var(--sdl-ui);
}
.sdl-ft-in { max-width: 900px; margin: 0 auto; }
.sdl-ft-nv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin-bottom: 14px;
}
.sdl-ft-nv a {
    color: var(--sdl-lt);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.sdl-ft-nv a:hover { color: var(--sdl-ac); }
.sdl-ft-bz {
    font-size: 12px;
    color: #8f9599;
    line-height: 1.8;
    margin-bottom: 12px;
}
.sdl-ft-ds {
    max-width: 720px;
    margin: 0 auto 12px;
    font-size: 11px;
    line-height: 1.7;
    color: #7d8388;
    padding-top: 12px;
    border-top: 1px solid rgba(232, 232, 228, .13);
}
.sdl-ft-cp {
    font-size: 11px;
    letter-spacing: .06em;
    color: #7d8388;
}