/* Photo timeline (/timeline/): built from the timeline experiment, 27 Oct 2026. Site tokens come from static.css. */
:root{--spine:#b98ab0;--shadow:0 6px 24px rgba(60,20,50,.18)}
:root[data-theme="dark"]{--spine:#7d5a78;--shadow:0 6px 24px rgba(0,0,0,.5)}
/* photos float behind the timeline, never over the header, banner or footer */
.banner,.global-search-band,.footer-band,.to-top-foot,.breadcrumb{position:relative;z-index:6}
main.tl-page{background:none;box-shadow:none;padding:0;margin:0}
.tl-intro{position:relative;z-index:6;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 0 18px;
  background:var(--paper);border-radius:6px;box-shadow:var(--paper-shadow);padding:16px 20px}
.tl-intro h1{margin:0;font:700 24px var(--heading-font);letter-spacing:.04em;text-transform:uppercase;color:var(--dd-maroon)}
.tl-intro p{margin:2px 0 0;color:var(--muted);font-size:14px}

#tlPhotos{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.tl-ph{position:absolute;left:0;top:0;will-change:transform;pointer-events:auto;cursor:pointer;transition:opacity .5s ease,filter .5s ease}
.tl-ph .tl-im{display:block;width:100%;height:100%;object-fit:cover;box-shadow:var(--shadow);background:var(--border);border-radius:6px;
  transition:border-radius .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.tl-ph.rnd .tl-im{border-radius:50%}
.tl-ph .tl-cap{position:absolute;left:50%;top:100%;margin-top:6px;transform:translateX(-50%);white-space:nowrap;
  font:400 11px var(--heading-font);letter-spacing:.06em;text-transform:uppercase;color:var(--text);
  background:var(--paper);padding:2px 8px;border-radius:10px;opacity:0;transition:opacity .4s;box-shadow:var(--shadow);max-width:240px;overflow:hidden;text-overflow:ellipsis}
body.tl-moving .tl-ph{opacity:.42;filter:blur(1.6px) saturate(.9)}
body.tl-still .tl-ph{opacity:.5;filter:none}
body.tl-still .tl-ph.focus{opacity:1}
body.tl-still .tl-ph.focus .tl-im{transform:scale(1.08)}
body.tl-still .tl-ph.focus .tl-cap{opacity:1}

.tl-main{position:relative;z-index:5;pointer-events:none;padding:8px 0 12vh}
.tl-main *{pointer-events:auto}
.tl-spine{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;pointer-events:none;
  background:linear-gradient(var(--spine),var(--gold) 50%,var(--spine));opacity:.8;border-radius:2px}
.tl-year{position:relative;min-height:150px}
.tl-ynode{position:relative;display:block;margin:0 auto;width:112px;height:112px;border-radius:50%;cursor:pointer;
  background:linear-gradient(145deg,var(--band-1),var(--band-2));color:#fff;border:4px solid var(--gold);
  box-shadow:var(--shadow);text-align:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tl-ynode:hover{transform:scale(1.08)}
.tl-ynode b{display:block;font:700 30px/1 var(--heading-font);margin-top:30px;letter-spacing:.03em}
.tl-ynode span{font-size:12px;opacity:.9}
.tl-year.collapsed .tl-months{display:none}
.tl-sparse{position:relative;display:table;margin:10px auto 0;padding:2px 12px;border-radius:12px;background:var(--paper);border:1px dashed var(--spine);
  font:400 12px var(--heading-font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tl-gap{position:relative;text-align:center;padding:30px 0}
.tl-gap span{display:inline-block;padding:3px 14px;border-radius:16px;background:var(--paper);border:2px dashed var(--spine);
  font:400 13px var(--heading-font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tl-month{position:relative;padding-top:34px}
.tl-mnode{position:relative;display:block;margin:0 auto;padding:3px 14px 3px 26px;border-radius:16px;background:var(--paper);color:var(--text);cursor:pointer;
  border:2px solid var(--gold);font:400 14px var(--heading-font);letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow);transition:transform .3s}
.tl-mnode:hover{transform:scale(1.08)}
.tl-mnode::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--gold)}
.tl-mnode em{font-style:normal;color:var(--muted);font-size:12px;margin-left:6px}
.tl-posts{position:relative;height:var(--h,0px);transition:height .5s ease}
.tl-month.collapsed .tl-posts{height:0!important;overflow:hidden}
.tl-month.collapsed .tl-posts *{display:none}
.tl-more{position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;font-size:13px;color:var(--link);background:var(--paper);
  padding:3px 12px;border-radius:12px;border:1px solid var(--border);white-space:nowrap;text-decoration:none}
.tl-card{position:absolute;width:min(300px,40vw);background:var(--paper);color:var(--text);border:1px solid var(--border);border-radius:10px;text-decoration:none;
  box-shadow:var(--shadow);padding:10px;display:flex;gap:10px;align-items:center;text-align:left;
  opacity:0;transform:translateY(24px);animation:tl-rise .7s cubic-bezier(.2,.8,.2,1) forwards,tl-bob 6s ease-in-out infinite;
  animation-delay:var(--d,0s),calc(var(--d,0s) + .7s)}
.tl-card.l{right:calc(50% + 34px)} .tl-card.r{left:calc(50% + 34px)}
.tl-card::after{content:"";position:absolute;top:50%;width:24px;height:2px;background:var(--spine)}
.tl-card.l::after{left:100%} .tl-card.r::after{right:100%}
.tl-card .tl-th{flex:none;width:64px;height:64px;object-fit:cover;border-radius:6px;background:var(--border)}
.tl-card.rnd .tl-th{border-radius:50%}
.tl-card .tl-th.none{display:grid;place-items:center;font:700 24px var(--heading-font);color:var(--spine)}
.tl-card h3{margin:0;font:400 15px/1.2 var(--heading-font);letter-spacing:.02em}
.tl-card p{margin:3px 0 0;font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-card time{font-size:12px;color:var(--link);text-transform:uppercase;letter-spacing:.06em}
.tl-card:hover{z-index:3;box-shadow:0 10px 34px rgba(60,20,50,.32)}
@keyframes tl-rise{to{opacity:1;transform:translateY(0)}}
@keyframes tl-bob{50%{translate:0 -6px}}
@media (prefers-reduced-motion: reduce){.tl-card{animation:tl-rise .01s forwards}.tl-ph{display:none}}

.tl-rail{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:1px}
.tl-rail button{background:none;border:0;padding:2px 6px;font:400 12px var(--heading-font);color:var(--muted);text-align:right;border-radius:8px;cursor:pointer}
.tl-rail button:hover,.tl-rail button.on{color:#fff;background:var(--band-2)}
#tlVeil{position:fixed;inset:0;z-index:100;background:var(--page-bg);opacity:0;pointer-events:none;transition:opacity .45s ease}
#tlVeil.on{opacity:1;pointer-events:auto}
.tl-flyer{position:fixed;z-index:101;margin:0;object-fit:cover;box-shadow:var(--shadow);transition:all .55s cubic-bezier(.65,0,.25,1)}
#tlHint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;background:var(--paper);border:1px solid var(--border);
  border-radius:16px;padding:4px 14px;font-size:13px;color:var(--muted);box-shadow:var(--shadow);transition:opacity .6s;pointer-events:none}
#tlErr{padding:80px 20px;text-align:center;color:var(--muted)}
@media (max-width:1100px){.tl-rail{display:none}}
@media (max-width:640px){
  .tl-card{width:calc(50% - 30px);padding:6px;flex-direction:column;text-align:center}
  .tl-card.l{right:calc(50% + 18px)} .tl-card.r{left:calc(50% + 18px)} .tl-card::after{display:none}
  body.tl-still .tl-ph,body.tl-moving .tl-ph{opacity:.3}
}