/* Canva look for html pages: letter-spaced Baskerville headings, Inter body */
.slide-page h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(1.4rem,2.6vw,2.2rem);text-align:center;margin:0 0 .4rem;line-height:1.3}
.slide-page h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:1rem}
.tl-intro{text-align:center;opacity:.65;margin:0 0 .5rem;font-size:.95rem}
/* The timeline column always sits in the left ~38vw of the viewport (the slide page is centred, so pull it to the
   viewport edge); the popup docks in the remaining right ~58vw, so opening it never moves the timeline. */
#tl-root{position:relative;display:grid;grid-template-columns:5rem 1fr;column-gap:1rem;margin-top:1.5rem;width:38vw;margin-left:calc(50% - 50vw + 1.5vw)}
.tl-head{position:sticky;top:0;z-index:3;background:var(--bg);padding:.4rem 0 .6rem;font-family:var(--font-display);font-weight:400;font-size:.95rem;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--line);white-space:nowrap;display:flex;align-items:baseline;gap:1rem}
.tl-head--axis{color:transparent}
.tl-legend{margin-left:auto;font-family:var(--font-body,inherit);font-size:.7rem;letter-spacing:.06em;opacity:.65;display:inline-flex;align-items:center;gap:.4rem}
.tl-legend i{display:inline-block}
.tl-legend__dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);box-sizing:border-box}
.tl-legend__rule{width:18px;border-top:2px solid var(--accent-2,#2a7f7a);margin-left:.5rem}
.tl-axis,.tl-lane{position:relative}
.tl-year{position:absolute;left:0;right:.6rem;text-align:right;font-size:.85rem;opacity:.55;transform:translateY(-50%)}
.tl-year::after{content:"";position:absolute;left:100%;top:50%;width:34vw;border-top:1px dashed var(--line-soft);pointer-events:none}
.tl-line{position:absolute;left:12px;width:0;border-left:2px solid var(--lane,var(--accent));opacity:.4}
.tl-lane[data-lane="real-data"]{--lane:var(--accent)}
.tl-entry{position:absolute;left:0;display:flex;align-items:center;gap:.6rem;background:none;border:0;color:var(--fg);font:inherit;padding:0;cursor:pointer;transform:translateY(-50%);white-space:nowrap}
.tl-dot{width:26px;height:26px;border-radius:50%;border:3px solid var(--lane,var(--accent));background:var(--bg);box-sizing:border-box;flex:none;transition:transform .15s,background .15s}
.tl-entry:hover .tl-dot,.tl-entry:focus-visible .tl-dot,.tl-entry.active .tl-dot{background:var(--lane,var(--accent));transform:scale(1.15)}
.tl-entry:focus-visible{outline:2px solid var(--lane,var(--accent));outline-offset:4px;border-radius:6px}
.tl-label{font-size:.95rem}
.tl-label small{opacity:.55;margin-left:.3rem}
/* waveform models: a thin teal rule across the lane, name sitting on its right end */
.tl-rule{--rule:var(--accent-2,#2a7f7a);left:0;display:flex;align-items:center;gap:.6rem;height:14px;z-index:1}
.tl-rule__line{flex:none;width:3.2rem;margin-left:calc(13px - 1.6rem);border-top:2px solid var(--rule);opacity:.75;transition:opacity .15s,border-width .15s}
.tl-rule__label{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rule);line-height:1;white-space:nowrap}
.tl-rule__label small{font-weight:400;letter-spacing:.04em;opacity:.7;margin-left:.35rem;color:var(--fg)}
.tl-rule:hover .tl-rule__line,.tl-rule:focus-visible .tl-rule__line,.tl-rule.active .tl-rule__line{opacity:1;border-top-width:3px}
.tl-rule:focus-visible{outline-color:var(--rule)}
.tl-empty{position:absolute;top:1rem;left:2.4rem;font-size:.85rem;opacity:.45;font-style:italic}
/* popup: docked in the right ~58vw, vertically centred */
/* popup lives between the 40px top chrome and the 2.6rem footer: centred in that band, never taller than it,
   and the figure cap leaves ~9rem for title / meta / caption so nothing is clipped on short viewports */
.tl-popup{--tl-band:calc(100vh - 40px - 2.6rem - 1.6rem);position:fixed;right:1.5vw;top:calc(40px + .8rem + (100vh - 40px - 2.6rem - 1.6rem) / 2);transform:translateY(-50%);width:58vw;max-height:var(--tl-band);overflow:auto;z-index:40;background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;box-sizing:border-box;box-shadow:var(--shadow)}
.tl-popup__title{font-family:var(--font-display);font-weight:400;font-size:1.15rem;margin:0 0 .2rem}
.tl-popup__meta{opacity:.75;font-size:.9rem;margin:0 0 .8rem}
.tl-popup__meta a{margin-left:.5rem}
.tl-popup__model{color:var(--accent-2,#2a7f7a);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
.tl-popup__fig{display:block;max-width:100%;max-height:calc(var(--tl-band,92vh) - 9rem);width:auto;margin:0 auto;background:#fff;border-radius:6px}
.tl-popup__nofig{padding:2rem;text-align:center;opacity:.6;border:1px dashed var(--line);border-radius:8px}
.tl-popup__cap{font-size:.85rem;opacity:.8;margin:.6rem 0 0;text-align:center}
.tl-missing{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}
/* phones / touch: full-width timeline, centred tap popup */
@media (hover:none),(max-width:900px){
  #tl-root{width:100%;margin-left:0}
  .tl-year::after{width:100vw}
  .tl-popup{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,1100px);max-height:88vh}
  .tl-popup__fig{max-height:calc(88vh - 9rem)}
}
@media (max-width:700px){#tl-root{grid-template-columns:3.2rem 1fr;column-gap:.4rem}.tl-label{font-size:.8rem}.tl-popup{width:94vw;padding:.8rem}.tl-legend{display:none}}