.rcg-artist-timeline {
    --rcg-timeline-red: #c74235;
    --rcg-timeline-red-dark: #a3362b;
    --rcg-timeline-ink: #29313d;
    --rcg-timeline-node: #242117;
    --rcg-timeline-muted: #66717f;
    --rcg-timeline-line: rgba(41, 49, 61, .2);
    --rcg-timeline-warm: #f8f4f1;
    --rcg-timeline-blush: #fbf1ee;
    --rcg-timeline-surface: #fff;
    --rcg-timeline-stage-height: 400px;
    --rcg-life-height: 372px;
    --rcg-seg-gap: 42px;
    --rcg-tether: rgba(41, 49, 61, .26);
    position: relative;
    isolation: isolate;
    width: 100%;
    color: var(--rcg-timeline-ink);
}

.rcg-artist-timeline,
.rcg-artist-timeline * {
    box-sizing: border-box;
}

.rcg-artist-timeline [hidden] {
    display: none !important;
}

.rcg-artist-timeline button,
.rcg-artist-timeline a {
    -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ *
 * Theme reset
 *
 * Astra paints bare <button> elements with the theme accent on :hover, :focus
 * and :active, which was flooding timeline controls with the theme blue.
 *
 * `!important` is used deliberately and only on the three properties the theme
 * touches. Plain specificity is not enough: Astra's button rules are generated
 * into the page after this stylesheet and are themselves scoped and weighted in
 * ways a plugin cannot predict. `.rcgsm-media-gallery__more` in the gallery
 * stylesheet already needed the same treatment for the same reason.
 *
 * Each control states every state it can be in, so the theme has nothing left
 * to fill in. Hover and focus-visible colours live with the components below.
 * ------------------------------------------------------------------ */

/* Controls that are never filled — the marker, band or segment does the work. */
.rcg-artist-timeline__era-segment,
.rcg-artist-timeline__era-segment:hover,
.rcg-artist-timeline__era-segment:focus,
.rcg-artist-timeline__era-segment:active,
.rcg-artist-timeline__minimap-era,
.rcg-artist-timeline__minimap-era:hover,
.rcg-artist-timeline__minimap-era:focus,
.rcg-artist-timeline__minimap-era:active,
.rcg-artist-timeline__node,
.rcg-artist-timeline__node:hover,
.rcg-artist-timeline__node:focus,
.rcg-artist-timeline__node:active {
    background: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
    box-shadow: none;
}

/* Resting, focus and active colours for the controls that do carry a fill.
   :hover is deliberately absent — the component rules further down paint it,
   and they outrank these. :active is present because a press without hover
   (a keyboard Space) would otherwise fall through to the theme. */
.rcg-artist-timeline__control,
.rcg-artist-timeline__control:focus,
.rcg-artist-timeline__control:active,
.rcg-artist-timeline__era-step,
.rcg-artist-timeline__era-step:focus,
.rcg-artist-timeline__era-step:active {
    background: transparent !important;
    border-color: rgba(41, 49, 61, .1) !important;
    color: var(--rcg-timeline-ink) !important;
}

.rcg-artist-timeline__control,
.rcg-artist-timeline__control:hover,
.rcg-artist-timeline__control:focus,
.rcg-artist-timeline__control:active {
    border-color: transparent !important;
}

.rcg-artist-timeline__back,
.rcg-artist-timeline__back:focus,
.rcg-artist-timeline__back:active,
.rcg-artist-timeline__panel-step,
.rcg-artist-timeline__panel-step:focus,
.rcg-artist-timeline__panel-step:active {
    background: var(--rcg-timeline-warm) !important;
    border-color: rgba(41, 49, 61, .1) !important;
    color: var(--rcg-timeline-ink) !important;
}

.rcg-artist-timeline__era-list-toggle,
.rcg-artist-timeline__era-list-toggle:focus,
.rcg-artist-timeline__era-list-toggle:active,
.rcg-artist-timeline__close,
.rcg-artist-timeline__close:focus,
.rcg-artist-timeline__close:active {
    background: #fff !important;
    border-color: rgba(41, 49, 61, .13) !important;
    color: var(--rcg-timeline-ink) !important;
}

.rcg-artist-timeline__era-card,
.rcg-artist-timeline__era-card:hover,
.rcg-artist-timeline__era-card:focus,
.rcg-artist-timeline__era-card:active {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(41, 49, 61, .1) !important;
    color: var(--rcg-timeline-ink) !important;
}

/* Unavailable controls. Chrome does not match :hover on a disabled button at
   all, but other engines do, so the state is stated in the estate red family
   rather than left for the theme to colour. */
.rcg-artist-timeline__control:disabled,
.rcg-artist-timeline__era-step:disabled,
.rcg-artist-timeline__panel-step:disabled {
    color: var(--rcg-timeline-red) !important;
    cursor: not-allowed;
}

.rcg-artist-timeline__control:disabled:hover,
.rcg-artist-timeline__control:disabled:active,
.rcg-artist-timeline__era-step:disabled:hover,
.rcg-artist-timeline__era-step:disabled:active,
.rcg-artist-timeline__panel-step:disabled:hover,
.rcg-artist-timeline__panel-step:disabled:active {
    background: rgba(199, 66, 53, .12) !important;
    border-color: rgba(199, 66, 53, .24) !important;
    color: var(--rcg-timeline-red) !important;
}

/* ------------------------------------------------------------------ *
 * Heading
 * ------------------------------------------------------------------ */

.rcg-artist-timeline__head {
    max-width: 900px;
    margin: 0 auto 22px;
    text-align: center;
}

.rcg-artist-timeline__eyebrow,
.rcg-artist-timeline__panel-eyebrow,
.rcg-artist-timeline__section-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--rcg-timeline-red);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.rcg-artist-timeline__head h2 {
    margin: 0;
    color: var(--rcg-timeline-ink);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.12;
}

.rcg-artist-timeline__head p {
    max-width: 720px;
    margin: 12px auto 0;
    color: var(--rcg-timeline-muted);
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.65;
}

.rcg-artist-timeline__head p.rcg-artist-timeline__head-meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 6px 15px;
    color: var(--rcg-timeline-muted);
    background: var(--rcg-timeline-warm);
    border: 1px solid rgba(41, 49, 61, .07);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__head-span {
    color: var(--rcg-timeline-ink);
}

.rcg-artist-timeline__shell {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Level 1 — full-life chronology
 * ------------------------------------------------------------------ */

/* One frame holds every state. The band at its top swaps contents between the
   full-life view and a selected era, but the card itself never goes away — so
   moving in and out of an era changes what the header says, not what the page
   is made of. */
.rcg-artist-timeline__frame {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 6%, rgba(199, 66, 53, .05), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fbf8f5 100%);
    border: 1px solid rgba(41, 49, 61, .1);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(33, 40, 51, .07);
}

.rcg-artist-timeline__band {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 18px 12px;
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(41, 49, 61, .09);
}

