/* Chronology shares the profile sheet's scrollport and paper. */
.curator-profile-chronology[hidden],
.curator-profile-content .curator-profile-collection-filters[hidden] { display: none !important; }
.curator-profile-content-tabs { position: relative; }
.curator-profile-tab-indicator {
    position: absolute;
    left: 0;
    bottom: -0.04rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #2d2a26;
    opacity: 0.9;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(0.22, 0.7, 0.2, 1);
}
.curator-profile-content-tabs.has-moving-indicator button::after { display: none; }
.curator-profile-content .curator-profile-content-panel,
.curator-profile-content .curator-profile-collection-filters { transition: opacity 170ms ease; }
.curator-profile-content.is-view-changing .curator-profile-collection-filters { opacity: 0; }
.curator-profile-content.is-chronology-view .curator-profile-collection-filters { display: none; }
.curator-chronology-content {
    --chronology-ink: #302e2a;
    --chronology-muted: var(--you-muted, rgba(48, 46, 42, 0.6));
    --chronology-line: var(--you-line, rgba(48, 46, 42, 0.1));
    container: chronology / inline-size;
    color: var(--chronology-ink);
    padding: 0.5rem 0 3rem;
}
/* The deck is the last thing in the sheet, so it can stay docked through the end. */
.curator-chronology-content:has(.curator-chronology-deck) { padding-bottom: 0; }
.curator-chronology-loading { padding: 1.5rem 0; color: rgba(48, 46, 42, 0.6); font: 400 0.9rem/1.6 Georgia, serif; }
.curator-chronology-loading button { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; font: 500 0.75rem/1.5 var(--rh-sans); cursor: pointer; }
.curator-chronology-intro { max-width: 29rem; padding: 0.8rem 0 1.6rem; }
.curator-chronology-intro p {
    margin: 0 0 0.8rem;
    font: 400 1.06rem/1.5 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -0.033em;
    color: rgba(48, 46, 42, 0.72);
    text-wrap: pretty;
}
.curator-chronology-intro p + p { color: rgba(48, 46, 42, 0.48); font-size: 1rem; }
.curator-chronology-unplaced { margin-bottom: 0.75rem; }
.curator-chronology-pending-rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 2px 0.7rem;
    scroll-snap-type: x proximity;
}
.curator-chronology-pending-rail::-webkit-scrollbar { display: none; }
.curator-chronology-pending {
    flex: 0 0 88px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}
.curator-chronology-art {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    /* Draft and add marks stay within the artwork, beneath the pinned deck and year. */
    isolation: isolate;
    background: rgba(48, 46, 42, 0.055);
}
.curator-chronology-pending > .curator-chronology-art {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
}
.curator-chronology-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.curator-chronology-art img:not([src]) { visibility: hidden; }
.curator-chronology-add {
    position: absolute;
    z-index: 5;
    right: 5px;
    bottom: 5px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--curator-paper);
    color: var(--chronology-ink);
    box-shadow: 0 1px 4px rgba(25, 21, 16, 0.12);
}
.curator-chronology-add svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.curator-chronology-pending-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 500 1rem/1.35 "Cormorant Garamond", Georgia, serif;
}
.curator-chronology-meta {
    font: 400 0.8rem/1.4 var(--rh-sans);
    letter-spacing: -0.01em;
    color: var(--chronology-muted);
}
/* Trailing space lets the final discovery reach the focus line. */
.curator-chronology-timeline { position: relative; padding-top: 0.3rem; margin-bottom: var(--chronology-tail, 0px); }
.curator-chronology-timeline::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 0;
    right: 31px;
    width: 1px;
    background: rgba(48, 46, 42, 0.18);
}
.curator-chronology-year { position: relative; padding-top: 2.5rem; }
.curator-chronology-year + .curator-chronology-year { margin-top: 1rem; }
.curator-chronology-year-label {
    position: sticky;
    z-index: 1;
    top: var(--chronology-sticky-top, 5rem);
    width: 64px;
    margin: -2.5rem 0 0.5rem auto;
    padding: 0.55rem 0;
    background: var(--curator-paper);
    color: var(--chronology-ink);
    font: 600 1.08rem/1 var(--rh-sans);
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: -0.04em;
}
.curator-chronology-year ol { list-style: none; padding: 0; margin: 0; }
.curator-chronology-item { position: relative; padding: 0 80px 2.2rem 0; }
.curator-chronology-card {
    position: relative;
}
.curator-chronology-card::before {
    content: "";
    position: absolute;
    inset: -6px -8px;
    border-radius: 5px;
    background: rgba(48, 46, 42, 0.035);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}
