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

:root {
    --CmlPrimary: #5e1622;
    --CmlSecond: #a32a3d;
    --CmlAccent: #e0637a;
    --CmlInk: #241014;
    --CmlMute: #7a5f65;
    --CmlMuteDeep: #6a4f55;
    --CmlPaper: #fdf7f8;
    --CmlTint: #f0dfe2;
    --CmlEdge: #e3c9ce;
    --CmlSurface: #ffffff;
    --CmlNight: #1c0b0f;
    --CmlBtnInk: #2e0c14;
    --CmlUi: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
    --CmlTitle: Georgia, "Book Antiqua", "Times New Roman", serif;
    --CmlR1: 10px;
    --CmlR2: 16px;
    --CmlR3: 26px;
    --CmlSh1: 0 6px 18px rgba(94, 22, 34, .07);
    --CmlSh2: 0 14px 34px rgba(94, 22, 34, .11);
    --CmlSh3: 0 24px 54px rgba(36, 16, 20, .16);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--CmlTitle);
    background:
        radial-gradient(circle at 86% 2%, rgba(163, 42, 61, .12), transparent 36%),
        linear-gradient(180deg, #fdf7f8 0%, #f0dfe2 100%);
    color: var(--CmlInk);
    line-height: 1.75;
    font-size: 16px;
}

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

.CmlTopBar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 16px 20px 15px;
    background: rgba(253, 247, 248, .92);
    backdrop-filter: blur(14px);
    border-bottom: 2px solid var(--CmlEdge);
}
.CmlTopBarInner {
    max-width: 1160px;
    margin: 0 auto;
    text-align: center;
}
.CmlBrandLink {
    font-family: var(--CmlUi);
    font-size: 20px;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--CmlPrimary);
}

/* --- hero з бейджем і датою --- */
.CmlDocHero {
    max-width: 900px;
    margin: 0 auto;
    padding: 62px 20px 40px;
    text-align: center;
    color: var(--CmlInk);
}
.CmlDocBadge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    border: 2px solid var(--CmlEdge);
    border-radius: var(--CmlR1);
    overflow: hidden;
    background: var(--CmlSurface);
    box-shadow: var(--CmlSh1);
    font-family: var(--CmlUi);
    margin-bottom: 20px;
}
.CmlDocBadgeTag {
    padding: 8px 16px;
    background: var(--CmlPrimary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.CmlDocBadgeDate {
    padding: 8px 16px;
    color: var(--CmlSecond);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}
.CmlDocTitle {
    max-width: 820px;
    margin: 0 auto 14px;
    font-size: clamp(29px, 4.6vw, 50px);
    line-height: 1.1;
    font-weight: 700;
    color: var(--CmlPrimary);
}
.CmlDocIntro {
    max-width: 660px;
    margin: 0 auto;
    color: var(--CmlMute);
    font-size: 17px;
    line-height: 1.8;
}

/* --- корпус документа: проза без картки --- */
.CmlDocBody {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px 80px;
}
.CmlDocPart {
    padding: 30px 0 6px;
    border-top: 2px solid var(--CmlEdge);
}
.CmlDocPart:first-child { border-top: none; padding-top: 10px; }

.CmlDocPart h2 {
    font-size: clamp(21px, 2.8vw, 29px);
    line-height: 1.22;
    font-weight: 700;
    color: var(--CmlPrimary);
    margin: 0 0 14px;
}
.CmlDocPart h3 {
    font-family: var(--CmlUi);
    font-size: 16px;
    line-height: 1.4;
    color: var(--CmlInk);
    margin: 22px 0 8px;
}
.CmlDocPart p {
    color: var(--CmlMute);
    margin-bottom: 14px;
}
.CmlDocPart ul,
.CmlDocPart ol {
    padding-left: 20px;
    margin: 0 0 16px;
    color: var(--CmlMute);
}
.CmlDocPart li { margin-bottom: 7px; }
.CmlDocPart strong { color: var(--CmlInk); }

/* --- вертикальний timeline --- */
.CmlTrack {
    position: relative;
    margin: 24px 0 28px;
    padding-left: 46px;
}
.CmlTrack::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, var(--CmlPrimary), var(--CmlAccent));
}
.CmlTrackItem {
    position: relative;
    padding: 0 0 24px;
}
.CmlTrackItem:last-child { padding-bottom: 0; }
.CmlTrackMark {
    position: absolute;
    left: -46px;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--CmlUi);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: var(--CmlPrimary);
    border: 3px solid var(--CmlPaper);
    box-shadow: var(--CmlSh1);
}
.CmlTrackTitle {
    font-family: var(--CmlUi);
    font-size: 15px;
    font-weight: 700;
    color: var(--CmlInk);
    line-height: 1.5;
    margin-bottom: 3px;
    padding-top: 4px;
}
.CmlTrackText {
    font-size: 15px;
    color: var(--CmlMute);
}

/* --- виносна репліка --- */
.CmlAlertNote {
    margin: 22px 0 26px;
    padding: 18px 22px;
    border-left: 6px solid var(--CmlAccent);
    border-radius: 0 var(--CmlR1) var(--CmlR1) 0;
    background: #fdeef1;
}
.CmlAlertNote p { margin: 0; color: var(--CmlInk); }

/* --- пари «пункт → пояснення» --- */
.CmlFactList {
    margin: 20px 0 24px;
    border-top: 2px solid var(--CmlEdge);
}
.CmlFactRow {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: 6px 26px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--CmlTint);
}
.CmlFactTerm {
    font-family: var(--CmlUi);
    font-size: 14px;
    font-weight: 700;
    color: var(--CmlPrimary);
    line-height: 1.6;
}
.CmlFactDesc {
    font-size: 15px;
    color: var(--CmlMute);
    line-height: 1.7;
}

@media (max-width: 700px) {
    .CmlDocHero { padding-top: 46px; }
    .CmlTrack { padding-left: 40px; }
    .CmlTrack::before { left: 14px; }
    .CmlTrackMark { left: -40px; width: 32px; height: 32px; font-size: 13px; }
    .CmlFactRow { grid-template-columns: 1fr; padding: 12px 2px; }
}

.CmlFootBar {
    margin-top: 44px;
    background: var(--CmlTint);
    color: var(--CmlMuteDeep);
    padding: 22px 20px 18px;
    text-align: center;
    border-top: 2px solid var(--CmlEdge);
    font-family: var(--CmlUi);
}
.CmlFootInner {
    max-width: 900px;
    margin: 0 auto;
}
.CmlFooterNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin-bottom: 10px;
}
.CmlFooterNav a {
    color: var(--CmlPrimary);
    font-size: 12px;
    text-decoration: none;
}
.CmlFooterNav a:hover { color: var(--CmlSecond); text-decoration: underline; }
.CmlFootNote {
    font-size: 12px;
    color: var(--CmlMuteDeep);
}

.CmlFootLegal {
    max-width: 760px;
    margin: 10px auto 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--CmlMuteDeep);
}