/* Timeline cards are not painted like ordinary action buttons. */
body.timeline-page .timeline-track .timeline-item[role=button],
body.timeline-page .timeline-track .timeline-item[role=button]:hover,
body.timeline-page .timeline-track .timeline-item[role=button]:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

body.timeline-page .era-modal {
    box-sizing: border-box;
    padding: clamp(12px, 3vw, 36px);
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(14px);
}
body.timeline-page .era-modal-content {
    box-sizing: border-box;
    width: min(100%, 1080px);
    max-height: 88dvh;
    padding: clamp(58px, 7vw, 76px) clamp(22px, 5vw, 60px) 36px;
    border: 1px solid #a787574f;
    border-radius: 24px;
    background: radial-gradient(ellipse at 0 0, #54212a26, transparent 55%), linear-gradient(145deg, #171315, #09090a 70%);
    box-shadow: 0 30px 100px #000b, inset 0 1px 0 #ffffff08;
    scrollbar-width: thin;
    scrollbar-color: #79634b #141114;
    overscroll-behavior: contain;
}
body.timeline-page .era-modal-content::-webkit-scrollbar { width: 6px; }
body.timeline-page .era-modal-content::-webkit-scrollbar-track { background: transparent; margin-block: 22px; }
body.timeline-page .era-modal-content::-webkit-scrollbar-thumb { background: #79634b; border-radius: 20px; }
body.timeline-page .era-modal-title {
    max-width: 800px;
    margin: 0 auto 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #b99b6440;
    color: #f3e8d6;
    font-size: clamp(1.8rem, 3.8vw, 3rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-shadow: none;
}
body.timeline-page .era-modal-text {
    max-width: 800px;
    margin: 0 auto 32px;
    color: #c8bfb5;
    font-size: clamp(1.05rem, 1.5vw, 1.19rem);
    line-height: 1.85;
    text-align: left;
    letter-spacing: normal;
    word-spacing: normal;
    overflow-wrap: break-word;
}
body.timeline-page .era-modal-text p { margin: 0 0 24px; }
body.timeline-page .era-modal-content .close-modal {
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
}
body.timeline-page .era-gallery {
    padding-top: 24px;
    border-top: 1px solid #b99b642b;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
body.timeline-page .era-gallery img {
    box-sizing: border-box;
    height: clamp(150px, 20vw, 220px);
    border: 1px solid #aa8b5b4a;
    border-radius: 14px;
    box-shadow: 0 8px 22px #0005;
}
body.timeline-page .era-gallery img:hover { transform: translateY(-3px); border-color: #d4b27a; box-shadow: 0 12px 26px #0008; }
@media (max-width: 600px) {
    body.timeline-page .era-modal-content { border-radius: 18px; max-height: 92dvh; padding-bottom: 24px; }
    body.timeline-page .era-gallery { grid-template-columns: 1fr; }
    body.timeline-page .era-gallery img { height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
    body.timeline-page .era-gallery img { transition: none; }
}