.curator-chronology-item.is-held .curator-chronology-card::before { opacity: 1; }
.has-focus .curator-chronology-card {
    /* Scroll changes emphasis, not the artwork's size or perspective. */
    opacity: calc(0.48 + 0.52 * var(--chronology-presence, 0));
}
.has-focus .curator-chronology-card:focus-within { opacity: 1; }
.curator-chronology-item::after {
    content: "";
    position: absolute;
    top: calc(var(--chronology-marker-y, 22px) - 3.5px);
    right: 28px;
    width: 7px;
    height: 7px;
    box-sizing: border-box;
    border: 1px solid rgba(48, 46, 42, 0.48);
    border-radius: 50%;
    background: var(--curator-paper);
    transition: background 180ms ease;
}
.has-focus .curator-chronology-item.is-current::after { background: var(--chronology-ink); }
.curator-chronology-date { min-height: 44px; display: flex; align-items: center; }
.curator-chronology-date > * {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(48, 46, 42, 0.57);
    font: 500 0.59rem/1.4 var(--rh-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.curator-chronology-date button { cursor: pointer; }
.curator-chronology-date { justify-content: space-between; gap: 1rem; }
.curator-chronology-date.is-repeated { min-height: 0; }
.curator-chronology-date.is-repeated > span {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
.curator-chronology-edit { margin-left: auto; }
html.rhune-native-ios .curator-chronology-edit {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
html.rhune-native-ios [data-chronology-actions] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Artwork leads each discovery at the column's full width; details follow. */
.curator-chronology-page-content { max-width: 420px; }
.curator-chronology-entry { display: block; text-decoration: none; color: inherit; }
.curator-chronology-entry > .curator-chronology-art { width: 100%; }
.curator-chronology-entry-copy { display: grid; gap: 0.2rem; min-width: 0; margin-top: 0.85rem; }
.curator-chronology-title {
    font: 500 1.3rem/1.2 var(--rh-sans);
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
/* Keep the annotation in flow so scrolling never changes the layout. */
.curator-chronology-details {
    margin: 0.85rem 0 0;
    overflow-wrap: anywhere;
}
/* The discovery note: plain body text, read as the record goes on. */
.curator-chronology-note {
    margin: 0 0 0.9rem;
    color: var(--chronology-ink);
    font: 400 0.95rem/1.5 var(--rh-sans);
    letter-spacing: -0.01em;
    white-space: pre-line;
    text-wrap: pretty;
}
.curator-chronology-facts { display: grid; margin: 0; border-top: 1px solid var(--chronology-line); }
.has-focus .curator-chronology-details {
    /* Presence already follows the scroll position each frame. A transition
       would keep restarting during the gesture and trail behind it. */
    opacity: var(--chronology-detail-presence, 0);
}
.has-focus .curator-chronology-card:focus-within .curator-chronology-details {
    opacity: 1;
}
/* Faded details are not tappable; only the focused discovery's controls respond. */
.has-focus .curator-chronology-item:not(.is-current) .curator-chronology-details { pointer-events: none; }
.curator-chronology-facts > div {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--chronology-line);
    font: 400 0.875rem/1.4 var(--rh-sans);
    letter-spacing: -0.01em;
}
.curator-chronology-facts dt { color: var(--chronology-muted); font-size: 0.75rem; letter-spacing: 0; }
.curator-chronology-facts dd { min-width: 0; margin: 0; text-wrap: pretty; }
.curator-chronology-track-play {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
    min-height: 44px;
    margin: -12px 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}
/* On narrow screens the deck carries play and pause; the track name stays tappable. */
.curator-chronology-track-glyph {
    order: -1;
    flex: 0 0 24px;
    display: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    transition: background-color 160ms ease, color 160ms ease;
}
.curator-chronology-track-glyph svg { grid-area: 1 / 1; width: 10px; height: 10px; fill: currentColor; }
.curator-chronology-track-play .is-pause,
.curator-chronology-track-play[aria-pressed="true"] .is-play { display: none; }
.curator-chronology-track-play[aria-pressed="true"] .is-pause { display: block; }
.curator-chronology-track-play[aria-pressed="true"] .curator-chronology-track-glyph {
    border-color: var(--chronology-ink);
    background: var(--chronology-ink);
    color: var(--curator-paper);
}
.curator-chronology-track-play.is-loading .curator-chronology-track-glyph { animation: curator-chronology-loading 1.1s ease-in-out infinite alternate; }
@keyframes curator-chronology-loading { to { opacity: 0.45; } }
/* Apple Music link and preview status for the track, under its title. */
.curator-chronology-track-aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.6rem;
    margin: 0.1rem 0 0;
    color: var(--chronology-muted);
    font-size: 0.75rem;
    letter-spacing: 0;
}
.curator-chronology-track-title + .curator-chronology-track-aside { margin-left: 0; }
.curator-chronology-track-aside > span:empty { display: none; }
.curator-chronology-track-aside a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 28px;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}
.curator-chronology-track-aside svg { width: 11px; height: 11px; margin-top: -2px; }
.curator-chronology-end { display: block; margin-left: auto; margin-right: 27px; height: 1px; width: 9px; background: rgba(48, 46, 42, 0.3); }
.curator-chronology-content :is(button, a):focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Open entries keep the same breathing room within and across years. */
@media (max-width: 1100px) {
    /* Give the first raised year clearance; spacing between entries stays intact. */
    .curator-chronology-timeline { padding-top: 32px; }
    /* Years occupy only the rail, not a full-width gap between discoveries. */
    .curator-chronology-year { padding-top: 0; }
    .curator-chronology-year + .curator-chronology-year { margin-top: 1.5rem; }
    .curator-chronology-year-label {
        box-sizing: border-box;
        height: 32px;
        margin: 0 0 -32px auto;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Lift only the rail label, without moving the discoveries. Offset the
           sticky inset equally so the pinned year still clears navigation. */
        transform: translateY(-32px);
        top: calc(var(--chronology-sticky-top, 5rem) + 32px);
    }
    .curator-chronology-item { padding-bottom: 0; }
    .curator-chronology-item + .curator-chronology-item { margin-top: 1.5rem; }

}

/* Browser fallback for the native arrangement sheet. */
.curator-chronology-dialog {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    width: min(100%, 480px);
    max-height: 88dvh;
    margin: auto auto 0;
    padding: 1.5rem 1.4rem max(1.5rem, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--curator-paper);
    color: #302e2a;
    overscroll-behavior: contain;
    font: 400 0.88rem/1.5 var(--rh-sans);
}
.curator-chronology-dialog::backdrop { background: rgba(0, 0, 0, 0.22); }
.curator-chronology-dialog header { display: flex; justify-content: space-between; align-items: center; }
.curator-chronology-dialog header span { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; }
.curator-chronology-dialog button { color: inherit; font: inherit; cursor: pointer; }
.curator-chronology-dialog header button { border: 0; padding: 12px; background: none; }
.curator-chronology-dialog h2 { margin: 0.8rem 0; font: 500 1.8rem/1.1 "Cormorant Garamond", Georgia, serif; }
.curator-chronology-dialog p { font: 400 0.95rem/1.5 Georgia, serif; }
.curator-chronology-dialog label { display: grid; gap: 6px; margin: 1rem 0; font-size: 0.75rem; }
.curator-chronology-dialog textarea { resize: vertical; line-height: 1.45; }
.curator-chronology-dialog :is(input, select, textarea) { box-sizing: border-box; min-width: 0; width: 100%; padding: 10px 0; color: inherit; border: 0; border-bottom: 1px solid rgba(48, 46, 42, 0.2); border-radius: 0; background: transparent; font: 400 16px/1.5 var(--rh-sans); }
.curator-chronology-dialog [data-date-parts] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.curator-chronology-dialog footer { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.curator-chronology-dialog footer button { min-height: 44px; border: 1px solid rgba(48, 46, 42, 0.18); border-radius: 4px; background: transparent; }
.curator-chronology-dialog footer button[type="submit"] { background: #302e2a; color: #f1efea; }
.curator-chronology-dialog [hidden] { display: none !important; }
.curator-chronology-dialog [role="alert"] { color: #8d3d32; }
.curator-chronology-dialog-note { margin: -0.4rem 0 0; color: rgba(48, 46, 42, 0.6); font: 400 0.8rem/1.45 var(--rh-sans) !important; }
@media (prefers-reduced-motion: reduce) {
    .curator-profile-tab-indicator,
    .curator-profile-content .curator-profile-content-panel,
    .curator-profile-content .curator-profile-collection-filters { transition: none; }
    .curator-chronology-item::after, .curator-chronology-card, .curator-chronology-card::before { transition: none; }
    .has-focus .curator-chronology-card { opacity: 1; }
    .has-focus .curator-chronology-card > .curator-chronology-page-content { opacity: 1; transition: none; }
}

/* One bounded sticky label per consecutive date group. */
.curator-chronology-date-group {
    position: absolute;
    z-index: 1;
    right: 0;
    width: 64px;
    box-sizing: border-box;
    padding-top: var(--chronology-date-lead, 0);
    pointer-events: none;
}
.curator-chronology-precision {
    display: block;
    position: sticky;
    top: calc(var(--chronology-sticky-top, 5rem) + 44px);
    width: 64px;
    box-sizing: border-box;
    padding: 5px 1px;
    background: var(--curator-paper);
    color: var(--chronology-ink);
    font: 500 0.64rem/1.2 var(--rh-sans);
    letter-spacing: -0.02em;
    text-align: center;
    overflow-wrap: anywhere;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}
.curator-chronology-date-group.is-current > .curator-chronology-precision {
    opacity: 1;
}
.curator-chronology-date { justify-content: flex-end; }
.curator-chronology-date:empty,
html.rhune-native-ios .curator-chronology-date { min-height: 0; }
@media (prefers-reduced-motion: reduce) {
    .curator-chronology-precision { transition: none; }
}

.has-focus .curator-chronology-year-label {
    color: rgba(48, 46, 42, 0.38);
    transition: color 180ms ease;
}
.has-focus .is-current-year > .curator-chronology-year-label {
    color: var(--chronology-ink);
}
@media (prefers-reduced-motion: reduce) {
    .has-focus .curator-chronology-year-label { transition: none; }
}

/* Track preview deck: a turntable floating above the tab bar on narrow screens,
   beside the focused discovery where the column leaves room. Tapping it plays
   or pauses. Geometry scales from --s, the plinth's width and height. */
/* Docked, the deck belongs to the whole panel so it stays down from the first discovery. */
.curator-chronology-stage { display: contents; }
.curator-chronology-deck {
    --s: 108px;
    --deck-docked: 1;
    /* The waiting record lies beside the plinth, never under it. */
    --candidate-left: calc(var(--s) * -0.84);
    --deck-plinth: #f5f4f0;
    --deck-soft-drop: 0 0.5px 1px rgba(40, 34, 26, 0.06), 0 calc(var(--s) * 0.05) calc(var(--s) * 0.16) calc(var(--s) * -0.04) rgba(40, 34, 26, 0.12);
    --deck-recess: rgba(63, 60, 57, 0.06);
    --deck-edge: rgba(63, 60, 57, 0.08);
    --deck-maker: #efede8;
    --deck-maker-shade: rgba(63, 60, 57, 0.18);
    --deck-maker-light: rgba(255, 255, 255, 0.95);
    --deck-highlight: rgba(255, 255, 255, 0.9);
    --deck-shadow-near: rgba(40, 34, 26, 0.12);
    --deck-platter: #eceae5;
    --deck-vinyl: #fbfaf8;
    --deck-tint-amount: 8%;
    --deck-groove: rgba(120, 110, 98, 0.07);
    --deck-ring: #efede8;
    --deck-runout-line: rgba(63, 60, 57, 0.07);
    --deck-record-edge: rgba(63, 60, 57, 0.1);
    --deck-sheen-light: rgba(255, 255, 255, 0.5);
    --deck-sheen-dark: rgba(60, 50, 40, 0.06);
    --deck-pivot: radial-gradient(circle at 35% 30%, #fdfcfa, #eeece7 72%);
    --deck-spun: radial-gradient(circle at 38% 32%, #fbfaf8, #d8d5cf 78%);
    --deck-spun-glint: rgba(255, 255, 255, 0.55);
    --deck-spun-shade: rgba(90, 80, 70, 0.08);
    --deck-cap-rim: #fff;
    --deck-arm-shadow: rgba(30, 24, 18, 0.32);
    --deck-arm-lift: rgba(30, 24, 18, 0.2);
    position: sticky;
    z-index: 4;
    bottom: 16px;
    display: block;
    width: fit-content;
    margin: 1.5rem 0 0 auto;
}
body.dark-mode .curator-chronology-deck {
    --deck-plinth: #1c1b1a;
    --deck-soft-drop: 0 0.5px 1px rgba(0, 0, 0, 0.3), 0 calc(var(--s) * 0.05) calc(var(--s) * 0.16) calc(var(--s) * -0.04) rgba(0, 0, 0, 0.45);
    --deck-recess: rgba(255, 255, 255, 0.05);
    --deck-edge: rgba(255, 255, 255, 0.07);
    --deck-maker: #191817;
    --deck-maker-shade: rgba(0, 0, 0, 0.6);
    --deck-maker-light: rgba(255, 255, 255, 0.07);
    --deck-highlight: rgba(255, 255, 255, 0.05);
    --deck-shadow-near: rgba(0, 0, 0, 0.45);
    --deck-platter: #121211;
    --deck-vinyl: #151515;
    --deck-tint-amount: 12%;
    --deck-groove: rgba(255, 255, 255, 0.05);
    --deck-ring: #222;
    --deck-runout-line: rgba(255, 255, 255, 0.07);
    --deck-record-edge: rgba(255, 255, 255, 0.07);
    --deck-sheen-light: rgba(255, 255, 255, 0.1);
    --deck-sheen-dark: rgba(0, 0, 0, 0.3);
    --deck-pivot: radial-gradient(circle at 35% 30%, #2e2d2b, #1e1d1b 72%);
    --deck-spun: radial-gradient(circle at 38% 32%, #c9c6c0, #7d7a75 78%);
    --deck-spun-glint: rgba(255, 255, 255, 0.25);
    --deck-spun-shade: rgba(0, 0, 0, 0.15);
    --deck-cap-rim: #3a3936;
    --deck-arm-shadow: rgba(0, 0, 0, 0.6);
    --deck-arm-lift: rgba(0, 0, 0, 0.45);
}
.curator-chronology-turntable {
    position: relative;
    width: var(--s);
    height: var(--s);
    margin-left: calc(var(--candidate-left) * -1);
}
.curator-chronology-turntable > * { position: absolute; }
.curator-chronology-deck-play {
    inset: 0;
    z-index: 9;
    padding: 0;
    border: 0;
    border-radius: calc(var(--s) * 0.07);
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.curator-chronology-deck-play:disabled { cursor: default; }
.curator-chronology-plinth {
    inset: 0;
    z-index: 2;
    border-radius: calc(var(--s) * 0.07);
    background: var(--deck-plinth);
    box-shadow:
        inset 0 0 0 1px var(--deck-edge),
        inset 0 1px 0 var(--deck-highlight),
        var(--deck-soft-drop);
}
/* Maker's mark pressed into the plinth, level with the pivot in the opposite
   corner. Plinth-coloured, shaped only by a shadowed and a lit edge. */
.curator-chronology-maker {
    position: absolute;
    left: calc(var(--s) * 0.845);
    top: calc(var(--s) * 0.08);
    width: calc(var(--s) * 0.07);
    height: calc(var(--s) * 0.0805);
    filter: drop-shadow(0 -0.5px 0 var(--deck-maker-shade)) drop-shadow(0 0.75px 0 var(--deck-maker-light));
}
.curator-chronology-maker > span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--deck-maker);
    -webkit-mask: url("rhune-curator-mark.webp?v=2") center / contain no-repeat;
    mask: url("rhune-curator-mark.webp?v=2") center / contain no-repeat;
}
.curator-chronology-platter {
    position: absolute;
    left: calc(var(--s) * 0.09);
    top: calc(var(--s) * 0.14);
    width: calc(var(--s) * 0.82);
    height: calc(var(--s) * 0.82);
    border-radius: 50%;
    background: var(--deck-platter);
    box-shadow: inset 0 0 0 0.5px var(--deck-edge), 0 0.5px 1.5px rgba(40, 34, 26, 0.08);
}
/* The platter's recessed centre, as on a real deck. */
.curator-chronology-platter::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px var(--deck-recess);
}
/* Record, after the reference: a still two-lobed sheen beneath turning grooves
   and label, fine ring edges, and a soft ring around the label. */
.curator-chronology-record {
    left: calc(var(--s) * 0.11);
    top: calc(var(--s) * 0.16);
    width: calc(var(--s) * 0.78);
    height: calc(var(--s) * 0.78);
    border-radius: 50%;
    /* A faint tint from the label artwork, like a coloured pressing. */
    background-color: color-mix(in srgb, var(--deck-tint, var(--deck-vinyl)) var(--deck-tint-amount), var(--deck-vinyl));
    box-shadow: 0 0 0 0.5px var(--deck-record-edge), 0 1px 1.5px var(--deck-shadow-near), 0 calc(var(--s) * 0.02) calc(var(--s) * 0.05) rgba(40, 34, 26, 0.09);
}
.curator-chronology-record::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, rgba(40, 30, 20, 0) 86%, rgba(40, 30, 20, 0.035) 100%),
        conic-gradient(from 285deg, rgba(255, 255, 255, 0), var(--deck-sheen-light) 32deg, rgba(255, 255, 255, 0) 70deg, var(--deck-sheen-dark) 108deg, rgba(255, 255, 255, 0) 146deg, var(--deck-sheen-light) 212deg, rgba(255, 255, 255, 0) 250deg, var(--deck-sheen-dark) 288deg, rgba(255, 255, 255, 0) 326deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 58%, #000 62%);
    mask: radial-gradient(circle closest-side, transparent 0 58%, #000 62%);
}
.curator-chronology-disc { position: absolute; inset: 0; border-radius: 50%; }
.curator-chronology-disc::before,
.curator-chronology-disc::after { content: ""; position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--deck-ring); }
.curator-chronology-disc::before { inset: 3%; }
.curator-chronology-disc::after { inset: 14%; }
.curator-chronology-grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    --g: max(1.6px, calc(var(--s) * 0.0071));
    background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0) 0, var(--deck-groove) calc(var(--g) * 0.5), rgba(0, 0, 0, 0) var(--g));
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 61%, #000 62% 94%, transparent 95%);
    mask: radial-gradient(circle closest-side, transparent 0 61%, #000 62% 94%, transparent 95%);
}
.curator-chronology-label {
    position: absolute;
    z-index: 1;
    left: 26.7%;
    top: 26.7%;
    width: 46.6%;
    height: 46.6%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--deck-ring);
    box-shadow: 0 0 0 0.5px var(--deck-runout-line), 0 0 0 calc(var(--s) * 0.028) var(--deck-vinyl), 0 0 0 calc(var(--s) * 0.028 + 0.5px) var(--deck-runout-line);
}
.curator-chronology-label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.curator-chronology-label img:not([src]) { visibility: hidden; }
/* Labels fade in as their artwork arrives rather than popping in; the decks' scripts mark them. */
.curator-chronology-label img { opacity: 0; transition: opacity 0.3s ease; }
.curator-chronology-label img.is-loaded { opacity: 0.92; }
.curator-chronology-label img.is-instant { transition: none; }
.curator-chronology-spindle {
    z-index: 5;
    left: calc(var(--s) * 0.484);
    top: calc(var(--s) * 0.534);
    width: calc(var(--s) * 0.032);
    height: calc(var(--s) * 0.032);
    border-radius: 50%;
    background: linear-gradient(to bottom right, #fbfaf8, #e4e2dd);
    box-shadow: 0 0 0 0.5px rgba(63, 60, 57, 0.15), 0.5px 1px 1px var(--deck-shadow-near);
}
.curator-chronology-record.is-mounted { z-index: 3; opacity: 0; }
/* The platter turns the disc at a steady speed; pausing simply holds it. */
.curator-chronology-record.is-mounted .curator-chronology-disc { animation: curator-chronology-spin 10s linear infinite paused; }
[data-spinning] .curator-chronology-record.is-mounted .curator-chronology-disc { animation-play-state: running; }
@keyframes curator-chronology-spin { to { transform: rotate(1turn); } }
[data-has-record] .curator-chronology-record.is-mounted { opacity: 1; }
.curator-chronology-record.is-mounted.is-leaving { opacity: 0; transition: opacity 260ms ease; }
/* The next record waits beside the plinth until a visitor chooses it. */
.curator-chronology-candidate {
    z-index: 4;
    left: var(--candidate-left);
    top: calc(var(--s) * 0.16);
    width: calc(var(--s) * 0.78);
    height: calc(var(--s) * 0.78);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(var(--s) * 0.06));
    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 280ms;
}
.curator-chronology-candidate > .curator-chronology-record { position: absolute; left: 0; top: 0; }
.curator-chronology-label.is-outgoing { z-index: 2; pointer-events: none; }
/* The waiting record's tint eases between records; the platter's never animates. */
.curator-chronology-candidate > .curator-chronology-record { transition: background-color 260ms ease-out; }
.curator-chronology-candidate.is-present {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 320ms cubic-bezier(0.2, 0, 0.2, 1), transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.curator-chronology-candidate.is-mounting {
    z-index: 4;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: translateX(calc(var(--s) * 0.11 - var(--candidate-left)));
    transition: transform 480ms cubic-bezier(0.35, 0.05, 0.2, 1);
}
.curator-chronology-candidate.is-settling { transition: none; }
/* Picked up from beside the plinth, carried over its edge and set down. The
   deeper shadow is a separate layer that only fades. */
.curator-chronology-candidate::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: calc(var(--s) * 0.015) calc(var(--s) * 0.025) calc(var(--s) * 0.05) rgba(40, 34, 26, 0.16);
    opacity: 0;
}
.curator-chronology-candidate.is-mounting > .curator-chronology-record { animation: curator-chronology-carry 480ms cubic-bezier(0.35, 0.05, 0.2, 1) both; }
.curator-chronology-candidate.is-mounting::before { animation: curator-chronology-carry-shadow 480ms cubic-bezier(0.35, 0.05, 0.2, 1) both; }
@keyframes curator-chronology-carry { 25% { transform: scale(1.018); } }
@keyframes curator-chronology-carry-shadow { 25% { opacity: 1; transform: scale(1.018); } }
@media (hover: hover) {
    .curator-chronology-candidate.is-present:hover { transform: translateX(calc(var(--s) * 0.03)); }
}
/* Tonearm, after the reference: a chrome rod with a short tail, a gentle bend
   and a small head, turning beneath a brushed cap on a soft white pivot. */
.curator-chronology-pivot,
.curator-chronology-pivot-cap {
    left: calc(var(--s) * 0.12);
    top: calc(var(--s) * 0.12);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.curator-chronology-pivot {
    z-index: 6;
    width: calc(var(--s) * 0.15);
    height: calc(var(--s) * 0.15);
    background: var(--deck-pivot);
    box-shadow: 0 0 0 0.5px var(--deck-edge), inset 0 0.5px 0 var(--deck-highlight), 0 1px 1.5px var(--deck-shadow-near), 0 calc(var(--s) * 0.015) calc(var(--s) * 0.04) rgba(40, 34, 26, 0.07);
}
.curator-chronology-pivot-cap {
    z-index: 8;
    box-sizing: border-box;
    width: calc(var(--s) * 0.09);
    height: calc(var(--s) * 0.09);
    padding: calc(var(--s) * 0.008);
    background: var(--deck-cap-rim);
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(40, 34, 26, 0.1);
}
.curator-chronology-pivot-cap > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        conic-gradient(from 290deg, var(--deck-spun-glint), rgba(255, 255, 255, 0) 55deg, var(--deck-spun-shade) 95deg, rgba(255, 255, 255, 0) 135deg, var(--deck-spun-glint) 180deg, rgba(255, 255, 255, 0) 235deg, var(--deck-spun-shade) 275deg, rgba(255, 255, 255, 0) 315deg, var(--deck-spun-glint)),
        var(--deck-spun);
    box-shadow: 0 0 0 0.5px var(--deck-edge), inset 0 0.5px 0 rgba(255, 255, 255, 0.7), 0 1px 2px var(--deck-shadow-near);
}
.curator-chronology-arm {
    z-index: 7;
    left: calc(var(--s) * 0.12);
    top: calc(var(--s) * 0.12);
    width: 0;
    height: 0;
    transform: rotate(0deg);
    transition: transform 620ms cubic-bezier(0.45, 0.05, 0.25, 1);
}
[data-arm="over"] .curator-chronology-arm { transform: rotate(calc(14.1deg + var(--deck-progress, 0) * 3deg)); }
/* While playing, the arm follows the clip's progress across the grooves. */
[data-tracking] .curator-chronology-arm { transition: transform 400ms linear; }
/* Across the swing the arm rises gradually to a peak about 62% of the way,
   then settles onto the record as the swing ends (JS ARM_MS and LOWER_MS). */
/* Kept on their own layers so iOS never re-renders them, slightly off, as a movement ends. */
.curator-chronology-arm,
.curator-chronology-arm > span { will-change: transform, opacity; }
.curator-chronology-arm > span { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 240ms cubic-bezier(0.4, 0, 0.3, 1), opacity 240ms cubic-bezier(0.4, 0, 0.3, 1); }
[data-arm="over"]:not([data-lowered]) .curator-chronology-arm > span { transition-duration: 380ms; transition-timing-function: cubic-bezier(0.45, 0, 0.4, 1); }
.curator-chronology-arm svg {
    position: absolute;
    left: calc(var(--s) * -0.09);
    top: calc(var(--s) * -0.06);
    width: calc(var(--s) * 0.87);
    height: calc(var(--s) * 0.2);
    overflow: visible;
}
/* Resting on the record or its rest, the shadow sits close. Lifted, the head
   rises: the shadow falls further out towards the head and softens, and the
   arm reads a touch larger. Both pivot about the bearing. */
.curator-chronology-arm-shadow {
    opacity: 0.3;
    /* A fixed blur; lifting only moves and fades it, so nothing re-renders. */
    filter: brightness(0) blur(calc(var(--s) * 0.011));
    transform: translate(calc(var(--s) * 0.006), calc(var(--s) * 0.01)) rotate(0.3deg);
}
body.dark-mode .curator-chronology-arm-shadow { opacity: 0.6; }
[data-arm="over"]:not([data-lowered]) .curator-chronology-arm-shadow {
    opacity: 0.2;
    transform: translate(calc(var(--s) * 0.009), calc(var(--s) * 0.016)) rotate(1.1deg);
}
body.dark-mode [data-arm="over"]:not([data-lowered]) .curator-chronology-arm-shadow { opacity: 0.4; }
[data-arm="over"]:not([data-lowered]) .curator-chronology-arm-body { transform: scale(1.012); }
.curator-chronology-deck-copy { display: none; min-width: 0; }
.curator-chronology-deck-copy p { margin: 0; }
.curator-chronology-deck-title,
.curator-chronology-deck-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.curator-chronology-deck-title { font: 500 0.95rem/1.25 var(--rh-sans); letter-spacing: -0.025em; }
.curator-chronology-deck-artist { margin-top: 0.1rem !important; color: var(--chronology-muted); font: 400 0.8rem/1.35 var(--rh-sans); letter-spacing: -0.01em; }
.curator-chronology-deck-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.curator-chronology-deck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.6rem; }
.curator-chronology-deck-actions:not(:has(> :not([hidden]))) { display: none; }
.curator-chronology-deck-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0 0.95rem 0 0.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--chronology-ink);
    color: var(--curator-paper);
    font: var(--rh-compact-button-font);
    letter-spacing: var(--rh-button-tracking);
    cursor: pointer;
}
.curator-chronology-deck-toggle::after { content: ""; position: absolute; inset: -5px -2px; }
.curator-chronology-deck-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.curator-chronology-deck-toggle .is-pause,
.curator-chronology-deck-toggle[aria-pressed="true"] .is-play,
[data-phase="failed"] .curator-chronology-deck-toggle svg { display: none; }
.curator-chronology-deck-toggle[aria-pressed="true"] .is-pause { display: block; }
[data-phase="failed"] .curator-chronology-deck-toggle { padding-left: 0.95rem; }
.curator-chronology-deck-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 34px;
    color: var(--chronology-ink);
    font: 500 0.8rem/1 var(--rh-sans);
    letter-spacing: -0.02em;
    text-decoration: none;
}
.curator-chronology-deck-link svg { width: 13px; height: 13px; margin-top: -2px; }