.rcg-artist-timeline__band-kicker {
    flex: 0 0 auto;
    color: var(--rcg-timeline-red);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.rcg-artist-timeline__band-meta {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--rcg-timeline-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__band-meta strong {
    color: var(--rcg-timeline-ink);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .04em;
}

.rcg-artist-timeline__overview {
    padding: clamp(14px, 2vw, 24px) clamp(16px, 2.4vw, 32px) clamp(10px, 1.6vw, 18px);
}

.rcg-artist-timeline__life {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rcg-artist-timeline__life-cap {
    flex: 0 0 auto;
    color: var(--rcg-timeline-muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__life-track {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--rcg-life-height);
    align-items: stretch;
}

.rcg-artist-timeline__life-rail {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(41, 49, 61, .1), rgba(41, 49, 61, .28) 12%, rgba(41, 49, 61, .28) 88%, rgba(41, 49, 61, .1));
    border-radius: 999px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.rcg-artist-timeline__era-segment {
    position: relative;
    flex: 1 1 0;
    flex-grow: var(--rcg-era-weight, 100);
    min-width: 30px;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity .2s ease;
}

.rcg-artist-timeline__era-segment:focus {
    outline: none;
}

/* A segment button fills the whole height of its column, but the label above or
   below it is free to slide sideways to clear its neighbour. That left the
   label sitting over the next era's column, so pointing at one chapter's title
   selected the one beside it. Only the era's own stretch of the rail and its
   own copy are targets; the column itself is inert. */
.rcg-artist-timeline__era-segment {
    pointer-events: none;
}

.rcg-artist-timeline__segment-band,
.rcg-artist-timeline__segment-node,
.rcg-artist-timeline__segment-copy {
    pointer-events: auto;
}

/* The band is only a few pixels tall; this gives the era's duration a target
   deep enough to hit comfortably without widening it beyond its own years. */
.rcg-artist-timeline__segment-band::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 44px;
    transform: translateY(-50%);
}

/* Neighbouring chapters step back so the era being considered reads as one
   continuous stretch of the life rather than one card among ten.
   Keyboard focus uses :focus-visible via :has() deliberately — :focus-within
   would also fire when focus is restored after returning from an era, leaving
   the whole overview dimmed with nothing hovered. */
.rcg-artist-timeline__life-track:hover .rcg-artist-timeline__era-segment:not(:hover) {
    opacity: .46;
}

.rcg-artist-timeline__life-track:has(.rcg-artist-timeline__era-segment:focus-visible) .rcg-artist-timeline__era-segment:not(:focus-visible) {
    opacity: .46;
}

.rcg-artist-timeline__segment-band {
    position: absolute;
    top: 50%;
    right: 2px;
    left: 2px;
    height: 11px;
    background: rgba(199, 66, 53, .07);
    border: 1px solid rgba(199, 66, 53, .12);
    border-radius: 999px;
    transform: translateY(-50%);
    transition: background .2s ease, border-color .2s ease, height .2s ease;
    z-index: 2;
}

.rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-band {
    height: 9px;
    background: rgba(199, 66, 53, .045);
    border-color: rgba(41, 49, 61, .13);
}

.rcg-artist-timeline__era-segment.is-emphasis-high .rcg-artist-timeline__segment-band {
    height: 14px;
    background: rgba(199, 66, 53, .11);
    border-color: rgba(199, 66, 53, .2);
}

.rcg-artist-timeline__era-segment:hover .rcg-artist-timeline__segment-band,
.rcg-artist-timeline__era-segment:focus-visible .rcg-artist-timeline__segment-band,
.rcg-artist-timeline__era-segment.is-recent .rcg-artist-timeline__segment-band {
    height: 16px;
    background: rgba(199, 66, 53, .2);
    border-color: rgba(199, 66, 53, .38);
}

.rcg-artist-timeline__segment-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid var(--rcg-timeline-node);
    border-radius: 999px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .92), 0 6px 14px rgba(41, 49, 61, .1);
    transform: translate(-50%, -50%);
    transition: border-color .2s ease, transform .2s ease, width .2s ease, height .2s ease;
    z-index: 4;
}

.rcg-artist-timeline__era-segment.is-emphasis-high .rcg-artist-timeline__segment-node {
    width: 20px;
    height: 20px;
    border-width: 4px;
    border-color: var(--rcg-timeline-red);
}

.rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-node {
    width: 11px;
    height: 11px;
    border-width: 2px;
}

.rcg-artist-timeline__era-segment:hover .rcg-artist-timeline__segment-node,
.rcg-artist-timeline__era-segment:focus-visible .rcg-artist-timeline__segment-node {
    border-color: var(--rcg-timeline-red);
    transform: translate(-50%, -50%) scale(1.16);
}

.rcg-artist-timeline__era-segment:focus-visible .rcg-artist-timeline__segment-node {
    outline: 3px solid rgba(199, 66, 53, .34);
    outline-offset: 5px;
}

/* Tether: a riser at the exact point on the rail, an elbow when the label had
   to slide clear of its neighbour, then a riser into the label itself. */
.rcg-artist-timeline__segment-tether {
    position: absolute;
    left: 50%;
    width: 1px;
    height: 22px;
    background: var(--rcg-tether);
    z-index: 3;
}

.rcg-artist-timeline__era-segment.is-above .rcg-artist-timeline__segment-tether {
    bottom: calc(50% + 10px);
}

.rcg-artist-timeline__era-segment.is-below .rcg-artist-timeline__segment-tether {
    top: calc(50% + 10px);
}

.rcg-artist-timeline__segment-tether::before,
.rcg-artist-timeline__segment-tether::after {
    content: "";
    position: absolute;
    background: var(--rcg-tether);
}

.rcg-artist-timeline__segment-tether::before {
    left: min(0px, var(--rcg-seg-shift, 0px));
    width: max(var(--rcg-seg-shift, 0px), calc(-1 * var(--rcg-seg-shift, 0px)));
    height: 1px;
}

.rcg-artist-timeline__segment-tether::after {
    left: var(--rcg-seg-shift, 0px);
    width: 1px;
    height: 10px;
}

.rcg-artist-timeline__era-segment.is-above .rcg-artist-timeline__segment-tether::before { top: 0; }
.rcg-artist-timeline__era-segment.is-above .rcg-artist-timeline__segment-tether::after { top: -10px; }
.rcg-artist-timeline__era-segment.is-below .rcg-artist-timeline__segment-tether::before { bottom: 0; }
.rcg-artist-timeline__era-segment.is-below .rcg-artist-timeline__segment-tether::after { bottom: -10px; }

.rcg-artist-timeline__era-segment:hover .rcg-artist-timeline__segment-tether,
.rcg-artist-timeline__era-segment:hover .rcg-artist-timeline__segment-tether::before,
.rcg-artist-timeline__era-segment:hover .rcg-artist-timeline__segment-tether::after,
.rcg-artist-timeline__era-segment:focus-visible .rcg-artist-timeline__segment-tether,
.rcg-artist-timeline__era-segment:focus-visible .rcg-artist-timeline__segment-tether::before,
.rcg-artist-timeline__era-segment:focus-visible .rcg-artist-timeline__segment-tether::after {
    background: rgba(199, 66, 53, .55);
}

.rcg-artist-timeline__segment-copy {
    position: absolute;
    left: 50%;
    display: flex;
    width: max-content;
    min-width: 116px;
    max-width: 188px;
    flex-direction: column;
    gap: 3px;
    transform: translateX(calc(-50% + var(--rcg-seg-shift, 0px)));
    z-index: 5;
}

.rcg-artist-timeline__era-segment.is-above .rcg-artist-timeline__segment-copy {
    bottom: calc(50% + var(--rcg-seg-gap));
}

.rcg-artist-timeline__era-segment.is-below .rcg-artist-timeline__segment-copy {
    top: calc(50% + var(--rcg-seg-gap));
}

.rcg-artist-timeline__segment-years {
    color: var(--rcg-timeline-red);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__segment-title {
    color: var(--rcg-timeline-ink);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.26;
}

.rcg-artist-timeline__segment-meta {
    color: var(--rcg-timeline-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rcg-artist-timeline__segment-summary {
    display: none;
    overflow: hidden;
    margin-top: 2px;
    color: var(--rcg-timeline-muted);
    font-size: 11.5px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.rcg-artist-timeline__era-segment.is-emphasis-high .rcg-artist-timeline__segment-summary {
    display: -webkit-box;
}

.rcg-artist-timeline__era-segment.is-emphasis-high .rcg-artist-timeline__segment-title {
    font-size: 15px;
}

.rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-copy {
    min-width: 104px;
    max-width: 156px;
}

.rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-title {
    font-size: 12.5px;
    font-weight: 600;
}

.rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-meta {
    display: none;
}

/* The featured milestone stays out of the default view and opens opposite the
   label, so the preview never covers the chronology it belongs to. */
.rcg-artist-timeline__segment-preview {
    position: absolute;
    left: 50%;
    display: flex;
    width: 266px;
    gap: 11px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(41, 49, 61, .12);
    border-radius: 14px;
    box-shadow: 0 22px 48px rgba(33, 40, 51, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(-50% + var(--rcg-seg-shift, 0px))) translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 40;
    pointer-events: none;
}

.rcg-artist-timeline__era-segment.is-above .rcg-artist-timeline__segment-preview {
    top: calc(50% + 30px);
}

.rcg-artist-timeline__era-segment.is-below .rcg-artist-timeline__segment-preview {
    bottom: calc(50% + 30px);
}

.rcg-artist-timeline__era-segment:first-of-type .rcg-artist-timeline__segment-preview {
    left: 0;
    transform: translateY(6px);
}

.rcg-artist-timeline__era-segment:last-of-type .rcg-artist-timeline__segment-preview {
    right: 0;
    left: auto;
    transform: translateY(6px);
}

.rcg-artist-timeline__era-segment:hover .rcg-artist-timeline__segment-preview,
.rcg-artist-timeline__era-segment:focus-visible .rcg-artist-timeline__segment-preview {
    opacity: 1;
    visibility: visible;
    transform: translateX(calc(-50% + var(--rcg-seg-shift, 0px))) translateY(0);
}

.rcg-artist-timeline__era-segment:first-of-type:hover .rcg-artist-timeline__segment-preview,
.rcg-artist-timeline__era-segment:first-of-type:focus-visible .rcg-artist-timeline__segment-preview,
.rcg-artist-timeline__era-segment:last-of-type:hover .rcg-artist-timeline__segment-preview,
.rcg-artist-timeline__era-segment:last-of-type:focus-visible .rcg-artist-timeline__segment-preview {
    transform: translateY(0);
}

/* Pointer intent wins over a stale focus ring: without this, returning from an
   era leaves that segment focused, and its preview would hang over the
   chronology alongside whichever era the visitor is now pointing at. */
.rcg-artist-timeline__life-track:hover .rcg-artist-timeline__era-segment:not(:hover) .rcg-artist-timeline__segment-preview {
    opacity: 0;
    visibility: hidden;
}

.rcg-artist-timeline__segment-thumb {
    display: block;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    overflow: hidden;
    background: var(--rcg-timeline-warm);
    border-radius: 10px;
}

.rcg-artist-timeline__segment-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rcg-artist-timeline__segment-preview-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
}

.rcg-artist-timeline__segment-preview-summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rcg-timeline-muted);
    font-size: 11.5px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.rcg-artist-timeline__segment-featured {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    background: var(--rcg-timeline-warm);
    border-left: 3px solid rgba(199, 66, 53, .72);
    border-radius: 0 8px 8px 0;
}

.rcg-artist-timeline__segment-featured small {
    color: var(--rcg-timeline-muted);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.rcg-artist-timeline__segment-featured span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rcg-timeline-ink);
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.rcg-artist-timeline__segment-cue {
    color: var(--rcg-timeline-red);
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.rcg-artist-timeline__segment-cue i {
    font-style: normal;
}

.rcg-artist-timeline__era-list-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 16px;
    color: var(--rcg-timeline-ink);
    background: #fff;
    border: 1px solid rgba(41, 49, 61, .12);
    border-radius: 999px;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.rcg-artist-timeline__era-list-toggle:hover,
.rcg-artist-timeline__era-list-toggle:focus-visible {
    color: #fff !important;
    background: var(--rcg-timeline-red) !important;
    border-color: var(--rcg-timeline-red) !important;
    outline: none;
}

.rcg-artist-timeline__era-list-toggle i {
    font-style: normal;
    transition: transform .18s ease;
}

.rcg-artist-timeline__era-list-toggle.is-open i {
    transform: rotate(180deg);
}

.rcg-artist-timeline__era-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.rcg-artist-timeline__era-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 13px 15px;
    color: var(--rcg-timeline-ink);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(41, 49, 61, .1);
    border-radius: 14px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rcg-artist-timeline__era-card:hover,
.rcg-artist-timeline__era-card:focus-visible {
    background: #fff !important;
    border-color: rgba(199, 66, 53, .34) !important;
    color: var(--rcg-timeline-ink) !important;
    box-shadow: 0 12px 26px rgba(33, 40, 51, .1);
    outline: none;
    transform: translateY(-2px);
}

.rcg-artist-timeline__era-card.is-active {
    border-color: rgba(199, 66, 53, .5);
    background: #fff;
}

.rcg-artist-timeline__era-index {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    color: #fff;
    background: var(--rcg-timeline-red);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.rcg-artist-timeline__era-card-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.rcg-artist-timeline__era-years {
    color: var(--rcg-timeline-red);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__era-title {
    color: var(--rcg-timeline-ink);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 14px;
    line-height: 1.25;
}

.rcg-artist-timeline__era-summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rcg-timeline-muted);
    font-size: 11.5px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.rcg-artist-timeline__era-card-aside {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: var(--rcg-timeline-muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rcg-artist-timeline__era-card-aside i {
    color: var(--rcg-timeline-red);
    font-size: 16px;
    font-style: normal;
}

/* ------------------------------------------------------------------ *
 * Level 2 — selected era
 * ------------------------------------------------------------------ */

.rcg-artist-timeline__era-detail {
    position: relative;
}

/* The era band is the timeline's own header, not a card sitting above it: it
   shares the container, and the hairline is all that separates identity from
   orientation from controls from the chronology itself. */
.rcg-artist-timeline__focus-head {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 18px 11px;
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(41, 49, 61, .09);
}

.rcg-artist-timeline__focus-bar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rcg-artist-timeline__back {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 15px;
    color: var(--rcg-timeline-ink);
    background: var(--rcg-timeline-warm);
    border: 1px solid rgba(41, 49, 61, .1);
    border-radius: 999px;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.rcg-artist-timeline__back:hover,
.rcg-artist-timeline__back:focus-visible {
    color: #fff !important;
    background: var(--rcg-timeline-red) !important;
    border-color: var(--rcg-timeline-red) !important;
    outline: none;
    transform: translateX(-2px);
}

.rcg-artist-timeline__focus-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.rcg-artist-timeline__focus-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.rcg-artist-timeline__focus-position {
    color: var(--rcg-timeline-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__focus-copy h3 {
    margin: 0;
    color: var(--rcg-timeline-ink);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
}

.rcg-artist-timeline__focus-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--rcg-timeline-red);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__focus-summary {
    display: -webkit-box;
    overflow: hidden;
    max-width: 780px;
    margin: 3px 0 0;
    color: var(--rcg-timeline-muted);
    font-size: 12.5px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.rcg-artist-timeline__focus-nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.rcg-artist-timeline__era-step {
    display: inline-flex;
    min-height: 40px;
    max-width: 168px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 11px;
    color: var(--rcg-timeline-ink);
    background: transparent;
    border: 1px solid rgba(41, 49, 61, .1);
    border-radius: 12px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.rcg-artist-timeline__era-step.is-next {
    text-align: right;
}

/* The colour is stated even though it does not change: this hover keeps a pale
   blush fill, and without an explicit colour the theme's white hover text won
   and the label disappeared into the background. */
.rcg-artist-timeline__era-step:hover:not(:disabled),
.rcg-artist-timeline__era-step:focus-visible:not(:disabled) {
    background: var(--rcg-timeline-blush) !important;
    border-color: rgba(199, 66, 53, .34) !important;
    color: var(--rcg-timeline-ink) !important;
    outline: none;
}

.rcg-artist-timeline__era-step:disabled {
    opacity: .34;
    cursor: not-allowed;
}

.rcg-artist-timeline__era-step-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

/* Stretch, not flex-end: an end-aligned column sizes its children to their
   content, so the nowrap era name escaped the button instead of truncating.
   The right alignment comes from text-align on .is-next. */
.rcg-artist-timeline__era-step.is-next .rcg-artist-timeline__era-step-copy {
    align-items: stretch;
}

.rcg-artist-timeline__era-step-copy small {
    color: var(--rcg-timeline-muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.rcg-artist-timeline__era-step-copy strong {
    overflow: hidden;
    color: var(--rcg-timeline-ink);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Full-life minimap — the orientation row of the era band. */
.rcg-artist-timeline__minimap {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 9px;
    border-top: 1px solid rgba(41, 49, 61, .07);
}

.rcg-artist-timeline__minimap-cap {
    flex: 0 0 auto;
    color: var(--rcg-timeline-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__minimap-track {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: flex-end;
    gap: 3px;
}

.rcg-artist-timeline__minimap-era {
    position: relative;
    flex: 1 1 0;
    flex-grow: var(--rcg-era-weight, 100);
    min-width: 8px;
    min-height: 34px;
    margin: 0;
    padding: 18px 0 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.rcg-artist-timeline__minimap-bar {
    display: block;
    height: 6px;
    background: rgba(41, 49, 61, .16);
    border-radius: 999px;
    transition: background .18s ease, height .18s ease;
}

.rcg-artist-timeline__minimap-era:hover .rcg-artist-timeline__minimap-bar,
.rcg-artist-timeline__minimap-era:focus-visible .rcg-artist-timeline__minimap-bar {
    background: rgba(199, 66, 53, .48);
}

.rcg-artist-timeline__minimap-era:focus-visible {
    outline: 3px solid rgba(199, 66, 53, .3);
    outline-offset: 2px;
    border-radius: 8px;
}

.rcg-artist-timeline__minimap-era.is-active .rcg-artist-timeline__minimap-bar {
    height: 10px;
    background: var(--rcg-timeline-red);
}

.rcg-artist-timeline__minimap-label {
    position: absolute;
    top: 0;
    left: 50%;
    color: var(--rcg-timeline-red);
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .18s ease;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.rcg-artist-timeline__minimap-era.is-active .rcg-artist-timeline__minimap-label,
.rcg-artist-timeline__minimap-era:hover .rcg-artist-timeline__minimap-label,
.rcg-artist-timeline__minimap-era:focus-visible .rcg-artist-timeline__minimap-label {
    opacity: 1;
}

.rcg-artist-timeline__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 12px 8px 18px;
    background: rgba(255, 255, 255, .5);
    border-bottom: 1px solid rgba(41, 49, 61, .08);
}

/* Labelled, because the era band directly above states the era's own range and
   an unlabelled second range would read as a duplicate rather than as the
   zoom-dependent slice actually on screen. */
.rcg-artist-timeline__range-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

.rcg-artist-timeline__range-copy span {
    color: var(--rcg-timeline-muted);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.rcg-artist-timeline__range-copy strong {
    color: var(--rcg-timeline-ink);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rcg-artist-timeline__step-controls,
.rcg-artist-timeline__zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(41, 49, 61, .1);
    border-radius: 999px;
}

.rcg-artist-timeline__control {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 7px 13px;
    color: var(--rcg-timeline-ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.rcg-artist-timeline__control--icon {
    width: 34px;
    padding: 0;
    font-size: 19px;
    line-height: 1;
}

.rcg-artist-timeline__control:hover:not(:disabled),
.rcg-artist-timeline__control:focus-visible:not(:disabled) {
    color: #fff !important;
    background: var(--rcg-timeline-red) !important;
    outline: none;
}

.rcg-artist-timeline__control:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.rcg-artist-timeline__control:active:not(:disabled) {
    transform: scale(.96);
}

.rcg-artist-timeline__zoom-output {
    min-width: 46px;
    color: var(--rcg-timeline-muted);
    font-size: 11px;
    font-weight: 850;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Focused event canvas
 * ------------------------------------------------------------------ */

.rcg-artist-timeline__viewport {
    position: relative;
    width: 100%;
    min-height: var(--rcg-timeline-stage-height);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(199, 66, 53, .42) transparent;
    scrollbar-width: thin;
    cursor: grab;
    touch-action: pan-y;
    /* The canvas reserves only the lanes each era needs, so its height changes
       between eras. Easing that change keeps the axis from snapping to a new
       position when the visitor steps from a sparse era to a dense one. */
    transition: min-height .34s cubic-bezier(.2, .7, .3, 1);
}

.rcg-artist-timeline__viewport:focus-visible {
    outline: 3px solid rgba(199, 66, 53, .24);
    outline-offset: -3px;
}

.rcg-artist-timeline__viewport.is-panning {
    cursor: grabbing;
    user-select: none;
}

.rcg-artist-timeline__stage {
    position: relative;
    width: 100%;
    min-width: 100%;
    height: var(--rcg-timeline-stage-height);
    transition: height .34s cubic-bezier(.2, .7, .3, 1);
}

.rcg-artist-timeline__track {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.rcg-artist-timeline__axis {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 4px;
    background: linear-gradient(90deg, rgba(41, 49, 61, .11), rgba(41, 49, 61, .32), rgba(41, 49, 61, .11));
    border-radius: 999px;
    transform: translateY(-50%);
    z-index: 4;
}

.rcg-artist-timeline__ticks {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.rcg-artist-timeline__tick {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 1px;
}

.rcg-artist-timeline__tick i {
    position: absolute;
    top: -9px;
    left: 0;
    width: 1px;
    height: 18px;
    background: rgba(41, 49, 61, .22);
}

/* Cleared past the largest marker ring: a milestone often falls exactly on
   the first or last year of its era, and would otherwise sit on the label. */
.rcg-artist-timeline__tick b {
    position: absolute;
    top: 26px;
    left: 0;
    color: rgba(41, 49, 61, .48);
    font-size: 10px;
    font-weight: 780;
    transform: translateX(-50%);
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__events {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.rcg-artist-timeline__node {
    --rcg-marker-size: 19px;
    position: absolute;
    top: 50%;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    color: var(--rcg-timeline-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
    transform: translateX(var(--rcg-node-offset));
    cursor: pointer;
    z-index: 28;
}

/* A decorative dot is not a click target. This is the real one. */
.rcg-artist-timeline__node-hit {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.rcg-artist-timeline__node.is-major {
    --rcg-marker-size: 27px;
    z-index: 60;
}

.rcg-artist-timeline__node.is-standard {
    --rcg-marker-size: 19px;
    z-index: 42;
}

.rcg-artist-timeline__node.is-minor {
    --rcg-marker-size: 13px;
    z-index: 24;
}

.rcg-artist-timeline__node:hover,
.rcg-artist-timeline__node:focus-visible,
.rcg-artist-timeline__node.is-active {
    z-index: 120;
}

.rcg-artist-timeline__node-stem {
    position: absolute;
    left: 0;
    width: 3px;
    height: var(--rcg-node-distance);
    background: var(--rcg-timeline-node);
    border-radius: 999px;
    transform: translateX(-50%);
    transition: background .18s ease, width .18s ease, opacity .18s ease;
    pointer-events: none;
}

.rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-stem {
    width: 5px;
}

.rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-stem {
    width: 2px;
    opacity: .7;
}

.rcg-artist-timeline__node.is-above .rcg-artist-timeline__node-stem {
    bottom: 0;
}

.rcg-artist-timeline__node.is-below .rcg-artist-timeline__node-stem {
    top: 0;
}

.rcg-artist-timeline__node-marker {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: var(--rcg-marker-size);
    height: var(--rcg-marker-size);
    place-items: center;
    background: #fff;
    border: 3px solid var(--rcg-timeline-node);
    border-radius: 999px;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, .8), 0 7px 18px rgba(41, 49, 61, .1);
    transform: translate(-50%, -50%);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    pointer-events: none;
}

.rcg-artist-timeline__node-marker i {
    width: 5px;
    height: 5px;
    background: var(--rcg-timeline-red);
    border-radius: 999px;
}

.rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-marker {
    border-width: 5px;
    border-color: var(--rcg-timeline-red);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .92), 0 10px 25px rgba(41, 49, 61, .14);
}

.rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-marker i {
    width: 7px;
    height: 7px;
}

.rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-marker {
    border-width: 2px;
    border-color: rgba(36, 33, 23, .6);
}

.rcg-artist-timeline__node-label {
    position: absolute;
    left: 0;
    z-index: 3;
    display: flex;
    width: max-content;
    max-width: 190px;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid rgba(41, 49, 61, .11);
    border-radius: 10px;
    box-shadow: 0 9px 22px rgba(41, 49, 61, .075);
    opacity: 1;
    transform: translateX(-50%);
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rcg-artist-timeline__node.is-above .rcg-artist-timeline__node-label {
    bottom: calc(var(--rcg-node-distance) + 18px);
}

.rcg-artist-timeline__node.is-below .rcg-artist-timeline__node-label {
    top: calc(var(--rcg-node-distance) + 18px);
}

.rcg-artist-timeline__node-year {
    color: var(--rcg-timeline-red);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__node-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rcg-timeline-ink);
    font-size: 11px;
    font-weight: 760;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.rcg-artist-timeline__node-cue {
    display: none;
    color: var(--rcg-timeline-red);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rcg-artist-timeline__node-cue i {
    font-style: normal;
}

.rcg-artist-timeline__node:hover .rcg-artist-timeline__node-cue,
.rcg-artist-timeline__node:focus-visible .rcg-artist-timeline__node-cue,
.rcg-artist-timeline__node.is-active .rcg-artist-timeline__node-cue {
    display: block;
}

/* Featured milestone: largest marker, its own artwork, strongest label. */
.rcg-artist-timeline__node-thumb {
    display: block;
    width: 46px;
    height: 46px;
    overflow: hidden;
    background: var(--rcg-timeline-warm);
    border-radius: 8px;
}

.rcg-artist-timeline__node-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rcg-artist-timeline__node.has-thumb .rcg-artist-timeline__node-label {
    display: grid;
    grid-template-areas:
        "thumb year"
        "thumb title"
        "cue cue";
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    align-items: start;
}

.rcg-artist-timeline__node.has-thumb .rcg-artist-timeline__node-thumb { grid-area: thumb; }
.rcg-artist-timeline__node.has-thumb .rcg-artist-timeline__node-year { grid-area: year; }
.rcg-artist-timeline__node.has-thumb .rcg-artist-timeline__node-title { grid-area: title; }
.rcg-artist-timeline__node.has-thumb .rcg-artist-timeline__node-cue { grid-area: cue; }

.rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-label {
    max-width: 218px;
    padding: 10px 12px;
    border-color: rgba(199, 66, 53, .26);
    box-shadow: 0 15px 34px rgba(41, 49, 61, .12);
}

.rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-year {
    font-size: 14px;
}

.rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-title {
    font-size: 12px;
    font-weight: 850;
}

/* Supporting milestone: the date stays, the title is revealed on demand. */
.rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-label {
    padding: 5px 8px;
    background: rgba(255, 255, 255, .86);
    box-shadow: none;
}

.rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-year {
    color: var(--rcg-timeline-muted);
    font-size: 11px;
    font-weight: 850;
}

.rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-title {
    display: none;
}

.rcg-artist-timeline.is-detail-zoom .rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-title,
.rcg-artist-timeline__node.is-minor:hover .rcg-artist-timeline__node-title,
.rcg-artist-timeline__node.is-minor:focus-visible .rcg-artist-timeline__node-title,
.rcg-artist-timeline__node.is-minor.is-active .rcg-artist-timeline__node-title {
    display: -webkit-box;
}

.rcg-artist-timeline.is-settling .rcg-artist-timeline__node-label {
    opacity: 0;
    transition: none;
}

.rcg-artist-timeline .rcg-artist-timeline__node.is-label-collapsed:not(:hover):not(:focus-visible):not(.is-active) .rcg-artist-timeline__node-label {
    opacity: 0;
    pointer-events: none;
}

/* A hidden label must not leave its stem reaching into empty space — the
   milestone becomes a short tick until it is hovered, focused or opened. */
.rcg-artist-timeline .rcg-artist-timeline__node.is-label-collapsed:not(:hover):not(:focus-visible):not(.is-active) .rcg-artist-timeline__node-stem {
    height: 15px;
    opacity: .5;
}

.rcg-artist-timeline__node:hover .rcg-artist-timeline__node-marker,
.rcg-artist-timeline__node:focus-visible .rcg-artist-timeline__node-marker,
.rcg-artist-timeline__node.is-active .rcg-artist-timeline__node-marker {
    background: #fff;
    border-color: var(--rcg-timeline-red);
    box-shadow: 0 0 0 10px rgba(199, 66, 53, .12), 0 12px 28px rgba(41, 49, 61, .16);
    transform: translate(-50%, -50%) scale(1.14);
}

.rcg-artist-timeline__node:hover .rcg-artist-timeline__node-stem,
.rcg-artist-timeline__node:focus-visible .rcg-artist-timeline__node-stem,
.rcg-artist-timeline__node.is-active .rcg-artist-timeline__node-stem {
    background: var(--rcg-timeline-red);
}

.rcg-artist-timeline__node:hover .rcg-artist-timeline__node-label,
.rcg-artist-timeline__node:focus-visible .rcg-artist-timeline__node-label,
.rcg-artist-timeline__node.is-active .rcg-artist-timeline__node-label {
    opacity: 1;
    border-color: rgba(199, 66, 53, .32);
    box-shadow: 0 16px 38px rgba(41, 49, 61, .15);
    transform: translateX(-50%) translateY(-2px);
}

.rcg-artist-timeline__node:focus-visible .rcg-artist-timeline__node-marker {
    outline: 3px solid rgba(199, 66, 53, .34);
    outline-offset: 5px;
}

/* Keep labels for the first and last years inside the viewport. */
.rcg-artist-timeline__node.is-edge-start .rcg-artist-timeline__node-label {
    left: 0;
    transform: none;
}

.rcg-artist-timeline__node.is-edge-end .rcg-artist-timeline__node-label {
    right: 0;
    left: auto;
    transform: none;
}

.rcg-artist-timeline__node.is-edge-start:hover .rcg-artist-timeline__node-label,
.rcg-artist-timeline__node.is-edge-start:focus-visible .rcg-artist-timeline__node-label,
.rcg-artist-timeline__node.is-edge-start.is-active .rcg-artist-timeline__node-label,
.rcg-artist-timeline__node.is-edge-end:hover .rcg-artist-timeline__node-label,
.rcg-artist-timeline__node.is-edge-end:focus-visible .rcg-artist-timeline__node-label,
.rcg-artist-timeline__node.is-edge-end.is-active .rcg-artist-timeline__node-label {
    transform: translateY(-2px);
}

/* Other labels step back while a story is open. */
.rcg-artist-timeline.is-panel-open .rcg-artist-timeline__node:not(.is-active) .rcg-artist-timeline__node-label {
    opacity: .55;
}

.rcg-artist-timeline__hint {
    max-width: 850px;
    margin: 11px auto 0;
    color: var(--rcg-timeline-muted);
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

/* The hint follows the frame's state. Zoom and wheel guidance is also
   meaningless on the vertical phone layout, which has neither, so each pointer
   type gets the instruction that applies to it. */
.rcg-artist-timeline__hint--pointer,
.rcg-artist-timeline__hint--touch {
    display: none;
}

.rcg-artist-timeline.is-era-open .rcg-artist-timeline__hint--eras {
    display: none;
}

.rcg-artist-timeline.is-era-open .rcg-artist-timeline__hint--pointer {
    display: inline;
}

/* ------------------------------------------------------------------ *
 * Level 3 — event story
 * ------------------------------------------------------------------ */

.rcg-artist-timeline__details {
    position: static;
}

.rcg-artist-timeline__panel {
    position: absolute;
    top: 120px;
    right: 18px;
    z-index: 1200;
    display: flex;
    width: min(420px, calc(100% - 32px));
    max-height: min(430px, calc(100vh - 140px));
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(41, 49, 61, .14);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(24, 29, 37, .25);
    animation: rcg-timeline-panel-in .2s ease both;
}

.rcg-artist-timeline__panel-topline {
    display: flex;
    min-height: 52px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 11px 12px 11px 18px;
    background: #fff;
    border-bottom: 1px solid rgba(41, 49, 61, .08);
    cursor: grab;
    touch-action: none;
}

.rcg-artist-timeline__panel-topline:active {
    cursor: grabbing;
}

.rcg-artist-timeline__sheet-grip {
    display: none;
    width: 100%;
    height: 4px;
}

.rcg-artist-timeline__sheet-grip::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto;
    background: rgba(41, 49, 61, .22);
    border-radius: 999px;
}

.rcg-artist-timeline__panel-topline-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.rcg-artist-timeline__panel-eyebrow {
    margin-bottom: 2px;
    font-size: 9px;
}

.rcg-artist-timeline__panel-year {
    display: block;
    color: var(--rcg-timeline-red);
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.rcg-artist-timeline__drag-cue {
    color: rgba(41, 49, 61, .36);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -3px;
    transform: rotate(90deg);
}

.rcg-artist-timeline__close {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin: 0;
    padding: 0;
    place-items: center;
    color: var(--rcg-timeline-ink);
    background: #fff;
    border: 1px solid rgba(41, 49, 61, .14);
    border-radius: 999px;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.rcg-artist-timeline__close:hover,
.rcg-artist-timeline__close:focus-visible {
    color: #fff !important;
    background: var(--rcg-timeline-red) !important;
    border-color: var(--rcg-timeline-red) !important;
    outline: none;
}

.rcg-artist-timeline__panel-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(199, 66, 53, .38) transparent;
    scrollbar-width: thin;
}

.rcg-artist-timeline__image {
    height: 140px;
    margin: 0;
    overflow: hidden;
    background: var(--rcg-timeline-warm);
}

.rcg-artist-timeline__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rcg-artist-timeline__panel-content {
    --rcg-panel-drag-gutter: 32px;
    position: relative;
    padding: 16px 38px 20px;
}

/* Keep the story text selectable and scrollable while turning the blank side
   padding into a much taller grab surface. The pseudo-elements stay entirely
   inside that padding, so links and copy remain untouched. */
.rcg-artist-timeline__panel-content::before,
.rcg-artist-timeline__panel-content::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: var(--rcg-panel-drag-gutter);
    cursor: grab;
}

.rcg-artist-timeline__panel-content::before { left: 0; }
.rcg-artist-timeline__panel-content::after { right: 0; }

.rcg-artist-timeline__panel-content:active::before,
.rcg-artist-timeline__panel-content:active::after {
    cursor: grabbing;
}

/* The importance chip is hidden from view but kept in the accessibility tree.
   Marker size and colour are the only other cues to a milestone's importance,
   and colour alone must not carry it — so this stays available to a screen
   reader rather than being removed outright. */
.rcg-artist-timeline__panel-tier {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.rcg-artist-timeline__panel-tier.is-major {
    color: var(--rcg-timeline-red-dark);
    background: var(--rcg-timeline-blush);
    border-color: rgba(199, 66, 53, .26);
}

.rcg-artist-timeline__panel h3 {
    margin: 0 0 18px;
    color: var(--rcg-timeline-ink);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
    line-height: 1.2;
}

.rcg-artist-timeline__summary {
    margin: 0 0 14px;
    color: var(--rcg-timeline-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.55;
}

.rcg-artist-timeline__story {
    color: var(--rcg-timeline-ink);
    font-size: 14px;
    line-height: 1.68;
}

.rcg-artist-timeline__story > :first-child { margin-top: 0; }
.rcg-artist-timeline__story > :last-child { margin-bottom: 0; }

.rcg-artist-timeline__link {
    display: inline-flex;
    margin-top: 18px;
    padding: 10px 15px;
    align-items: center;
    color: #fff;
    background: var(--rcg-timeline-red);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: uppercase;
}

.rcg-artist-timeline__link:hover,
.rcg-artist-timeline__link:focus-visible {
    color: #fff;
    background: var(--rcg-timeline-red-dark);
}

.rcg-artist-timeline__panel-nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid rgba(41, 49, 61, .08);
}

.rcg-artist-timeline__panel-step {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 14px;
    color: var(--rcg-timeline-ink);
    background: var(--rcg-timeline-warm);
    border: 1px solid rgba(41, 49, 61, .1);
    border-radius: 999px;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.rcg-artist-timeline__panel-step:hover:not(:disabled),
.rcg-artist-timeline__panel-step:focus-visible:not(:disabled) {
    color: #fff !important;
    background: var(--rcg-timeline-red) !important;
    border-color: var(--rcg-timeline-red) !important;
    outline: none;
}

.rcg-artist-timeline__panel-step:disabled {
    opacity: .34;
    cursor: not-allowed;
}

.rcg-artist-timeline--empty {
    padding: 18px 22px;
    background: var(--rcg-timeline-warm);
    border-radius: 12px;
}

@keyframes rcg-timeline-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rcg-timeline-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1180px) {
    .rcg-artist-timeline {
        --rcg-life-height: 390px;
    }

    .rcg-artist-timeline__segment-copy {
        min-width: 104px;
        max-width: 158px;
    }

    .rcg-artist-timeline__era-segment.is-emphasis-high .rcg-artist-timeline__segment-title {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .rcg-artist-timeline__life {
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }

    .rcg-artist-timeline__life-track {
        min-width: 900px;
    }

    .rcg-artist-timeline__overview-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .rcg-artist-timeline__era-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .rcg-artist-timeline__toolbar {
        flex-wrap: wrap;
        padding-left: 14px;
    }
}

@media (max-width: 680px) {
    .rcg-artist-timeline {
        --rcg-timeline-stage-height: 350px;
    }

    /* Keep the overview band readable on narrow screens. The action stays on
       the right while the date range and milestone count are allowed to wrap
       inside their own column instead of disappearing underneath the button. */
    .rcg-artist-timeline__band {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "kicker toggle"
            "meta toggle";
        column-gap: 10px;
        row-gap: 4px;
        align-items: center;
        padding: 12px 12px 11px 14px;
    }

    .rcg-artist-timeline__band-kicker {
        grid-area: kicker;
        min-width: 0;
    }

    .rcg-artist-timeline__band-meta {
        grid-area: meta;
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        gap: 3px 6px;
        line-height: 1.2;
        letter-spacing: .045em;
    }

    .rcg-artist-timeline__band-meta strong,
    .rcg-artist-timeline__band-meta > span:last-child {
        white-space: nowrap;
    }

    .rcg-artist-timeline__era-list-toggle {
        grid-area: toggle;
        justify-self: end;
        align-self: center;
        min-height: 38px;
        padding: 8px 12px;
        gap: 6px;
        font-size: 10px;
        letter-spacing: .045em;
        white-space: nowrap;
    }

    .rcg-artist-timeline__head {
        margin-bottom: 18px;
        text-align: left;
    }

    .rcg-artist-timeline__head p {
        margin-left: 0;
    }

    .rcg-artist-timeline__overview {
        padding: 18px 16px;
        border-radius: 18px;
    }

    /* Mobile keeps a chronology, but a vertical one. */
    .rcg-artist-timeline__life {
        display: block;
        overflow: visible;
        padding-bottom: 0;
    }

    .rcg-artist-timeline__life-cap {
        display: block;
        padding-left: 30px;
    }

    .rcg-artist-timeline__life-cap.is-start { margin-bottom: 4px; }
    .rcg-artist-timeline__life-cap.is-end { margin-top: 4px; }

    .rcg-artist-timeline__life-track {
        min-width: 0;
        height: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .rcg-artist-timeline__life-rail {
        top: 0;
        right: auto;
        bottom: 0;
        left: 10px;
        width: 3px;
        height: auto;
        background: linear-gradient(180deg, rgba(41, 49, 61, .1), rgba(41, 49, 61, .28) 6%, rgba(41, 49, 61, .28) 94%, rgba(41, 49, 61, .1));
        transform: none;
    }

    /* The vertical list stacks each era in its own row with no sideways label
       shift, so the whole row is a safe tap target again. */
    .rcg-artist-timeline__era-segment,
    .rcg-artist-timeline__era-segment.is-above,
    .rcg-artist-timeline__era-segment.is-below {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 11px 4px 11px 34px;
        pointer-events: auto;
    }

    .rcg-artist-timeline__segment-band::before {
        content: none;
    }

    .rcg-artist-timeline__life-track:hover .rcg-artist-timeline__era-segment:not(:hover),
    .rcg-artist-timeline__life-track:has(.rcg-artist-timeline__era-segment:focus-visible) .rcg-artist-timeline__era-segment:not(:focus-visible) {
        opacity: 1;
    }

    .rcg-artist-timeline__segment-band {
        top: 12px;
        right: auto;
        bottom: 12px;
        left: 5px;
        width: 13px;
        height: auto;
        transform: none;
    }

    .rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-band,
    .rcg-artist-timeline__era-segment.is-emphasis-high .rcg-artist-timeline__segment-band,
    .rcg-artist-timeline__era-segment:hover .rcg-artist-timeline__segment-band,
    .rcg-artist-timeline__era-segment:focus-visible .rcg-artist-timeline__segment-band,
    .rcg-artist-timeline__era-segment.is-recent .rcg-artist-timeline__segment-band {
        width: 13px;
        height: auto;
    }

    .rcg-artist-timeline__segment-node {
        /* The mobile chronology is a vertical era band, so place each era's
           marker at the true centre of its band rather than near the top. */
        top: 50%;
        left: 11.5px;
    }

    .rcg-artist-timeline__segment-tether,
    .rcg-artist-timeline__segment-preview {
        display: none;
    }

    .rcg-artist-timeline__era-segment.is-above .rcg-artist-timeline__segment-copy,
    .rcg-artist-timeline__era-segment.is-below .rcg-artist-timeline__segment-copy {
        position: static;
        top: auto;
        bottom: auto;
        width: auto;
        min-width: 0;
        max-width: none;
        transform: none;
    }

    .rcg-artist-timeline__segment-summary,
    .rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-meta {
        display: -webkit-box;
    }

    .rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-meta {
        display: block;
    }

    .rcg-artist-timeline__segment-title,
    .rcg-artist-timeline__era-segment.is-emphasis-high .rcg-artist-timeline__segment-title,
    .rcg-artist-timeline__era-segment.is-emphasis-quiet .rcg-artist-timeline__segment-title {
        font-size: 15px;
    }

    /* Era header stacks — its three desktop columns cannot share a phone row. */
    .rcg-artist-timeline__focus-head {
        padding: 12px 14px;
    }

    .rcg-artist-timeline__focus-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .rcg-artist-timeline__back {
        justify-self: start;
    }

    .rcg-artist-timeline__focus-line {
        display: block;
    }

    .rcg-artist-timeline__focus-position {
        display: block;
        margin-bottom: 3px;
    }

    .rcg-artist-timeline__focus-copy h3 {
        font-size: 1.3rem;
    }

    .rcg-artist-timeline__focus-meta {
        margin-top: 4px;
    }

    .rcg-artist-timeline__focus-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .rcg-artist-timeline__era-step,
    .rcg-artist-timeline__era-step.is-next {
        min-width: 0;
        max-width: none;
    }

    .rcg-artist-timeline__era-step.is-next {
        justify-content: flex-end;
    }

    /* Without this the nowrap era name sets the column's minimum width and the
       two-column grid pushes its second button off the screen. */
    .rcg-artist-timeline__era-step-copy,
    .rcg-artist-timeline__era-step-copy strong {
        min-width: 0;
        max-width: 100%;
    }

    .rcg-artist-timeline__minimap-cap {
        display: none;
    }

    /* ---- Vertical event timeline -------------------------------------- *
     * A phone cannot usefully pan and zoom a horizontal canvas, so the era's
     * milestones become a vertical list of full-width rows. The markup and the
     * layout pass are unchanged; the absolute positioning the canvas relies on
     * is simply released here, which is why the inline values JS writes are
     * overridden rather than removed.
     * ------------------------------------------------------------------- */

    .rcg-artist-timeline__toolbar {
        gap: 8px;
        padding: 8px 12px;
    }

    .rcg-artist-timeline__zoom-controls {
        display: none;
    }

    .rcg-artist-timeline__step-controls {
        gap: 2px;
    }

    .rcg-artist-timeline__viewport {
        min-height: 0;
        overflow: visible;
        cursor: auto;
        transition: none;
    }

    .rcg-artist-timeline__stage {
        width: 100% !important;
        height: auto !important;
        transition: none;
    }

    .rcg-artist-timeline__track {
        max-width: none !important;
    }

    .rcg-artist-timeline__axis,
    .rcg-artist-timeline__ticks,
    .rcg-artist-timeline__node-stem,
    .rcg-artist-timeline__node-hit {
        display: none;
    }

    .rcg-artist-timeline__events {
        position: relative;
        inset: auto;
        padding: 4px 0;
    }

    /* The rail runs behind the markers instead of across the canvas. */
    .rcg-artist-timeline__events::before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 30px;
        width: 2px;
        background: rgba(41, 49, 61, .16);
        border-radius: 999px;
    }

    .rcg-artist-timeline__node,
    .rcg-artist-timeline__node.is-above,
    .rcg-artist-timeline__node.is-below {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: grid;
        width: 100%;
        height: auto;
        min-height: 56px;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        padding: 11px 14px;
        text-align: left;
        transform: none !important;
        border-bottom: 1px solid rgba(41, 49, 61, .07);
    }

    .rcg-artist-timeline__node:last-child {
        border-bottom: 0;
    }

    .rcg-artist-timeline__node-marker {
        position: relative;
        top: auto;
        left: auto;
        justify-self: center;
        transform: none;
        box-shadow: 0 0 0 5px #fff;
    }

    .rcg-artist-timeline__node:hover .rcg-artist-timeline__node-marker,
    .rcg-artist-timeline__node:focus-visible .rcg-artist-timeline__node-marker,
    .rcg-artist-timeline__node.is-active .rcg-artist-timeline__node-marker {
        transform: none;
    }

    /* The bare selector matters: the vertical layout never assigns is-above or
       is-below, so a modifier-only override would never match. The tier
       modifiers are listed too — each carries its own padding, background and
       grid on the canvas, and they outrank a single-class reset. */
    .rcg-artist-timeline__node-label,
    .rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-label,
    .rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-label,
    .rcg-artist-timeline__node.has-thumb .rcg-artist-timeline__node-label,
    .rcg-artist-timeline__node.is-above .rcg-artist-timeline__node-label,
    .rcg-artist-timeline__node.is-below .rcg-artist-timeline__node-label,
    .rcg-artist-timeline__node.is-edge-start .rcg-artist-timeline__node-label,
    .rcg-artist-timeline__node.is-edge-end .rcg-artist-timeline__node-label {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-width: none;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1 !important;
        grid-template-areas: none;
        grid-template-columns: none;
        transform: none !important;
    }

    /* Every milestone shows its full title here — there is no collision to
       resolve in a single-column list. */
    .rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-title,
    .rcg-artist-timeline.is-settling .rcg-artist-timeline__node-label {
        display: -webkit-box;
        opacity: 1;
    }

    .rcg-artist-timeline__node-year,
    .rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-year,
    .rcg-artist-timeline__node.is-minor .rcg-artist-timeline__node-year {
        font-size: 11px;
    }

    .rcg-artist-timeline__node-title,
    .rcg-artist-timeline__node.is-major .rcg-artist-timeline__node-title {
        font-size: 13.5px;
        -webkit-line-clamp: 3;
    }

    .rcg-artist-timeline__node.is-active {
        background: var(--rcg-timeline-blush);
    }

    .rcg-artist-timeline__node.has-thumb .rcg-artist-timeline__node-thumb {
        display: none;
    }

    .rcg-artist-timeline__hint {
        text-align: left;
    }

    .rcg-artist-timeline.is-era-open .rcg-artist-timeline__hint--pointer {
        display: none;
    }

    .rcg-artist-timeline.is-era-open .rcg-artist-timeline__hint--touch {
        display: inline;
    }

    /* The story becomes a bottom sheet: swipe it down or use the controls. */
    .rcg-artist-timeline__panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10020;
        width: 100%;
        max-height: 78vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -18px 60px rgba(24, 29, 37, .3);
        animation: rcg-timeline-sheet-in .24s ease both;
    }

    /* A fixed child can still be trapped under a transformed/isolation
       stacking context created by Elementor or the theme. JS moves the active
       phone sheet to <body>; this class puts that portaled sheet above all page
       sections while it is open. */
    .rcg-artist-timeline__panel--viewport {
        z-index: 2147483000 !important;
        isolation: isolate;
        background: #fff;
    }

    .rcg-artist-timeline__sheet-grip {
        display: block;
        order: -1;
        flex: 0 0 100%;
        margin-bottom: 2px;
    }

    .rcg-artist-timeline__panel-topline {
        padding: 8px 12px 11px 18px;
    }

    .rcg-artist-timeline__drag-cue {
        display: none;
    }

    .rcg-artist-timeline__image {
        height: 132px;
    }

    .rcg-artist-timeline__panel-content {
        --rcg-panel-drag-gutter: 0px;
        padding: 14px 17px 24px;
    }

    .rcg-artist-timeline__panel-nav {
        min-height: 74px;
        padding: 12px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .rcg-artist-timeline__panel-step {
        min-height: 46px;
        padding-inline: 18px;
    }

    .rcg-artist-timeline__panel-content::before,
    .rcg-artist-timeline__panel-content::after {
        display: none;
    }

    /* Astra's back-to-top control lives outside the timeline's stacking
       context. Hide it while a mobile story sheet is open so it can never sit
       over Previous/Next, regardless of theme z-index changes. */
    body.rcg-timeline-panel-open #ast-scroll-top,
    body.rcg-timeline-panel-open .ast-scroll-top-icon.ast-scroll-to-top-right,
    body.rcg-timeline-panel-open .ast-scroll-to-top-right {
        z-index: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcg-artist-timeline *,
    .rcg-artist-timeline *::before,
    .rcg-artist-timeline *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}