/* Tidslinjen: Kunst-galleriets faner, taleboble og en separat års-navigation. */
.section-5 .timeline-shell { padding-top: 14px; }
.section-5 .timeline-controls {
  position: sticky;
  z-index: 78;
  top: 12px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 18px auto;
  padding: 0;
  background: transparent;
  transform: none;
}
.section-5 .timeline-controls::before { content: none; }
.section-5 .timeline-groups {
  position: relative;
  isolation: isolate;
  display: flex;
  gap: 0;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(110deg, #183456, #1b2d53);
  box-shadow: 0 6px 14px #03071670, 0 0 14px #3f8cda26;
}
.section-5 .timeline-shell[data-theme="live"] .timeline-groups {
  --timeline-pill: linear-gradient(105deg, #d74e67, #ad4fbc 65%, #8e45bd);
  --timeline-pill-glow: #d458ac80;
}
.section-5 .timeline-shell[data-theme="music"] .timeline-groups {
  --timeline-pill: linear-gradient(105deg, #51cdee, #4daeee 34%, #8475eb 68%, #a044dd);
  --timeline-pill-glow: #6e9de98c;
}
.section-5 .timeline-shell[data-theme="art"] .timeline-groups {
  --timeline-pill: linear-gradient(105deg, #c99738, #ac7480 55%, #8650ba);
  --timeline-pill-glow: #b78b6280;
}
.section-5 .timeline-shell[data-theme="word"] .timeline-groups {
  --timeline-pill: linear-gradient(105deg, #625bd0, #8752c5 50%, #bf438e);
  --timeline-pill-glow: #9c57c78c;
}
.section-5 .timeline-shell[data-theme="press"] .timeline-groups {
  --timeline-pill: linear-gradient(105deg, #9298a6, #817eaa 54%, #8955a8);
  --timeline-pill-glow: #9990af80;
}
.section-5 .timeline-groups::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--timeline-pill-width, 70px);
  border-radius: 999px;
  pointer-events: none;
  background: var(--timeline-pill);
  box-shadow: 0 0 14px var(--timeline-pill-glow);
  filter: blur(8px);
  transform: translateX(var(--timeline-pill-x, 3px));
  transition: transform 430ms cubic-bezier(.22, .75, .25, 1), width 430ms cubic-bezier(.22, .75, .25, 1);
}
.section-5 .timeline-groups::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: calc(var(--timeline-pill-width, 70px) - 6px);
  border-radius: 999px;
  pointer-events: none;
  background: var(--timeline-pill);
  filter: blur(2.5px);
  opacity: .58;
  transform: translateX(calc(var(--timeline-pill-x, 3px) + 3px));
  transition: transform 430ms cubic-bezier(.22, .75, .25, 1), width 430ms cubic-bezier(.22, .75, .25, 1);
}
.section-5 .timeline-groups:not(.has-measured-pill)::before,
.section-5 .timeline-groups:not(.has-measured-pill)::after { opacity: 0; }
.section-5 .timeline-groups button,
.section-5 .timeline-shell[data-theme="live"] .timeline-groups button.active {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 30px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 5px #06122550;
  font: 500 11px/1.15 Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 220ms ease;
}
.section-5 .timeline-groups button.active,
.section-5 .timeline-shell[data-theme="live"] .timeline-groups button.active,
.section-5 .timeline-groups button:hover { color: #f6fbff; }
.section-5 .timeline-groups button.active,
.section-5 .timeline-shell[data-theme="live"] .timeline-groups button.active {
  background: transparent;
  box-shadow: none;
  border: 0;
}
.section-5 .timeline-groups button:hover,
.section-5 .timeline-groups button:focus-visible { transform: none; }
.section-5 .timeline-groups button:focus-visible { outline: 2px solid #d7f3ff; outline-offset: 1px; }

/* Årstal ligger mellem tidslinjen og ansigtet i portalens lag. */
.timeline-year-rail {
  position: fixed;
  z-index: 60;
  top: clamp(130px, 18svh, 170px);
  right: 6px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  width: 48px;
  max-height: min(300px, calc(100svh - 170px));
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  background: transparent;
}
.section-5 .timeline-year-rail a {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 31px;
  padding: 0 12px 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff !important;
  box-shadow: none;
  text-shadow: 0 1px 2px #000, 0 0 4px #000, 0 0 6px #000 !important;
  font: 700 12px/1 Arial, sans-serif;
  text-decoration: none;
  touch-action: manipulation;
}
.section-5 .timeline-year-rail a:hover,
.section-5 .timeline-year-rail a:focus-visible {
  color: #fff !important;
  background: transparent;
  text-decoration: none;
}
.timeline-year-rail a:focus-visible { outline: 1px solid #fff; outline-offset: -1px; }
.timeline-year-position {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 10px;
  height: 12px;
  background: #080808;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  pointer-events: none;
  transform: translateY(calc(var(--timeline-year-marker-y, 16px) - 6px));
}
.section-5 .timeline-shell[data-theme="art"] .life-year > h2 {
  color: #edff28 !important;
  text-shadow: none !important;
}
.section-5 .timeline-shell[data-theme="press"] .life-year > h2 {
  color: #000 !important;
}
.section-5 .timeline-shell[data-theme="art"] .timeline-entry time,
.section-5 .timeline-shell[data-theme="art"] .timeline-entry .life-category {
  color: #fff !important;
  text-shadow: 0 1px 3px #000 !important;
}
.section-5 .timeline-shell[data-theme="art"] .timeline-entry .life-category {
  font-weight: inherit !important;
}
.section-5 .calendar-biography {
  width: min(calc(100% - 66px), var(--bubble-max-width, 800px));
  margin-top: 14px;
}
@media (min-width: 761px) {
  .section-5 .timeline-shell[data-theme="word"] .calendar-biography {
    --bubble-max-width: 700px;
    width: min(calc(100% + 10px), var(--bubble-max-width));
  }
}
@media (min-width: 1101px) {
  .section-5 .archive-scroll { width: calc(100% + 28px); padding-right: 60px; }
  .section-5 .timeline-controls { transform: translateX(clamp(0px, calc(75vw - 825px), 42px)); }
}

@media (max-width: 760px) {
  .ship.section-5 .archive { width: 100vw; padding: 0; inset: 0; }
  .section-5 .archive-scroll { box-sizing: border-box; padding: 0 20px 30px; }
  .section-5 .timeline-shell { width: 100%; margin: 0; padding-top: 76px; }
  .section-5 .timeline-controls {
    top: 8px;
    width: calc(100vw - 40px);
    max-width: none;
    height: var(--timeline-mobile-height, 38px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto 10px;
    transform: none;
  }
  .section-5 .timeline-groups {
    flex: none;
    width: max-content;
    padding: 3px;
    transform: scale(var(--timeline-mobile-scale, 1));
    transform-origin: top center;
  }
  .section-5 .timeline-groups button,
  .section-5 .timeline-shell[data-theme="live"] .timeline-groups button.active {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 10px;
    letter-spacing: .06em;
  }
  .timeline-year-rail {
    top: var(--timeline-rail-top, clamp(105px, 15svh, 135px));
    right: 0;
    width: 58px;
    max-height: calc(88svh - var(--timeline-rail-top, 135px));
    visibility: hidden;
    pointer-events: none;
  }
  .timeline-year-rail.is-with-timeline { visibility: visible; pointer-events: auto; }
  .section-5 .timeline-year-rail a { min-height: 40px; font-size: 16px; }
  .section-5 .calendar-biography {
    width: calc(100% + 40px);
    max-width: none;
    margin: clamp(115px, 15svh, 145px) 0 8px -20px;
  }
  .is-open.section-5 .face-piece-shadow {
    transform: translate(44vw, 40vh) rotate(7deg) scale(.86);
  }
}
@media (max-width: 760px) and (orientation: portrait) {
  .is-open.section-5 .portrait-underlay { background-position: 11% -45svh; }
  .section-5 .calendar-biography {
    max-width: none;
    margin-top: clamp(90px, 12svh, 115px);
  }
  .section-5 .timeline-shell:is([data-theme="live"], [data-theme="music"], [data-theme="press"]) .calendar-biography p {
    --bubble-copy-left: 14%;
    --bubble-copy-right: 8%;
    text-wrap: wrap;
  }
}
@media (max-width: 360px) {
  .section-5 .timeline-groups button,
  .section-5 .timeline-shell[data-theme="live"] .timeline-groups button.active { padding-inline: 7px; }
}
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
  .timeline-year-rail { max-height: calc(94svh - var(--timeline-rail-top, 105px)); }
  .section-5 .calendar-biography { margin-top: 90px; }
  .is-open.section-5 .face-piece-shadow {
    transform: translate(44vw, calc(40vh + 45px)) rotate(7deg) scale(.86);
  }
}
@media (max-width: 760px) and (orientation: portrait) {
  /* Keep the year list 20px below the sticky tabs and clear of the return face. */
  .section-5 .section-heading { top: 0; }
  .section-5 .timeline-shell { padding-top: 56px; }
  .section-5 .calendar-biography {
    width: calc(100% - 37px);
    max-width: none;
    margin: max(48px, calc(15svh - 23px), calc(32svh - 176px)) 0 8px -16px;
  }
  .section-5 .continuous-timeline { padding-top: 40px; }
  .section-5 .timeline-year-rail {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 2px;
    max-height: min(336px, calc(64svh - var(--timeline-rail-top, 105px)));
    overflow-x: hidden;
    overflow-y: auto;
  }
  .is-open.section-5 .face-piece-shadow {
    transform: translate(36vw, calc(14vh + 140px)) rotate(7deg) scale(.9);
  }
}
@media (max-height: 650px) and (orientation: landscape) {
  .section-5 .timeline-shell { padding-top: 12px; }
  .section-5 .calendar-biography { display: block; margin-top: 12px; }
  .section-5 .continuous-timeline { padding-top: 75px; }
  .section-5 .timeline-controls { top: 4px; margin-bottom: 8px; padding: 0; }
  .timeline-year-rail { top: 70px; max-height: min(240px, calc(100svh - 80px)); }
}
@media (max-width: 760px) and (max-height: 650px) and (orientation: landscape) {
  .section-5 .timeline-shell { padding-top: 62px; }
}
@media (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {
  .section-5 .timeline-shell { padding-top: 14px; }
  .section-5 .calendar-biography {
    width: min(calc(100% - 78px), var(--bubble-max-width, 800px));
    margin-left: calc(10vw + 20px);
  }
  .section-5 .timeline-shell[data-theme="word"] .calendar-biography {
    width: calc(100% - 78px);
  }
  .section-5 .timeline-controls {
    top: 14px;
    width: max-content;
    max-width: calc(100vw - 100px);
    height: var(--timeline-mobile-height, 42px);
    justify-content: flex-end;
    margin: 0 20px 10px auto;
    transform: none;
  }
  .section-5 .timeline-groups { transform: scale(var(--timeline-mobile-scale, 1)); transform-origin: top right; }
  .timeline-year-rail {
    top: 64px;
    right: auto;
    left: 0;
    align-items: flex-start;
    width: 58px;
    max-height: calc(100svh - 68px);
  }
  .section-5 .timeline-year-rail a { font-size: 16px; }
  .timeline-year-rail a { justify-content: flex-start; padding: 0 2px 0 12px; }
  .timeline-year-position { right: auto; left: 0; transform: translateY(calc(var(--timeline-year-marker-y, 16px) - 6px)) scaleX(-1); }
}
@media (max-width: 760px) and (max-height: 650px) and (orientation: landscape) {
  .section-5 .timeline-shell { padding-top: 12px; }
  .section-5 .timeline-controls { top: 12px; margin-bottom: 10px; }
  .section-5 .calendar-biography { width: calc(100% - 10px); margin-left: 30px; }
  .section-5 .continuous-timeline { width: calc(100% - 58px); margin-left: 58px; }
  .section-5 .timeline-year-rail { flex-wrap: nowrap; gap: 2px; }
  .section-5 .timeline-year-rail a { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-5 .timeline-groups::before,
  .section-5 .timeline-groups::after,
  .section-5 .timeline-groups button,
  .timeline-year-rail a { transition: none; }
}

/* At enlarged text sizes, keep the full font size and let tabs wrap. */
@media (max-width:760px) and (orientation:portrait) {
  .section-5 .timeline-groups.has-large-text { width:100%; flex-wrap:wrap; transform:none; }
  .section-5 .timeline-shell:has(.timeline-groups.has-large-text) .calendar-biography { width:calc(100% - 86px); }
  .section-5 .timeline-groups.has-large-text::before,
  .section-5 .timeline-groups.has-large-text::after { top:var(--timeline-pill-y,3px); height:var(--timeline-pill-height,32px); }
}

/* Keep the left eye clear of the Timeline's coloured year panels on phones
   held sideways. The extra image width lets it move left without an empty edge. */
@media (max-width: 1100px) and (max-height: 650px) and (orientation: landscape) {
  .ship.is-open.section-5 .portrait-underlay {
    background-size: max(calc(100% + 32px), 177.778svh) auto;
    background-position: right center;
  }
}