/* What's on the deck, beside it: shared by the entry and Chronology heads, in
   their --deck-ink and --deck-muted. Before anything plays, the track waits in muted type. */
.curator-deck-now { display: grid; flex: 1 1 auto; align-content: center; min-width: 0; }
.curator-deck-now[hidden] { display: none; }
.curator-deck-now-line { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.curator-deck-now-title {
    color: var(--deck-ink);
    font: 500 15px/1.25 var(--rh-sans);
    letter-spacing: -0.025em;
    transition: color 0.18s ease;
}
.curator-deck-now-title.is-cued { color: var(--deck-muted); }
.curator-deck-now-meta {
    margin-top: 2px;
    color: var(--deck-muted);
    font: 400 13px/1.3 var(--rh-sans);
    letter-spacing: -0.01em;
}
/* A line too long for the column peeks across to its end and eases back (preview_deck_glide.js). */
.curator-deck-glide { display: inline-block; padding-right: 1px; will-change: transform; }
.curator-deck-now-steps { display: flex; margin: 4px 0 -4px -9px; }
.curator-deck-now-steps button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    color: color-mix(in srgb, var(--deck-ink) 78%, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.18s ease;
}
.curator-deck-now-steps button:disabled { opacity: 0.22; cursor: default; }
.curator-deck-now-steps button:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }
.curator-deck-now-steps svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* The timeline's head carries the deck on phones. Elsewhere it steps aside so
   the deck floats (or, on wide screens, sits beside the focused discovery). */
