/* Only the Scene and Kunst timeline galleries. */
.tg-overlay { z-index:10000; padding:32px; background:#09090bea; backdrop-filter:blur(12px); }
.tg-dialog { position:relative; width:min(90vw,1200px); max-height:calc(100dvh - 64px); overflow:auto; overscroll-behavior:contain; background:#171719; color:#fff; border:0; border-radius:9px; box-shadow:0 24px 100px #0009; }
.tg-overlay[data-theme="live"] .tg-dialog { background:#410c12; }
.tg-overlay[data-theme="art"] .tg-dialog { background:#452c0c; }
.tg-overlay[data-theme="live"] .tg-stage { background:#410c12; }
.tg-overlay[data-theme="art"] .tg-stage { background:#452c0c; }
.tg-overlay:not([data-theme="live"]):not([data-theme="art"]) :is(.tg-dialog,.tg-stage) { background:var(--timeline-deep,#171719); }
.tg-dialog * { box-sizing:border-box; }
.tg-header { padding:clamp(18px,2vw,30px); padding-right:70px; max-height:min(45dvh,400px); overflow:auto; scrollbar-width:thin; overscroll-behavior:contain; }
.tg-header h2 { margin:0; color:#fff; font:500 clamp(22px,2vw,34px)/1.2 Georgia,serif; text-wrap:balance; }
.tg-details { margin-top:10px; }
.tg-details:empty { display:none; }
.tg-details p { margin:0 0 6px; color:#e5e5e6; font:clamp(15px,1.15vw,19px)/1.45 Georgia,serif; }
.tg-date { display:block; margin:0 0 10px; color:#aeafb2; font:400 11px/1.3 system-ui,sans-serif; letter-spacing:.1em; }
.tg-close { position:absolute; z-index:5; top:10px; right:12px; width:44px; height:44px; border:0; border-radius:0; background:transparent; color:#fff; font:32px/1 system-ui,sans-serif; cursor:pointer; text-shadow:0 1px 8px #000; }
.tg-viewer { min-width:0; }
.tg-stage { position:relative; width:100%; aspect-ratio:var(--tg-ratio,1.33333); overflow:hidden; background:#171719; touch-action:pan-y pinch-zoom; }
.tg-zoom-image { display:none; position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; transform-origin:center center; }
.tg-stage.is-zoomed .tg-zoom-image { display:block; }
@media (pointer:coarse) { .tg-stage { touch-action:none; } }
.tg-stage canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.tg-effect { opacity:0; pointer-events:none; }
.tg-effect.is-active { opacity:1; }
.tg-status { position:absolute; inset:0; display:flex; gap:10px; align-items:center; justify-content:center; padding:24px; text-align:center; color:#fff; font:16px/1.5 system-ui,sans-serif; }
.tg-arrow { position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:60px; height:90px; padding:0; border:0; border-radius:0; background:transparent; color:#fff; cursor:pointer; filter:drop-shadow(0 1px 4px #0008); }
.tg-arrow::after { content:''; display:block; position:absolute; top:28px; width:25px; height:25px; border-top:2px solid #fff; border-right:2px solid #fff; }
.tg-previous { left:0; }
.tg-previous::after { left:22px; transform:rotate(-135deg); }
.tg-next { right:0; }
.tg-next::after { right:22px; transform:rotate(45deg); }
.tg-arrow:hover { filter:drop-shadow(0 1px 6px #000); }
.tg-supplementary { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin-top:10px; color:#c3c3c6; font:12px/1.5 system-ui,sans-serif; }
.tg-supplementary:empty { display:none; }
.tg-supplementary a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.tg-credit { margin:0; font:inherit; }
.tg-video { display:block; width:100%; aspect-ratio:16/9; border:0; margin-top:12px; }
.tg-dialog[data-entry-date="2017-03-30"] .tg-video { width:calc(100% - 36px); height:auto; margin:18px; }
.tg-video-link { display:block; width:max-content; max-width:calc(100% - 36px); margin:12px 18px 0; color:#fff; font:14px/1.4 system-ui,sans-serif; text-decoration:underline; text-underline-offset:3px; }
.tg-video + .tg-viewer { margin-top:22px; }
.tg-video-link + .tg-viewer { margin-top:22px; }
.tg-dialog[data-entry-date="2012-10-12"] .tg-header { max-height:none; overflow:visible; }
.section-5 .timeline-thumbnail.timeline-video-thumbnail.timeline-thumbnail-contain { aspect-ratio:auto; object-fit:contain; width:auto; max-width:128px; height:auto; max-height:108px; }
.tg-more { width:100%; }
.tg-more summary { margin:8px 0; cursor:pointer; color:#ccc; font:13px/1.5 system-ui,sans-serif; }
.tg-dialog :focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.tg-dialog [hidden] { display:none!important; }
.tg-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:760px), (max-width:1100px) and (max-height:600px) {
  .tg-overlay { padding:0; }
  .tg-dialog { max-width:100vw; max-height:100dvh; border-radius:0; }
  .tg-header { padding:18px 54px 16px 18px; }
  .tg-header h2 { font-size:22px; }
  .tg-close { top:5px; right:5px; }
  .tg-arrow { width:48px; height:80px; }
  .tg-arrow::after { width:20px; height:20px; }
  .tg-previous::after { left:17px; }
  .tg-next::after { right:17px; }
}
@media (orientation:landscape) and (max-height:500px) {
  .tg-header { padding:10px 54px 10px 16px; }
  .tg-header h2 { font-size:18px; }
  .tg-details { margin-top:4px; }
  .tg-details p { font-size:13px; margin-bottom:0; }
  .tg-date { margin-top:6px; font-size:10px; }
  .tg-supplementary { margin-top:5px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { .tg-effect { display:none; } }

/* A shared, readable top for every timeline popup. */
.timeline-popup-header { flex:none; max-height:min(34dvh,320px); overflow:auto; padding:clamp(18px,2vw,30px); padding-right:70px; scrollbar-width:thin; overscroll-behavior:contain; }
.timeline-popup-header h2 { margin:0; color:#fff; font:500 clamp(22px,2vw,34px)/1.2 Georgia,serif; text-wrap:balance; }
.timeline-popup-header .timeline-popup-detail { margin:10px 0 0; color:#e5e5e6; font:clamp(15px,1.15vw,19px)/1.45 Georgia,serif; }
.timeline-popup-header .timeline-popup-date { display:block; margin:0 0 10px; color:#aeafb2; font:400 11px/1.3 system-ui,sans-serif; letter-spacing:.1em; }
.timeline-popup .timeline-video-viewer,.timeline-popup .timeline-release-page { padding:16px 24px 24px; }
.timeline-popup .timeline-popup-summary { padding-top:12px; }
.timeline-popup iframe { max-height:calc(86svh - 140px); }
.timeline-popup .timeline-youtube-link { display:block; align-self:center; margin:16px 0 20px; color:#fff; font:16px/1.4 system-ui,sans-serif; text-decoration:underline; text-underline-offset:3px; }
.timeline-album-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; margin-top:8px; }
.timeline-album-nav button { min-width:68px; min-height:42px; padding:7px 12px; border:1px solid var(--timeline-accent); border-radius:8px; color:#fff; background:transparent; cursor:pointer; font:18px/1 Georgia,serif; }
.timeline-album-nav button:hover,.timeline-album-nav button[aria-current="page"] { color:#17120c; background:var(--timeline-accent); }
.timeline-album-nav button:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* 75% tinted black leaves 25% of the site visible behind each popup. */
.timeline-overlay[data-theme="live"],.timeline-overlay.tg-overlay[data-theme="live"] { background:rgb(29 1 5 / 75%); backdrop-filter:blur(2px); }
.timeline-overlay[data-theme="music"],.timeline-overlay.tg-overlay[data-theme="music"] { background:rgb(1 9 28 / 75%); backdrop-filter:blur(2px); }
.timeline-overlay[data-theme="art"],.timeline-overlay.tg-overlay[data-theme="art"] { background:rgb(28 17 1 / 75%); backdrop-filter:blur(2px); }
.timeline-overlay[data-theme="word"],.timeline-overlay.tg-overlay[data-theme="word"] { background:rgb(17 3 28 / 75%); backdrop-filter:blur(2px); }
.timeline-overlay[data-theme="press"],.timeline-overlay.tg-overlay[data-theme="press"] { background:rgb(13 13 16 / 75%); backdrop-filter:blur(2px); }

/* Center every island year list, including categories with only four years. */
.section-5 .timeline-years { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:13px; row-gap:4px; overflow:visible; }
.section-5 .timeline-years a { flex:none; color:#050505!important; text-shadow:0 1px 2px #fff,0 0 3px #fff!important; }
.section-5 .continuous-timeline { padding-top:50px; }
.section-5 .timeline-entry time { font-weight:400!important; }
.section-5 .archive-scroll { scroll-behavior:auto; overflow-anchor:none; }

/* Timeline introduction: the island stays above one speech bubble per category. */
@font-face {
  font-family:"Caveat Timeline";
  src:url("./fonts/Caveat-variable.ttf") format("truetype");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}
.section-5 .timeline-shell { padding-top:14px; }
.section-5 .calendar-biography {
  position:relative;
  z-index:1;
  width:min(calc(100% + 20px),var(--bubble-max-width,800px));
  margin:26px 0 8px -20px;
  padding:0;
  text-align:left;
}
.section-5 .timeline-shell[data-theme="press"] .calendar-biography { --bubble-max-width:700px; }
.section-5 .timeline-shell[data-theme="art"] .calendar-biography { --bubble-max-width:620px; }
.section-5 .timeline-shell[data-theme="word"] .calendar-biography { --bubble-max-width:550px; }
.section-5 .archive .calendar-biography p {
  /* timeline-speech.js measures the copy and centers its content box in the
     illustrated white field as the font, viewport, or text changes. */
  --bubble-copy-left:18%;
  --bubble-copy-right:8%;
  position:relative;
  display:block;
  min-height:0;
  box-sizing:border-box;
  margin:0;
  padding:clamp(36px,5%,50px) var(--bubble-copy-right) clamp(36px,5%,50px) var(--bubble-copy-left);
  border:0;
  border-radius:0;
  background:transparent url("./timeline-speech-wide.webp?v=20260927-optimized") center / 100% 100% no-repeat;
  box-shadow:none;
  color:#24180f!important;
  text-shadow:none!important;
  font:400 clamp(24px,2.1vw,29px)/1.12 "Caveat Timeline","Bradley Hand",cursive;
  text-wrap:pretty;
  overflow-wrap:anywhere;
}
.section-5 .calendar-biography p::before { content:none; }
.section-5 .calendar-biography strong { font-weight:700; }
.section-5 .calendar-biography a { color:#4a251b!important; text-decoration-color:#4a251b; text-decoration-thickness:1.5px; }
.section-5 .calendar-biography .bio-icon { color:#1c130d!important; }
.section-5 .calendar-biography .bio-emphasis { font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.section-5 .calendar-biography a[href*="youtube.com/@dennisagerblad"] { font-size:.86em; white-space:nowrap; }
.section-5 .calendar-biography .bio-year-link { display:inline; padding:0; border:0; background:none; color:#4a251b; font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.section-5 .calendar-biography .bio-year-link:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.section-5 .timeline-shell[data-theme="press"] .calendar-biography p:not(:nth-child(1)),
.section-5 .timeline-shell[data-theme="live"] .calendar-biography p:not(:nth-child(2)),
.section-5 .timeline-shell[data-theme="music"] .calendar-biography p:not(:nth-child(3)),
.section-5 .timeline-shell[data-theme="art"] .calendar-biography p:not(:nth-child(4)),
.section-5 .timeline-shell[data-theme="word"] .calendar-biography p:not(:nth-child(5)) { display:none!important; }
@media (max-width:760px) and (orientation:portrait) {
  .section-5 .timeline-shell { padding-top:64px; }
  .is-open.section-5 .portrait-underlay {
    background-position:11% -39svh;
    background-size:auto 160svh;
  }
  .section-5 .calendar-biography {
    width:calc(100% - 12px);
    max-width:none;
    margin:12px 6px 8px;
  }
  .section-5 .archive .calendar-biography p {
    --bubble-copy-left:16%;
    --bubble-copy-right:10%;
    padding:90px var(--bubble-copy-right) 85px var(--bubble-copy-left);
    background-image:url("./timeline-speech-portrait.webp?v=20260927-optimized");
    font-size:clamp(21px,5.8vw,27px);
    line-height:1.1;
  }
}
@media (max-width:320px) and (orientation:portrait) {
  .section-5 .archive .calendar-biography p { font-size:20px; }
}
@media (max-width:300px) and (orientation:portrait) {
  .section-5 .archive .calendar-biography p { hyphens:auto; }
}
@media (min-width:761px) and (max-width:850px) {
  .section-5 .timeline-controls { top:12px; }
}
/* At tablet portrait widths there is room for the island beside the logo. */
@media (min-width:620px) and (max-width:760px) and (orientation:portrait) {
  .section-5 .timeline-shell { padding-top:14px; }
  .section-5 .timeline-controls { top:12px; }
}
@media (max-width:1000px) and (orientation:landscape) and (max-height:650px) {
  .section-5 .timeline-shell { width:100%; margin-left:0; padding:12px 12px 20px; }
  .section-5 .calendar-biography {
    display:block!important;
    width:min(78vw,720px);
    flex:0 0 min(78vw,720px);
    max-width:none;
    margin:10px 0 8px 5.5vw;
  }
  .section-5 .archive .calendar-biography p {
    --bubble-copy-left:18%;
    --bubble-copy-right:8%;
    padding-top:26px;
    padding-bottom:25px;
    font-size:clamp(20px,2.6vw,24px);
    line-height:1.08;
  }
}
@media (max-width:760px), (max-width:1100px) and (max-height:600px) {
  .timeline-popup-header { padding:18px 54px 16px 18px; }
  .timeline-popup-header h2 { font-size:22px; }
}

/* The autobiography uses the current popup, with its original photos and prose. */
.timeline-popup-biography-dialog { width:min(900px,calc(100vw - 40px)); }
.timeline-popup-biography {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:clamp(20px,3vw,38px);
  scrollbar-width:thin;
}
.timeline-popup-biography p {
  max-width:680px;
  margin:0 auto 1.6em;
  color:#f4f1ed;
  font:400 clamp(17px,1.35vw,21px)/1.55 Georgia,serif;
  text-align:left;
}
.timeline-popup-biography figure { width:max-content; max-width:100%; margin:0 auto clamp(26px,4vw,44px); }
.timeline-popup-biography img { display:block; width:auto; height:auto; max-width:100%; margin:auto; }
.timeline-popup-biography figcaption { margin-top:8px; color:#d4d0cd; font:400 14px/1.4 system-ui,sans-serif; text-align:center; }
@media (max-width:760px) {
  .timeline-popup-biography-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); }
  .timeline-popup-biography { padding:18px; }
}

/* Small playback control in the photograph's lower right corner. */
.tg-rotation { position:absolute;right:12px;bottom:12px;z-index:4;width:44px;height:44px;padding:2px;border:0;border-radius:50%;background:transparent;cursor:pointer;filter:drop-shadow(0 2px 3px #000); }
.tg-rotation svg {display:block;width:40px;height:40px;}
.tg-rotation:disabled {cursor:default;}

.timeline-popup-gallery figcaption a { text-decoration:underline; text-underline-offset:3px; }

/* Images sit directly inside every timeline popup without a separate box. */
.timeline-popup .timeline-popup-summary figure img,
.timeline-popup .timeline-release-page img,
.timeline-popup .timeline-popup-biography img { background:transparent; border:0; box-shadow:none; }

.timeline-popup-face-the-strange .timeline-popup-gallery img { width:auto; align-self:center; }
.timeline-popup-face-the-strange .timeline-popup-gallery figcaption { margin:12px 0 0; }
.timeline-popup-face-the-strange .timeline-popup-gallery figcaption a { color:#fff; font:16px/1.4 system-ui,sans-serif; text-decoration:underline; text-underline-offset:3px; }

/* One spacing and type system for all Timeline dialogs. */
.timeline-overlay { padding:32px; }
.timeline-overlay :is(.timeline-popup,.tg-dialog) {
  box-sizing:border-box;
  border-radius:16px;
  padding:20px;
  max-width:calc(100vw - 64px);
  max-height:calc(100dvh - 64px);
  overflow:auto;
  scrollbar-width:thin;
  font-family:Helvetica,Arial,sans-serif;
}
.timeline-overlay :is(.timeline-popup,.tg-dialog) :is(h2,p,time,a,button,summary,figcaption) {
  font-family:Helvetica,Arial,sans-serif;
}
.timeline-overlay :is(.timeline-popup-header,.tg-header) {
  padding:0;
  margin:0 0 20px;
  max-height:none;
  overflow:visible;
  display:flow-root;
}
.timeline-overlay :is(.timeline-popup-header,.tg-header) :is(.tg-date,.timeline-popup-date) { margin-top:0; }
.timeline-overlay :is(.timeline-popup-header,.tg-header) h2 { padding-right:28px; }
.timeline-overlay :is(.timeline-popup-close,.tg-close) { top:8px;right:8px; }
.timeline-overlay .timeline-popup :is(.timeline-popup-summary,.timeline-release-page,.timeline-video-viewer,.timeline-popup-biography) {
  flex:none;
  padding:0;
  margin:0;
  max-height:none;
  overflow:visible;
}
.timeline-popup .timeline-popup-gallery { grid-template-columns:1fr; }
.timeline-popup :is(.timeline-popup-gallery,.timeline-popup-summary,.timeline-popup-biography) figure { width:100%;max-height:none; }
.timeline-popup :is(.timeline-popup-gallery,.timeline-popup-summary,.timeline-popup-biography) figure img {
  width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain;
}
.timeline-popup .timeline-release-page img { width:100%;height:auto;max-height:none; }
.timeline-popup :is(.timeline-video-player,iframe) { width:100%;max-width:100%;max-height:none;border:0;box-shadow:none; }
.tg-dialog .tg-viewer { margin:0; }
.tg-dialog .tg-stage { background:transparent; }
.tg-dialog .video-frame { margin:0 0 16px; }
.tg-dialog .tg-video { width:100%;height:auto;margin:0; }
.tg-dialog[data-entry-date="2017-03-30"] .tg-video { width:100%;height:auto;margin:0; }
.tg-dialog .tg-video-link { width:fit-content;max-width:100%;margin:0 0 20px; }
.tg-video-after-images { margin-top:20px; }
@media (max-width:760px), (max-width:1100px) and (max-height:600px) {
  .timeline-overlay { padding:16px; }
  .timeline-overlay :is(.timeline-popup,.tg-dialog) {
    width:calc(100vw - 32px);
    max-width:calc(100vw - 32px);
    max-height:calc(100dvh - 32px);
    border-radius:16px;
  }
}
/* Pointer interaction does not show the keyboard focus marker. */
html[data-aa-input="pointer"] .timeline-overlay :is(a,button,iframe,[tabindex]):focus {
  outline:none !important;box-shadow:none !important;
}

/* YouTube keeps focus feedback on its own controls, not around the whole video. */
body .timeline-overlay iframe:is(.timeline-video-player,.tg-video) { outline:none !important;box-shadow:none !important; }
.timeline-popup .timeline-youtube-link { margin:0; }
.timeline-popup .timeline-popup-biography p { max-width:none; }

/* Landscape slideshow dimensions come from the whole image series. */
@media (max-width:1100px) and (max-height:600px) and (orientation:landscape) {
  .timeline-overlay.tg-overlay { padding:20px; }
  .timeline-overlay .tg-dialog { max-width:calc(100vw - 40px); }
}