/* Літопис Мідленда — сучасна редакційна розкладка. */
.timeline-page {
    --timeline-paper: #f3eee6;
    --timeline-muted: #aca49b;
    --timeline-red: #df263a;
    --timeline-gold: #e2b866;
    --timeline-line: rgba(255, 255, 255, .13);
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 50% 10%, rgba(126, 10, 22, .2), transparent 32rem),
        linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.96)),
        url("images/characters-bg.png") center/cover fixed no-repeat !important;
}

.timeline-page .timeline-main-wrapper {
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    height: auto !important;
}

.timeline-page .floating-header {
    position: relative !important;
    inset: auto !important;
    width: min(1480px, calc(100% - clamp(32px, 7vw, 96px))) !important;
    margin: 0 auto !important;
    padding: clamp(80px, 10vw, 140px) 0 44px !important;
    text-align: left;
    background: transparent !important;
    pointer-events: auto;
}

.timeline-page .floating-header::before {
    content: "ХРОНОЛОГІЯ СВІТУ";
    display: block;
    margin-bottom: 14px;
    color: var(--timeline-red);
    font: 700 .75rem 'Cinzel', Georgia, serif;
    letter-spacing: .2em;
}

.timeline-page .floating-header::after {
    content: "01";
    position: absolute;
    top: clamp(44px, 6vw, 88px);
    left: -10px;
    z-index: -1;
    color: rgba(170, 18, 34, .34);
    font: 700 clamp(5.5rem, 11vw, 10rem)/1 'Cinzel', Georgia, serif;
    pointer-events: none;
}

.timeline-page .floating-header h1 {
    max-width: 1040px;
    margin: 0 0 18px;
    color: var(--timeline-paper);
    font-size: clamp(3.7rem, 8vw, 8.2rem) !important;
    line-height: .9;
    letter-spacing: -.025em !important;
    text-shadow: 0 14px 48px rgba(0, 0, 0, .8);
}

.timeline-page .floating-header p {
    max-width: 650px;
    margin: 0;
    color: var(--timeline-muted);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    font-style: normal;
    line-height: 1.7;
}

.timeline-page .timeline-arc-filter,
.timeline-page .timeline-atlas-toolbar {
    position: relative;
    top: auto;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: min(1480px, calc(100% - clamp(32px, 7vw, 96px)));
    min-height: 64px;
    margin: 0 auto 14px;
    padding: 12px 14px;
    border: 1px solid var(--timeline-line);
    border-radius: 14px !important;
    background: rgba(9, 9, 10, .88);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
}

.timeline-page .timeline-arc-filter {
    order: 0;
    margin-top: 26px;
    margin-bottom: 0;
}

.timeline-page .timeline-atlas-toolbar {
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    justify-content: flex-start;
    margin-bottom: 36px;
}

.timeline-page .timeline-arc-filter span,
.timeline-page .timeline-atlas-toolbar > span {
    margin: 0 8px 0 2px;
    color: #d2c8bb;
    font: 700 .76rem 'Cinzel', Georgia, serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.timeline-page .timeline-arc-filter button,
.timeline-page .timeline-atlas-toolbar button {
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px !important;
    color: #bdb5ac;
    background: rgba(255, 255, 255, .025);
    font: 700 .72rem 'Cinzel', Georgia, serif;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.timeline-page .timeline-arc-filter button:hover,
.timeline-page .timeline-atlas-toolbar button:hover,
.timeline-page .timeline-arc-filter button.active,
.timeline-page .timeline-atlas-toolbar button.active {
    color: #fff;
    border-color: rgba(223, 38, 58, .86);
    background: linear-gradient(135deg, rgba(184, 18, 35, .42), rgba(90, 7, 15, .22));
    box-shadow: inset 0 0 18px rgba(223, 38, 58, .08);
}

.timeline-page .timeline-arc-filter button:hover,
.timeline-page .timeline-atlas-toolbar button:hover { transform: translateY(-2px); }

.timeline-page .timeline-container {
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}

.timeline-page .timeline-track {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(24px, 3vw, 42px) !important;
    width: min(1480px, calc(100% - clamp(32px, 7vw, 96px))) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 20px 0 120px !important;
    counter-reset: epoch;
}

.timeline-page .timeline-track::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 80px;
    left: 50%;
    display: block !important;
    width: 1px !important;
    height: auto !important;
    background: linear-gradient(transparent, rgba(223, 38, 58, .42) 8%, rgba(223, 38, 58, .42) 92%, transparent) !important;
    box-shadow: none !important;
    transform: none !important;
}

.timeline-page .timeline-item,
.timeline-page .timeline-item:nth-child(n) {
    position: relative;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: pointer;
    counter-increment: epoch;
}

.timeline-page .timeline-item:nth-child(even) { padding-top: 88px; }

.timeline-page .timeline-year,
.timeline-page .timeline-item:nth-child(n) .timeline-year {
    display: flex;
    align-items: center;
    gap: 12px;
    order: 0;
    grid-row: auto;
    align-self: auto;
    margin: 0 0 2px;
    color: var(--timeline-paper);
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    text-align: left;
    text-shadow: none;
}

.timeline-page .timeline-year::before {
    content: "0" counter(epoch);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(223, 38, 58, .6);
    border-radius: 50%;
    color: var(--timeline-gold);
    background: #0b0809;
    box-shadow: 0 0 24px rgba(166, 15, 30, .24);
    font: 700 .72rem 'Cinzel', Georgia, serif;
}

.timeline-page .timeline-dot { display: none !important; }

.timeline-page .timeline-content,
.timeline-page .timeline-item:nth-child(n) .timeline-content {
    position: relative;
    order: 1;
    grid-row: auto;
    align-self: stretch;
    min-height: 0 !important;
    padding: 0 0 28px !important;
    overflow: hidden;
    border: 1px solid var(--timeline-line) !important;
    border-radius: 18px !important;
    background: linear-gradient(150deg, rgba(23, 20, 20, .98), rgba(5, 5, 6, .99)) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .46) !important;
    pointer-events: auto;
    transform: none !important;
    transition: transform .34s ease, border-color .34s ease, box-shadow .34s ease !important;
}