.curator-chronology-head { display: contents; }
.curator-chronology-head > .curator-deck-now { display: none; }

/* Float just above the bottom tab bar, web or native. WebKit measures sticky
   insets inside the surface's bottom padding, which is taller than the bar; the
   matching negative margin keeps the deck in the same place at the end of the list. */
@media (max-width: 1100px) {
    .curator-chronology-deck {
        --deck-bar-offset: calc(53px + env(safe-area-inset-bottom, 0px) + 14px - var(--curator-app-bottom-clearance, calc(53px + env(safe-area-inset-bottom, 0px))));
        bottom: var(--deck-bar-offset);
        margin-bottom: var(--deck-bar-offset);
    }
}

@container chronology (min-width: 740px) {
    .curator-chronology-page-content { max-width: clamp(260px, 36cqw, 400px); }
    .curator-chronology-track-glyph { display: grid; }
    .curator-chronology-stage { display: grid; grid-template-columns: minmax(0, 1fr); }
    .curator-chronology-stage > * { grid-column: 1; min-width: 0; }
    .curator-chronology-deck {
        --s: clamp(180px, 21cqw, 240px);
        --deck-docked: 0;
        --candidate-left: calc(var(--s) * -0.84);
        grid-row: 1;
        align-self: start;
        justify-self: end;
        top: calc(var(--chronology-focus-line, 50vh) - var(--s) * 0.55);
        bottom: auto;
        margin: 0 calc(80px + 3cqw) 0 0;
    }
    .curator-chronology-deck-copy { display: block; width: var(--s); margin: 1.25rem 0 0 calc(var(--candidate-left) * -1); }
    /* The deck carries the link and status here. */
    .curator-chronology-track-aside { display: none; }
}

