/* Template "timeline": chapters down a line (photo i with paragraph i), each one appearing as it scrolls into view;
   the line fills as the story is read. Colours only from themes.css. */

body[data-layout="timeline"] .show { background: linear-gradient(180deg, var(--bg), var(--bg-2) 55%, var(--bg)); }
body[data-layout="timeline"] .tl { scroll-behavior: smooth; }
body[data-layout="timeline"] .tl:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
body[data-layout="timeline"] .tl-hero { min-height: 92svh; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 80px 20px 40px; text-align: center; }
body[data-layout="timeline"] .tl-hero .eyebrow { margin: 0; }
body[data-layout="timeline"] .tl-hero h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1.05; color: var(--text); overflow-wrap: anywhere; }
body[data-layout="timeline"] .tl-hero .hint { margin-top: 2.2rem; }
body[data-layout="timeline"] .tl-hero .hint::after { content: '↓'; display: block; margin-top: .6rem; font-size: 1.2rem; letter-spacing: 0; }

body[data-layout="timeline"] .tl-body { position: relative; width: min(1000px, 100%); margin: 0 auto; padding: 24px 18px 24px; }
body[data-layout="timeline"] .tl-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--text) 14%, transparent); }
body[data-layout="timeline"] .tl-line i { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: 50% 0; background: linear-gradient(var(--accent), var(--gold)); }
body[data-layout="timeline"] .tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 12vh, 120px); }
body[data-layout="timeline"] .tl-item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: center;
  opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity 1s var(--soft), transform 1.1s var(--ease);
}
body[data-layout="timeline"] .tl-item.in { opacity: 1; transform: none; }
body[data-layout="timeline"] .tl-item::before {
  content: '♥'; position: absolute; z-index: 1; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; font-size: .85rem; color: var(--accent); background: var(--bg-2); border: 2px solid var(--accent);
}
body[data-layout="timeline"] .tl-photo { grid-row: 1; margin: 0; padding: 10px 10px 34px; background: #fff; transform: rotate(var(--tilt, -1.5deg)); box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 22px 50px rgba(0, 0, 0, .3); }
body[data-layout="timeline"] .tl-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #ece7e2; }
body[data-layout="timeline"] .tl-text { grid-row: 1; margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.6; color: var(--text); text-wrap: pretty; }
body[data-layout="timeline"] .tl-item.left .tl-photo { grid-column: 1; }
body[data-layout="timeline"] .tl-item.left .tl-text { grid-column: 2; }
body[data-layout="timeline"] .tl-item.right .tl-photo { grid-column: 2; --tilt: 1.5deg; }
body[data-layout="timeline"] .tl-item.right .tl-text { grid-column: 1; text-align: right; }

body[data-layout="timeline"] .tl-end { display: grid; justify-items: center; gap: 18px; padding: 90px 18px 72px; text-align: center; }
body[data-layout="timeline"] .tl-end .eyebrow { margin: 0; }
body[data-layout="timeline"] .tl-end h3 { margin: 0; font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(2.2rem, 6vw, 3rem); color: var(--text); overflow-wrap: anywhere; }
body[data-layout="timeline"] .tl-end .tl-heart { font-size: 2rem; color: var(--accent); }
body[data-layout="timeline"] .tl-end .prints { width: min(100%, 760px); margin: 12px 0 8px; }

body[data-layout="timeline"] .tl-dots { position: fixed; z-index: 13; right: 10px; top: 50%; transform: translateY(-50%); display: grid; gap: 4px; }
body[data-layout="timeline"] .tl-dot { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
body[data-layout="timeline"] .tl-dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); transition: background .3s, transform .3s var(--ease); }
body[data-layout="timeline"] .tl-dot[aria-current="step"]::before { background: var(--accent); transform: scale(1.25); }
body[data-layout="timeline"] .tl-dot:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; border-radius: 50%; }

@media (max-width: 759px) {
  body[data-layout="timeline"] .tl-line { left: 30px; }
  body[data-layout="timeline"] .tl-item { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding-left: 40px; }
  body[data-layout="timeline"] .tl-item::before { left: 12px; top: 0; transform: translate(-50%, 0); }
  body[data-layout="timeline"] .tl-item .tl-photo, body[data-layout="timeline"] .tl-item .tl-text { grid-column: 1; grid-row: auto; text-align: left; }
  body[data-layout="timeline"] .tl-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-layout="timeline"] .tl { scroll-behavior: auto; }
  body[data-layout="timeline"] .tl-item { opacity: 1; transform: none; transition: none; }
}