/* ─── FONT ─── */
@font-face {
    font-family: "KingthingsPetrock";
    src: url("/assets/fonts/kingthings_petrock/Kingthings_Petrock.ttf") format("truetype");
    /*src: url("/assets/fonts/morris_roman/MorrisRomanAlternate-Black.ttf") format("truetype");*/
}

/* ─── TIMELINE CONTAINER ─── */
#timeline {
    /* position, width, left margin */
    position: relative;
    width: auto; /* was 120px */ /*rem and % are not the same? rem resizes map?*/
    margin-left: 3.125rem; /* was 50px */

    background-image: url("/assets/images/UI/timeline/timeline_chain.svg");
    background-repeat: repeat-y;
    background-size: 2.5rem 7.25rem; /* was 40px 116px */
}

/* ─── CHAIN (background) ─── */
/* already handled by #timeline background properties */

/* ─── EVENT ─── */
.timeline-event {
    /* position absolute, display flex, align arrow and title */
    position: absolute;
    display: flex;
    align-items: center;
    left: 2.5rem; /* was 40px */
    right: 0;
    width: auto;
}
.timeline-event > a {
    border-bottom: var(--era-color) 1px solid;
}

/* ─── ARROW ─── */
.timeline-arrow {
    /* dimensions: 137.7 x 87.8px */
    width: 4.788rem; /* was 76.6px */
    height: 3.05rem; /* was 48.8px */
    flex-shrink: 0;
}

/* ─── DATE LABEL ─── */
.timeline-event-date {
    position: absolute;
    right: calc(100% + 3.125rem); /* was 100% + 50px */ /* 100% of the chain width + some margin */
    font-family: "KingthingsPetrock", serif;
    font-size: 0.85em;
    color: var(--era-color);
    white-space: nowrap;
}

/* ─── EVENT TITLE ─── */
.timeline-event-title {
    /* base font styles, color: var(--era-color) */
    font-family: "KingthingsPetrock", serif;
    color: var(--era-color);

    display: inline-block; /* ← fixes max-width being ignored */
    white-space: normal;
    overflow-wrap: break-word;
    max-width: calc(100%-1rem);
}

/* ─── CLUSTER TITLES WRAPPER ─── */
.timeline-cluster-titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.timeline-cluster-titles a {
    border-bottom: var(--era-color) 1px solid;
}

.timeline-cluster .timeline-event-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    right: calc(100% + 3.125rem); /* was 100% + 50px */
}

.timeline-cluster .timeline-event-date span {
    color: var(--era-color, #888); /* falls back to grey for the separator */
}

/* ─── IMPORTANCE LEVELS ─── */
.importance-1 {
    font-size: 1em;
} /* ~h5 */
.importance-2 {
    font-size: 1.25em;
} /* ~h4 */
.importance-3 {
    font-size: 1.5em;
} /* ~h3 */

.timeline-arrow.importance-1 {
    width: 3.188rem;
    height: 2.031rem;
} /* was 51px / 32.5px */
.timeline-arrow.importance-2 {
    width: 3.988rem;
    height: 2.538rem;
} /* was 63.8px / 40.6px */
.timeline-arrow.importance-3 {
    width: 4.788rem;
    height: 3.05rem;
} /* was 76.6px / 48.8px */

/* ─── SKIP MARKER ─── */
.timeline-skip {
    /* position absolute, text centered on the line */
    position: absolute;
    left: 3.125rem; /* was 50px */
    width: 2.5rem; /* was 40px */
    text-align: center;
    font-family: "KingthingsPetrock", serif;
    font-size: 0.85em;
    color: #888;
    transform: translateY(-50%);
}