/* Phones: artwork runs off the left edge and stops at a column on the right,
   where a scale of every year is pinned beneath the deck: the current year in
   ink, the focused discovery's date opening beneath it. The deck is pinned
   across the sheet above it all, what's on it named on the left. Everything
   stays legible: focus shows on the scale and the deck, not by fading. */
.curator-chronology-scale { display: none; }
@container chronology (max-width: 739.98px) {
    .curator-chronology-stage {
        /* The sheet's side margin, measured rather than assumed. */
        --chronology-bleed: calc((100vw - 100cqw) / 2);
        /* The column beneath the deck, as wide as it; the artwork stops at its edge. */
        --chronology-column: 72px;
    }
    .curator-chronology-head {
        --deck-ink: var(--chronology-ink);
        --deck-muted: var(--chronology-muted);
        position: sticky;
        z-index: 4;
        top: var(--chronology-head-top, 5rem);
        display: flex;
        align-items: center;
        gap: 14px;
        box-sizing: border-box;
        min-height: 96px;
        margin: 0 calc(var(--chronology-bleed) * -1);
        padding: 12px var(--chronology-bleed);
        background: var(--curator-paper);
    }
    .curator-chronology-head > .curator-deck-now { display: grid; }
    /* Held in place, so the track lines don't move when something playable is in focus. */
    .curator-chronology-head .curator-deck-now-steps[data-idle] { visibility: hidden; }
    .curator-chronology-head .curator-chronology-deck {
        --s: 72px;
        --deck-docked: 0;
        position: relative;
        bottom: auto;
        flex: none;
        width: auto;
        margin: 0 0 0 auto;
    }

    /* The scale replaces the line, its markers and the year and date labels. */
    .curator-chronology-timeline { padding-top: 12px; }
    .curator-chronology-timeline::before,
    .curator-chronology-item::after,
    .curator-chronology-end,
    .curator-chronology-date-group { display: none; }
    .curator-chronology-year-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .curator-chronology-year { padding-top: 0; }
    .curator-chronology-year + .curator-chronology-year { margin-top: 2rem; }
    .curator-chronology-item { padding-right: var(--chronology-column); }
    .curator-chronology-item + .curator-chronology-item { margin-top: 2rem; }
    .curator-chronology-page-content { max-width: none; }
    .curator-chronology-entry .curator-chronology-art {
        width: calc(100% + var(--chronology-bleed));
        margin-left: calc(var(--chronology-bleed) * -1);
    }
    .has-focus .curator-chronology-card,
    .has-focus .curator-chronology-details { opacity: 1; }
    .has-focus .curator-chronology-item:not(.is-current) .curator-chronology-details { pointer-events: auto; }
    /* Only an owner's Edit needs the date row now. */
    .curator-chronology-date:not(:has(.curator-chronology-edit)),
    html.rhune-native-ios .curator-chronology-date { display: none; }

    /* A ruler pinned in the column for the whole timeline, taking no room in its
       flow: each year a labelled tick, each discovery a short one. The focused
       discovery's tick is a dot carrying its date, moving a tick at a time. */
    .curator-chronology-scale {
        position: sticky;
        z-index: 3;
        top: var(--chronology-sticky-top, 5rem);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: var(--chronology-column);
        height: var(--chronology-scale-height, 50vh);
        margin: 0 0 calc(var(--chronology-scale-height, 50vh) * -1) auto;
        padding: 0 0 12px;
        overflow: hidden;
    }
    .curator-chronology-scale > * {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-sizing: border-box;
        width: 100%;
        padding: 0 16px 0 0;
        /* The line runs through every row, so it ends with the last discovery. */
        background: linear-gradient(var(--chronology-line), var(--chronology-line)) right 3.5px top / 1px 100% no-repeat;
        white-space: nowrap;
    }
    .curator-chronology-scale > *::after {
        content: "";
        position: absolute;
        top: 50%;
        height: 1px;
    }
    .curator-chronology-scale button {
        flex: 0 1 26px;
        min-height: 14px;
        border: 0;
        color: rgba(48, 46, 42, 0.36);
        font: 500 0.95rem/1 var(--rh-sans);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.03em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 180ms ease;
    }
    .curator-chronology-scale button::after { right: 0; width: 8px; background: rgba(48, 46, 42, 0.4); }
    .curator-chronology-scale button.is-current { color: var(--chronology-ink); font-weight: 600; }
    .curator-chronology-scale button:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
    .curator-chronology-scale-tick {
        flex: 0 1 12px;
        min-height: 3px;
        color: var(--chronology-ink);
        font: 500 0.66rem/1 var(--rh-sans);
        letter-spacing: -0.01em;
    }
    .curator-chronology-scale-tick::after { right: 4.5px; width: 4px; background: rgba(48, 46, 42, 0.28); }
    .curator-chronology-scale-tick.is-current::after {
        right: 0.5px;
        width: 7px;
        height: 7px;
        margin-top: -3.5px;
        border-radius: 50%;
        background: var(--chronology-ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    .curator-chronology-candidate,
    .curator-chronology-candidate.is-present,
    .curator-chronology-candidate.is-mounting,
    .curator-chronology-record.is-mounted.is-leaving,
    .curator-chronology-arm,
    [data-tracking] .curator-chronology-arm,
    .curator-chronology-arm > span,
    .curator-chronology-track-glyph { transition: none; }
    .curator-chronology-candidate { transform: none; }
    .curator-chronology-record.is-mounted .curator-chronology-disc { animation: none; }
    .curator-chronology-candidate.is-mounting > .curator-chronology-record,
    .curator-chronology-candidate.is-mounting::before { animation: none; }
    .curator-chronology-track-play.is-loading .curator-chronology-track-glyph { animation: none; opacity: 0.6; }
    .curator-deck-now-title,
    .curator-chronology-label img,
    .curator-chronology-scale button { transition: none; }
    .curator-deck-now-line { text-overflow: ellipsis; }
}