/* Timeline — radio-dial layout. Scoped to #tl-app. Data: timeline.json. Script: timeline.js */
@font-face{font-family:"TL Fjalla";src:url(../css/FjallaOne-Regular.woff2) format("woff2"),url(../css/FjallaOne-Regular.woff) format("woff");font-display:swap}
@font-face{font-family:"TL Hanken";src:url(../css/HankenGrotesk_wght_.woff2) format("woff2"),url(../css/HankenGrotesk_wght_.woff) format("woff");font-weight:100 900;font-display:swap}
[data-tl-hide]{display:none!important}
[data-tl-foot]{margin-top:48px!important}
#tl-app,.tl-pop{--slate:#3f6171;--slate-d:#2c4450;--cream:#efe4c8;--brass:#b89d6a;--wood:#3a2a1e;--wood-d:#1c130c;--ink:#6b5537;--orange:#f58337;--needle:#c8321e;--pale:#cddee8;
}
#tl-app{position:relative;clear:both;z-index:1;box-sizing:border-box;max-width:1240px;margin:0 auto;padding:8px 32px 72px;color:#fff;font-family:"TL Hanken",sans-serif}
#tl-app *,#tl-app *::before,#tl-app *::after{box-sizing:border-box}
#tl-app button{font:inherit}

/* dial */
.tl-dial{display:flex;align-items:center;gap:20px}
.tl-knob{flex:0 0 56px;width:56px;height:56px;border-radius:50%;border:4px solid var(--wood-d);background:#4a3526;color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tl-knob:hover{filter:brightness(1.18)}
.tl-knob:disabled{opacity:.45;cursor:default;filter:none}
.tl-knob svg{width:20px;height:20px}
.tl-bezel{flex:1 1 auto;min-width:0;padding:9px;border-radius:14px;background:var(--wood);border:3px solid var(--wood-d)}
.tl-glass{position:relative;height:92px;border-radius:7px;background:var(--cream);overflow:hidden;border:2px solid var(--brass);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.tl-glass:focus-visible{box-shadow:0 0 0 3px var(--orange)}
.tl-glass.drag{cursor:grabbing}
.tl-band{position:absolute;top:7px;left:0;right:0;text-align:center;font-family:"TL Fjalla",sans-serif;font-size:10px;letter-spacing:3.5px;color:var(--ink);pointer-events:none}
.tl-strip{position:absolute;top:24px;left:0;height:62px;display:flex;transition:transform .45s cubic-bezier(.3,.7,.2,1);will-change:transform}
.tl-glass.drag .tl-strip{transition:none}
.tl-stop{flex:0 0 72px;width:72px;height:62px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;cursor:pointer;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 12px) 6px 0/100% 10px no-repeat}
.tl-stop i{display:block;width:2px;height:18px;background:var(--wood)}
.tl-stop span{font-family:"TL Fjalla",sans-serif;font-size:14px;line-height:1;color:var(--ink);transition:font-size .2s,color .2s}
.tl-stop.dec span{font-size:17px;color:var(--wood)}
.tl-stop.on span{font-size:23px;color:var(--needle)}
.tl-needle{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1px;background:var(--needle);pointer-events:none}
.tl-needle::before{content:"";position:absolute;top:0;left:-6px;width:15px;height:10px;background:var(--needle);border-radius:0 0 4px 4px}

/* body */
.tl-body{display:flex;gap:48px;margin-top:28px;align-items:flex-start}
.tl-side{flex:0 0 400px;width:400px;position:sticky;top:24px}
.tl-tv{position:relative;height:440px;border-radius:10px;background:#1a1f22;border:10px solid var(--cream);overflow:hidden;display:flex;align-items:center;justify-content:center}
.tl-tv>button.tl-shot{width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;display:flex;align-items:center;justify-content:center}
.tl-tv img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tl-tv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.tl-static{position:absolute;inset:0;overflow:hidden;background:#777}
.tl-static svg{position:absolute;left:0;top:0;width:200%;height:200%;animation:tl-static .45s steps(1) infinite,tl-flicker .12s infinite}
.tl-static .roll{position:absolute;left:0;right:0;height:22%;background:rgba(255,255,255,.08);animation:tl-roll 3.2s linear infinite}
.tl-static .lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.tl-onair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 18px;background:rgba(26,31,34,.85);border:2px solid var(--cream);border-radius:6px;font-family:"TL Fjalla",sans-serif;letter-spacing:3px;color:var(--cream);white-space:nowrap}
@keyframes tl-static{0%{transform:translate(0,0)}10%{transform:translate(-18%,-9%)}20%{transform:translate(-6%,-27%)}30%{transform:translate(-31%,-4%)}40%{transform:translate(-12%,-38%)}50%{transform:translate(-40%,-20%)}60%{transform:translate(-3%,-15%)}70%{transform:translate(-25%,-33%)}80%{transform:translate(-37%,-7%)}90%{transform:translate(-9%,-30%)}100%{transform:translate(0,0)}}
@keyframes tl-flicker{0%,100%{opacity:.9}50%{opacity:1}}
@keyframes tl-roll{0%{transform:translateY(-100%)}100%{transform:translateY(500%)}}
@keyframes tl-in{0%{opacity:0;filter:brightness(3) contrast(.4)}100%{opacity:1;filter:none}}
.tl-in{animation:tl-in .35s ease-out}
@media (prefers-reduced-motion:reduce){.tl-static svg,.tl-static .roll,.tl-in{animation:none}.tl-strip{transition:none}}
.tl-cap{margin-top:12px;font-size:15px;line-height:1.45;color:var(--pale);min-height:22px}
.tl-cap a{color:var(--orange)}
.tl-cap audio{display:block;width:100%;margin-top:8px}
.tl-step{display:flex;align-items:center;gap:8px;margin-top:10px}
.tl-step button{width:32px;height:32px;border-radius:50%;border:2px solid var(--cream);background:var(--wood);color:var(--cream);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.tl-step button svg{width:16px;height:16px}

.tl-main{flex:1 1 auto;min-width:0}
.tl-year{font-family:"TL Fjalla",sans-serif;font-size:64px;line-height:.9;color:var(--pale);margin:0 0 14px}
.tl-entry+.tl-entry{margin-top:20px}
.tl-sub{font-family:"TL Fjalla",sans-serif;font-size:19px;color:var(--pale);margin:0 0 6px;letter-spacing:1px}
.tl-entry p{margin:0 0 12px;font-size:18px;line-height:1.6;max-width:640px}
.tl-link{color:var(--orange);background:none;border:0;padding:0 2px;margin:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;border-radius:3px;text-align:inherit;display:inline;line-height:inherit;font-size:inherit}
a.tl-link:hover,.tl-link:hover{color:#ffb07a}
.tl-link.on{background:var(--orange);color:#1f2f37;text-decoration:none}
.tl-link .ext{display:inline-block;width:.7em;height:.7em;margin-left:3px;vertical-align:.05em}
.tl-epi{margin-top:28px;font-style:italic;font-size:18px;line-height:1.6;color:var(--pale);max-width:640px}

/* popup */
.tl-pop{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:64px 96px 72px}
.tl-pop[hidden],.tl-pop [hidden]{display:none!important}
.tl-pop,.tl-pop *{box-sizing:border-box;font-family:"TL Hanken",sans-serif}
.tl-pop .bg{position:absolute;inset:0;border:0;padding:0;background:rgba(12,20,25,.93);cursor:pointer}
.tl-pop figure{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%;pointer-events:none}
.tl-pop img{max-width:100%;max-height:calc(100vh - 190px);object-fit:contain;border:10px solid var(--cream);pointer-events:auto;display:block}
.tl-pop figcaption{color:var(--pale);font-size:17px;text-align:center;max-width:760px;pointer-events:auto}
.tl-x,.tl-pv,.tl-nx{position:absolute;width:52px;height:52px;border-radius:50%;border:2px solid var(--cream);background:var(--wood);color:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.tl-x:hover,.tl-pv:hover,.tl-nx:hover{background:var(--orange);color:#1f2f37}
.tl-x{top:24px;right:24px}.tl-pv{left:24px;top:50%;margin-top:-26px}.tl-nx{right:24px;top:50%;margin-top:-26px}
.tl-x svg,.tl-pv svg,.tl-nx svg{width:22px;height:22px}

@media (max-width:900px){
  #tl-app{padding:8px 16px 56px}
  .tl-knob{flex-basis:38px;width:38px;height:38px;border-width:3px}
  .tl-knob svg{width:18px;height:18px}
  .tl-dial{gap:8px}
  .tl-bezel{padding:6px;border-radius:12px}
  .tl-glass{height:72px}
  .tl-band{display:none}
  .tl-strip{top:8px;height:62px}
  .tl-body{flex-direction:column;gap:24px;margin-top:24px}
  .tl-side{position:static;width:100%;flex-basis:auto}
  .tl-tv{height:min(72vw,420px)}
  .tl-year{font-size:52px}
  .tl-entry p,.tl-epi{font-size:17px}
  .tl-pop{padding:72px 12px 40px}
  .tl-pv{left:8px}.tl-nx{right:8px}.tl-x{top:12px;right:12px}
}