.apw-tl{--ink:#1B2A20;--soft:#5B6D5F;--line:#D8DCD1;--acc:#4F6B3C;--panel:#F3F5EE;--bg:#FCFCFA;
  font-family:inherit;color:var(--ink);line-height:1.5;margin:1.5rem 0}
.apw-tl[hidden]{display:none}
.apw-tl *{box-sizing:border-box}
.apw-tl h3{font-size:1.3rem;margin:0 0 .2rem;line-height:1.25}
.apw-tl .apw-intro{margin:0 0 .9rem;color:var(--soft);font-size:.98rem;max-width:40rem}
.apw-tl .apw-count{font-weight:700;color:var(--ink)}
.apw-tl .apw-cta{color:var(--acc);font-weight:600;text-decoration:underline}
.apw-tl .apw-cta:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* --- era key --- */
.apw-tl .apw-key{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0 0 .8rem;
  font-size:.82rem;color:var(--soft)}
.apw-tl .apw-key span{display:inline-flex;align-items:center;gap:.3rem}
.apw-tl .apw-swatch{width:9px;height:9px;border-radius:50%;flex:none}

/* --- scroller --- */
.apw-tl .apw-scroller{position:relative}
.apw-tl .apw-track{
  display:grid;gap:0;grid-auto-flow:column;
  grid-auto-columns:clamp(140px,20vw,190px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding:2px 2px .5rem;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.apw-tl .apw-track > *{scroll-snap-align:start}
.apw-tl .apw-track::-webkit-scrollbar{height:6px}
.apw-tl .apw-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.apw-tl .apw-scroller::before,
.apw-tl .apw-scroller::after{
  content:"";position:absolute;top:0;bottom:.5rem;width:2.5rem;pointer-events:none;
  opacity:0;transition:opacity .2s ease;z-index:1}
.apw-tl .apw-scroller::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.apw-tl .apw-scroller::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.apw-tl .apw-scroller.can-left::before,
.apw-tl .apw-scroller.can-right::after{opacity:1}

.apw-tl .apw-arrow{
  position:absolute;top:calc(50% - 1.1rem);z-index:2;width:2.2rem;height:2.2rem;
  border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  font:inherit;font-size:1rem;line-height:1;cursor:pointer;display:none;
  align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.14)}
.apw-tl .apw-scroller.can-left  .apw-prev,
.apw-tl .apw-scroller.can-right .apw-next{display:flex}
.apw-tl .apw-prev{left:-.4rem}
.apw-tl .apw-next{right:-.4rem}
.apw-tl .apw-arrow:hover{border-color:var(--acc);color:var(--acc)}
.apw-tl .apw-arrow:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* --- stops --- */
.apw-tl .apw-stop{
  position:relative;background:none;border:0;padding:1.5rem .6rem .3rem 0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;display:block;width:100%}
.apw-tl .apw-stop::before{
  content:"";position:absolute;left:0;right:0;top:.62rem;height:2px;
  background:var(--era,var(--line));opacity:.35}
.apw-tl .apw-stop::after{
  content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:2px solid var(--era,var(--acc));box-sizing:border-box}
.apw-tl .apw-stop[aria-expanded="true"]::after{background:var(--era,var(--acc))}
.apw-tl .apw-stop:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:3px}
.apw-tl .apw-date{display:block;font-weight:700;font-size:.95rem;color:var(--era,var(--ink))}
.apw-tl .apw-title{display:block;font-size:.88rem;color:var(--soft);line-height:1.35;
  padding-right:.7rem;margin-top:.15rem}
.apw-tl .apw-stop:hover .apw-title{color:var(--ink)}

/* --- detail --- */
.apw-tl .apw-detail{margin-top:.6rem;padding:.9rem 1.1rem;background:var(--panel);
  border-left:3px solid var(--era,var(--acc));border-radius:3px;font-size:.95rem}
.apw-tl .apw-detail[hidden]{display:none}
.apw-tl .apw-eyebrow{display:block;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--soft);margin-bottom:.15rem}
.apw-tl .apw-detail b{display:block;font-size:.95rem;line-height:1.3}
.apw-tl .apw-detail p{margin:.4rem 0 0}
.apw-tl .apw-detail img{float:right;width:78px;height:78px;object-fit:cover;
  border-radius:4px;margin:0 0 .5rem .7rem}

@media (prefers-reduced-motion:reduce){
  .apw-tl .apw-track{scroll-behavior:auto}
  .apw-tl .apw-scroller::before,.apw-tl .apw-scroller::after{transition:none}
}

/* Thumbnail on each stop. Fixed aspect so every column lines up whether or
   not an event has a picture; a missing one leaves a plain tinted block. */
.apw-tl .apw-thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:4px;background:#E3E7DC;margin:.45rem .6rem .4rem 0;
  border:1px solid var(--line)}
.apw-tl .apw-stop:hover .apw-thumb{border-color:var(--era,var(--acc))}
