/* Desktop remains a vertical chronology; mobile uses native horizontal year slides. */
.discography-timeline { background: var(--cream); color: var(--ink); scroll-margin-top: 0; }
.timeline-intro { padding: 56px 6vw 36px; border-top: 1px solid var(--line); }
.timeline-intro .eyebrow { margin-bottom: 18px; }
.timeline-intro h2 { font-size: clamp(2rem, 3.2vw, 3.5rem); line-height: 1.12; letter-spacing: -.045em; font-weight: 500; }
.timeline-reader { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); padding: 0 6vw 40px; align-items: start; }
.timeline-visual { position: sticky; top: 28px; min-width: 0; }
.timeline-visual-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; }
.timeline-visual-footer .timeline-year-select { flex-shrink: 0; }
.timeline-jump-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.3; letter-spacing: .02em; }
.timeline-year-select { font: inherit; font-size: 15px; font-weight: 500; min-width: 116px; min-height: 44px; padding: 8px 28px 8px 12px; border: 1px solid #173f5040; border-radius: 8px; color: var(--ink); background: transparent; cursor: pointer; }
.timeline-gallery { position: relative; height: min(62vh, 580px); min-height: 300px; overflow: hidden; background: #173f50; border-radius: 5px; isolation: isolate; }
.timeline-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.timeline-frame.is-active { opacity: 1; }
.timeline-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-position, center); }
.timeline-visual .timeline-frame--photo { background: #0e1f26; }
.timeline-visual .timeline-frame--photo img { object-fit: contain; object-position: center; }
.timeline-frame--cover { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; background: radial-gradient(ellipse at 50% 30%, #366a76, #173f50 80%); padding: clamp(24px, 3vw, 48px); }
.timeline-frame--cover img { object-fit: contain; width: 100%; height: 100%; min-width: 0; min-height: 0; filter: drop-shadow(0 18px 26px #0005); }
#timeline-caption { color: var(--muted); font-size: 12px; line-height: 1.4; }
@media (min-width: 801px) {
  .timeline-visual {
    --timeline-viewport-height: 100vh;
    --timeline-image-height: min(62vh, 580px, calc(var(--timeline-viewport-height) - 144px));
    top: calc((var(--timeline-viewport-height) - var(--timeline-image-height)) / 2);
  }
  .has-player .timeline-visual { --timeline-viewport-height: calc(100vh - 104px); }
  .timeline-visual .timeline-gallery { height: var(--timeline-image-height); min-height: 0; }
}
.timeline-year { padding: 20px 0 56px; margin-bottom: 36px; border-top: 1px solid var(--line); min-height: 65vh; scroll-margin-top: 0; }
.timeline-year-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.timeline-year-heading h3 { font: inherit; font-size: clamp(2.5rem,5vw,4.5rem); line-height: 1; letter-spacing: -.06em; font-weight: 500; }
.timeline-year-heading > span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline-biography { max-width: 65ch; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.timeline-biography p { font-size: 16px; line-height: 1.75; }
.timeline-biography p + p { margin-top: 14px; }
.timeline-events { list-style: none; padding: 0; margin: 0; }
.timeline-event + .timeline-event { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--line); }
.timeline-kind { font-size: 10px; line-height: 1.6; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.timeline-event h4 { font-size: clamp(1.2rem,1.8vw,1.8rem); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 8px; }
.timeline-artists { font-size: 14px; line-height: 1.6; margin: 0 0 14px; color: var(--navy); }
.timeline-notes p { font-size: 16px; line-height: 1.7; margin: 0; }
.timeline-notes p + p { margin-top: 5px; }
.timeline-record { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; margin-top: 12px; font-size: 13px; border-bottom: 1px solid var(--ink); }
.timeline-record .ui-icon { width: 16px; height: 16px; }
.timeline-cinema { display: none; }
.timeline-reading-open { overflow: hidden; }
.timeline-dialog { width: min(650px, calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100svh - 24px); max-height: calc(100dvh - 24px); color: var(--ink); background: var(--cream); border: 0; border-radius: 16px; padding: 64px 24px 32px; overscroll-behavior: contain; }
.timeline-dialog::backdrop { background: #07161bc9; backdrop-filter: blur(8px); }
.timeline-dialog-close { display: grid; place-items: center; position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; background: #173f500c; }
.timeline-dialog .eyebrow { font-size: 10px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; }
.timeline-dialog h2 { font-size: 60px; margin-bottom: 28px; line-height: 1; letter-spacing: -.06em; }
.timeline-dialog .timeline-event h4 { font-size: 21px; }
.timeline-dialog .timeline-kind { font-size: 10px; }
.timeline-dialog .timeline-notes p { font-size: 15px; }

@media (max-width: 800px) {
  .timeline-intro { padding: 36px 6vw 30px; }
  .timeline-intro h2 { font-size: clamp(1.75rem,7.5vw,2.6rem); }
  .timeline-intro .eyebrow { font-size: 11px; margin-bottom: 18px; }
  .timeline-reader { display: block; padding: 0 6vw; }
  .timeline-visual { display: none; }
  .timeline-year { min-height: 0; margin-bottom: 20px; padding-bottom: 28px; }
  .timeline-year-heading h3 { font-size: 48px; }
  .timeline-ready .timeline-reader { display: none; }
  /* Keep the scroll geometry stable while the mobile browser toolbar moves. */
  .timeline-cinema { --stage-height: 100svh; display: block; position: relative; height: var(--stage-height); background: #0e1f26; scroll-margin-top: -20px; }
  .timeline-stage { position: relative; height: var(--stage-height); container: timeline / size; color: #fff9ef; background: #0e1f26; isolation: isolate; overflow: hidden; }
  .timeline-stage .timeline-scene-visual { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; z-index: -2; opacity: 1; transition: none; background: transparent; }
  .timeline-stage .timeline-frame--photo img { object-fit: cover; }
  .timeline-scene--cover { background: radial-gradient(ellipse at 50% 20%,#244d58,#0e1f26 75%); }
  .timeline-stage .timeline-frame--cover { position: relative; inset: auto; flex: 1 1 0%; height: auto; min-height: 0; display: flex; justify-content: center; padding: 0; margin: 0 0 22px; z-index: 0; background: none; }
  .timeline-stage .timeline-frame--cover img { position: static; width: 100%; max-width: 340px; height: 100%; object-fit: contain; }
  .timeline-scene--cover .timeline-shade, .timeline-scene--cover .timeline-scene-copy::before { display: none; }
  .timeline-shade { position: absolute; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(180deg,#0e1f2670,transparent 23%,#0e1f2638 38%,#0e1f26dc 63%,#0e1f26 88%); }
  .timeline-chrome { position: absolute; top: max(12px,env(safe-area-inset-top)); left: 6vw; right: 6vw; z-index: 2; }
  .timeline-mobile-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .timeline-year-picker { position: relative; display: inline-flex; }
  .timeline-mobile-tools .timeline-year-select { appearance: none; -webkit-appearance: none; color: #fff; border-color: #fff9ef44; background: #fff9ef0d; height: 44px; min-width: 0; padding: 8px 34px 8px 12px; font-size: 13px; }
  .timeline-year-picker > .ui-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #fff; pointer-events: none; }
  .timeline-year-select option { color: #173f50; background: #f3f0df; }
  .timeline-position { font-size: 11px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #fff9efb0; }
  .timeline-progress { height: 2px; margin-top: 10px; background: #fff9ef30; }
  .timeline-progress > span { display: block; height: 100%; width: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
  .timeline-scene-layer { position: absolute; inset: 0; display: flex; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: none; }
  .timeline-scene-layer::-webkit-scrollbar { display: none; }
  .timeline-scene { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; padding: 88px 6vw calc(70px + var(--timeline-player-space, 0px)); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; contain: layout paint; scroll-snap-align: start; scroll-snap-stop: always; }
  .timeline-scene-copy { position: relative; flex-shrink: 0; }
  .timeline-scene-copy::before { content: ''; position: absolute; top: -112px; left: -6vw; right: -6vw; bottom: calc(-70px - var(--timeline-player-space, 0px)); z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, #0e1f26ed 90px, #0e1f26); }
  .timeline-scene h3 { font-size: clamp(38px,13vw,54px); font-weight: 500; letter-spacing: -.07em; line-height: .95; margin: 0 0 22px; color: var(--mint); }
  .timeline-scene-titles { list-style: none; padding: 0; margin: 0; }
  .timeline-scene-titles li { font-size: clamp(18px,5vw,22px); font-weight: 500; line-height: 1.18; letter-spacing: -.035em; }
  .timeline-scene-titles li + li { padding-top: 12px; margin-top: 12px; border-top: 1px solid #fff9ef22; }
  .timeline-scene.is-dense .timeline-scene-titles li { font-size: 18px; line-height: 1.2; }
  .timeline-scene.is-dense .timeline-scene-titles li + li { padding-top: 8px; margin-top: 8px; }
  .timeline-scene-note { margin-top: 16px; font-size: 14px; line-height: 1.55; color: #fff9efcc; }
  .timeline-read { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; margin-top: 18px; font-size: 12px; color: #fff9efcf; }
  .timeline-read .ui-icon { width: 17px; height: 17px; color: var(--mint); }
  .timeline-step-controls { position: absolute; left: 6vw; right: 6vw; bottom: calc(max(14px,env(safe-area-inset-bottom)) + var(--timeline-player-space,0px)); display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #fff9ef22; z-index: 2; }
  .timeline-step-controls button { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; min-height: 44px; padding: 4px 0; color: #fff; }
  .timeline-step-controls button:disabled { opacity: .3; cursor: default; }
  .timeline-step-controls .ui-icon { width: 15px; height: 15px; color: currentColor; }
  .timeline-stage :focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
}
@container timeline (max-height: 700px) {
  .timeline-chrome { top: 5px; }
  .timeline-scene h3 { margin-bottom: 14px; }
  .timeline-scene-titles li { font-size: 20px; }
  .timeline-scene.is-dense .timeline-scene-titles li { font-size: 16px; }
  .timeline-scene.is-dense .timeline-scene-titles li + li { padding-top: 6px; margin-top: 6px; }
  .timeline-read { margin-top: 10px; }
  .timeline-scene-note { font-size: 13px; margin-top: 12px; }
  .has-player .timeline-scene-note { display: none; }
  .has-player .timeline-scene h3 { font-size: 34px; margin-bottom: 10px; }
  .has-player .timeline-scene-titles li { font-size: 17px; }
  .has-player .timeline-scene.is-dense .timeline-scene-titles li { font-size: 15px; }
}
@container timeline (min-width: 550px) and (max-height: 500px) {
  .timeline-chrome { left: 4vw; width: 32%; }
  .timeline-scene-copy::before { left: -4vw; right: -4vw; }
  .timeline-scene { padding: 20px 4vw calc(62px + var(--timeline-player-space,0px)) 43%; }
  .timeline-scene h3 { font-size: 36px; margin-bottom: 10px; }
  .timeline-scene-note { display: none; }
  .timeline-scene-titles li { font-size: 18px; }
  .timeline-scene.is-dense .timeline-scene-titles li { font-size: 15px; }
  .timeline-scene.is-dense .timeline-scene-titles li + li { padding-top: 4px; margin-top: 4px; }
  .timeline-read { margin-top: 8px; min-height: 36px; }
  .timeline-stage .timeline-frame--cover { position: absolute; left: 4vw; top: 82px; bottom: calc(72px + var(--timeline-player-space, 0px)); width: 32%; margin: 0; }
  .timeline-shade { background: linear-gradient(90deg,#0e1f2633,#0e1f2677 35%,#0e1f26e8 50%,#0e1f26); }
  .has-player .timeline-scene h3 { font-size: 27px; }
  .has-player .timeline-scene.is-dense .timeline-scene-titles { columns: 2; column-gap: 14px; }
  .has-player .timeline-scene.is-dense .timeline-scene-titles li { break-inside: avoid; font-size: 13px; }
}
/* Tight phone screens keep every year and its controls accessible; full titles remain in the reader. */
@container timeline (max-height: 600px) and (max-width: 549px) {
  .timeline-scene { padding-top: 76px; }
  .timeline-scene-note { display: none; }
  .timeline-scene h3 { margin-bottom: 12px; }
  .timeline-scene-titles li { font-size: 18px; }
  .timeline-scene.is-dense .timeline-scene-titles li { font-size: 15px; }
  .timeline-scene.is-dense .timeline-scene-titles li + li { padding-top: 5px; margin-top: 5px; }
  .timeline-scene.is-dense .timeline-scene-titles li span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .timeline-stage .timeline-frame--cover { margin-bottom: 12px; }
  .has-player .timeline-progress { margin-top: 8px; }
}
@container timeline (max-height: 480px) and (max-width: 549px) {
  .has-player .timeline-scene { padding-bottom: calc(62px + var(--timeline-player-space, 0px)); }
  .has-player .timeline-scene h3 { font-size: 28px; margin-bottom: 6px; }
  .has-player .timeline-scene-titles li { font-size: 16px; }
  .has-player .timeline-scene.is-dense .timeline-scene-titles li { font-size: 14px; }
  .has-player .timeline-scene-titles li + li { padding-top: 4px; margin-top: 4px; }
  .has-player .timeline-scene.is-dense .timeline-scene-titles li + li { padding-top: 3px; margin-top: 3px; }
  .has-player .timeline-scene-titles li span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .has-player .timeline-read { min-height: 36px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-frame, .timeline-scene, .timeline-scene.is-active { transition: none; transform: none; }
}