.timeline-page .timeline-item:hover .timeline-content,
.timeline-page .timeline-item:focus-visible .timeline-content {
    transform: translateY(-8px) !important;
    border-color: rgba(223, 38, 58, .7) !important;
    box-shadow: 0 34px 82px rgba(0, 0, 0, .6), 0 0 0 1px rgba(223, 38, 58, .1) !important;
}

.timeline-page .timeline-content::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(223, 38, 58, .1), transparent 35%);
    opacity: 0;
    transition: opacity .3s ease;
}

.timeline-page .timeline-item:hover .timeline-content::after,
.timeline-page .timeline-item:focus-visible .timeline-content::after { opacity: 1; }

.timeline-page .timeline-content img {
    width: 100%;
    height: clamp(260px, 28vw, 390px) !important;
    margin: 0 0 28px !important;
    border: 0 !important;
    object-fit: cover;
    filter: saturate(.65) contrast(1.08) brightness(.78) !important;
    transform: none !important;
    transition: filter .45s ease, transform .65s ease !important;
}

.timeline-page .timeline-item:hover .timeline-content img,
.timeline-page .timeline-item:focus-visible .timeline-content img {
    filter: saturate(.92) contrast(1.08) brightness(.9) !important;
    transform: scale(1.025) !important;
}

.timeline-page .timeline-content h3,
.timeline-page .timeline-content p,
.timeline-page .timeline-content .click-hint { margin-inline: clamp(24px, 3vw, 38px); }

.timeline-page .timeline-content h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--timeline-paper);
    font-size: clamp(1.75rem, 2.9vw, 2.65rem) !important;
    line-height: 1.08;
    transform: none;
}

.timeline-page .timeline-content p {
    display: block !important;
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
    color: var(--timeline-muted);
    font-size: clamp(1rem, 1.2vw, 1.08rem) !important;
    line-height: 1.65 !important;
    -webkit-line-clamp: unset !important;
}

.timeline-page .click-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px !important;
    color: var(--timeline-gold) !important;
    font: 700 .76rem 'Cinzel', Georgia, serif;
    letter-spacing: .08em;
}

.timeline-page .click-hint::after { content: "↗"; font-size: 1rem; }

.timeline-page .timeline-item[hidden] { display: none !important; }

.timeline-page .timeline-item:focus-visible {
    outline: 2px solid var(--timeline-gold);
    outline-offset: 5px;
    border-radius: 18px;
}

@media (max-width: 820px) {
    .timeline-page .floating-header {
        width: min(100% - 30px, 680px) !important;
        padding-top: 72px !important;
    }

    .timeline-page .floating-header h1 { font-size: clamp(3.2rem, 16vw, 6rem) !important; }

    .timeline-page .timeline-arc-filter,
    .timeline-page .timeline-atlas-toolbar,
    .timeline-page .timeline-track {
        width: min(100% - 28px, 680px) !important;
    }

    .timeline-page .timeline-arc-filter,
    .timeline-page .timeline-atlas-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .timeline-page .timeline-arc-filter span,
    .timeline-page .timeline-atlas-toolbar > span,
    .timeline-page .timeline-arc-filter button,
    .timeline-page .timeline-atlas-toolbar button { flex: 0 0 auto; white-space: nowrap; }

    .timeline-page .timeline-track { grid-template-columns: 1fr !important; gap: 26px !important; }
    .timeline-page .timeline-track::before { left: 20px; }
    .timeline-page .timeline-item:nth-child(even) { padding-top: 0; }
    .timeline-page .timeline-content img { height: clamp(220px, 58vw, 360px) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-page .timeline-content,
    .timeline-page .timeline-content img,
    .timeline-page button { transition: none !important; }
}