/* Timeline front page.
   Structure: shared styles first, then desktop-only geometry (min-width:
   761px — center spine, projects left / blog right), then the mobile block
   (left-edge spine, one column). Keeping the two geometries in separate
   media queries means they never fight over specificity — the source of
   the v1.1 misplaced-pin bug. */

.bk-timeline {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	padding: 3rem 1rem 6rem;
}

.bk-tl-intro {
	text-align: center;
	margin-bottom: 3.5rem;
	position: relative;
	z-index: 3;
}
.bk-tl-tagline { color: #777; margin: .4rem 0 1.4rem; }

.bk-tl-sig { margin: 0; line-height: 0; }
.bk-tl-sig img { width: min(340px, 70vw); height: auto; }

.bk-tl-filters { display: inline-flex; gap: .5rem; }
.bk-tl-filter {
	border: 1px solid #d5d5d5;
	background: #fff;
	color: #333; /* parent theme paints button text white */
	border-radius: 999px;
	padding: .45rem 1.1rem;
	font-size: .85rem;
	cursor: pointer;
	transition: all .2s ease;
}
.bk-tl-filter.is-active { background: #222; color: #fff; border-color: #222; }

/* The spine spans exactly the item area on every screen size. */
.bk-tl-body { position: relative; }
.bk-tl-spine {
	position: absolute;
	top: .5rem; bottom: 0;
	width: 3px;
	background: linear-gradient(#bbb, #ddd);
	border-radius: 2px;
}
/* The travelled part of the timeline fills with the two accent colors. */
.bk-tl-spine::after {
	content: '';
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: var(--bk-progress, 0%);
	background: linear-gradient(180deg, #2a7ae2, #b3661a);
	border-radius: 2px;
}

.bk-tl-year { position: relative; }
.bk-tl-yearmark { position: relative; z-index: 2; margin: 2.5rem 0 1.5rem; }
.bk-tl-yearmark span {
	display: inline-block;
	background: #222;
	color: #fff;
	font-size: .9rem;
	letter-spacing: .08em;
	padding: .3rem 1rem;
	border-radius: 999px;
}

.bk-tl-item { position: relative; margin: .9rem 0; }

.bk-tl-node {
	position: absolute; top: 1.15rem;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #555;
	z-index: 2;
}
.bk-tl-elbow { position: absolute; top: 1.45rem; height: 2px; background: #ccc; }

.bk-tl-card {
	display: inline-block;
	max-width: 100%;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: .7rem 1rem;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.bk-tl-card time { display: block; font-size: .72rem; color: #999; letter-spacing: .05em; text-transform: uppercase; }
.bk-tl-card h3 { margin: .15rem 0 0; font-size: 1rem; line-height: 1.3; }
.bk-tl-kind { font-size: .7rem; color: #aaa; letter-spacing: .06em; text-transform: uppercase; }
.bk-tl-item[data-kind="project"] .bk-tl-kind { color: #2a7ae2; }
.bk-tl-item[data-kind="blog"] .bk-tl-kind { color: #b3661a; }
.bk-tl-item[data-kind="project"] .bk-tl-node { border-color: #2a7ae2; }
.bk-tl-item[data-kind="blog"] .bk-tl-node { border-color: #b3661a; }

/* Hover / tap-preview detail */
.bk-tl-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease, opacity .3s ease; }
.bk-tl-detail > * { overflow: hidden; min-height: 0; }
.bk-tl-detail img { max-width: 220px; border-radius: 6px; margin-top: .5rem; }
.bk-tl-detail p { font-size: .85rem; color: #666; margin: .45rem 0 0; }
.bk-tl-tags { color: #999 !important; font-size: .75rem !important; letter-spacing: .02em; }

/* Hover rules only where hovering exists — on touch, hover styles make
   iOS spend the first tap on hover emulation and swallow the click. */
@media (hover: hover) {
	.bk-tl-card:hover {
		box-shadow: 0 10px 30px rgba(0,0,0,.12);
		transform: translateY(-2px);
		border-color: #bbb;
	}
	.bk-tl-card:hover .bk-tl-detail { grid-template-rows: 1fr; opacity: 1; }
}
.bk-tl-item.is-previewing .bk-tl-card {
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
	transform: translateY(-2px);
	border-color: #bbb;
}
.bk-tl-item.is-previewing .bk-tl-detail { grid-template-rows: 1fr; opacity: 1; }

/* Close button appears only while previewing (touch flow) */
.bk-tl-close {
	display: none;
	position: absolute;
	top: .4rem; right: .4rem;
	width: 28px; height: 28px;
	border-radius: 50%;
	border: none;
	background: #eee;
	color: #444;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	align-items: center;
	justify-content: center;
}
.bk-tl-item.is-previewing .bk-tl-close { display: flex; }

/* Keyboard travel (j/k items, [ ] years) highlights the current stop */
.bk-tl-item.is-keyed .bk-tl-card {
	border-color: #2a7ae2;
	box-shadow: 0 0 0 3px rgba(42, 122, 226, .25), 0 10px 30px rgba(0,0,0,.12);
}

/* Scroll reveal (JS adds is-shown; without JS everything stays visible).
   The hidden state is defined via :not(.is-shown) so the revealed resting
   state carries NO transform — side-specific offset rules can never win a
   specificity tie against it and leave items permanently displaced. */
.bk-tl-anim .bk-tl-item { transition: opacity .5s ease, transform .5s ease; }
.bk-tl-anim .bk-tl-item:not(.is-shown) { opacity: 0; }
@keyframes bk-node-pop {
	0%   { transform: scale(.2); }
	60%  { transform: scale(1.5); }
	100% { transform: scale(1); }
}
.bk-tl-anim .bk-tl-item.is-shown .bk-tl-node { animation: bk-node-pop .45s ease both; }
.bk-tl-anim .bk-tl-elbow { transition: transform .35s ease .1s; }
.bk-tl-anim .bk-tl-item:not(.is-shown) .bk-tl-elbow { transform: scaleX(0); }

/* Filtering */
.bk-timeline[data-filter="project"] .bk-tl-item[data-kind="blog"],
.bk-timeline[data-filter="blog"] .bk-tl-item[data-kind="project"] { display: none; }

.bk-tl-end { text-align: center; color: #999; margin-top: 3rem; }

/* ---------- Desktop geometry: center spine, two sides ---------- */
@media (min-width: 761px) {
	.bk-tl-spine { left: 50%; margin-left: -1.5px; }
	.bk-tl-yearmark { text-align: center; }

	.bk-tl-item { width: 50%; min-height: 3.4rem; }
	.bk-tl-item.is-left  { left: 0;   padding-right: 3.2rem; text-align: right; }
	.bk-tl-item.is-right { left: 50%; padding-left: 3.2rem; }
	.bk-tl-item.is-left.is-far  { padding-right: 5.6rem; }
	.bk-tl-item.is-right.is-far { padding-left: 5.6rem; }

	.bk-tl-item.is-left  .bk-tl-node { right: -5.5px; }
	.bk-tl-item.is-right .bk-tl-node { left: -5.5px; }
	.bk-tl-item.is-left  .bk-tl-elbow { right: 4px; width: calc(3.2rem - 8px); transform-origin: right center; }
	.bk-tl-item.is-right .bk-tl-elbow { left: 5px;  width: calc(3.2rem - 8px); transform-origin: left center; }
	.bk-tl-item.is-far.is-left  .bk-tl-elbow { width: calc(5.6rem - 8px); }
	.bk-tl-item.is-far.is-right .bk-tl-elbow { width: calc(5.6rem - 8px); }

	.bk-tl-anim .bk-tl-item.is-left:not(.is-shown)  { transform: translateX(-2.2rem); }
	.bk-tl-anim .bk-tl-item.is-right:not(.is-shown) { transform: translateX(2.2rem); }
}

/* Year scrubber (desktop only) */
.bk-tl-scrub {
	position: fixed;
	right: .6rem; top: 50%;
	transform: translateY(-50%);
	display: flex; flex-direction: column; gap: .35rem;
	z-index: 5;
	padding: .5rem;
	touch-action: none; /* the rail is a drag surface */
}
.bk-tl-scrub-bubble {
	position: absolute;
	right: 30px; top: 0;
	background: #222; color: #fff;
	padding: .3rem .8rem;
	border-radius: 8px;
	font-size: 1.05rem; font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.bk-tl-scrub.is-dragging .bk-tl-scrub-bubble { opacity: 1; }
.bk-tl-scrub.is-dragging a span { opacity: 0 !important; }
.bk-tl-scrub a { width: 8px; height: 8px; border-radius: 50%; background: #ccc; transition: background .2s, transform .2s; position: relative; }
.bk-tl-scrub a:hover, .bk-tl-scrub a.is-current { background: #222; transform: scale(1.4); }
.bk-tl-scrub a span {
	position: absolute; right: 16px; top: 50%;
	transform: translateY(-50%);
	font-size: .7rem; background: #222; color: #fff;
	padding: .1rem .45rem; border-radius: 4px;
	opacity: 0; pointer-events: none; transition: opacity .2s;
	white-space: nowrap;
}
.bk-tl-scrub a:hover span, .bk-tl-scrub a.is-current span { opacity: 1; }

/* ---------- Mobile geometry: left-edge spine, one column ---------- */
@media (max-width: 760px) {
	/* border-box node is 11px wide (half 5.5). Spine center sits at
	   15.5px (left 14 + half of 3), so left:10px centers the node on it. */
	.bk-tl-spine { left: 14px; }
	.bk-tl-yearmark { text-align: left; padding-left: 2.6rem; }

	.bk-tl-item { padding-left: 2.6rem; }
	.bk-tl-node { left: 10px; }
	.bk-tl-elbow { left: 21px; width: calc(2.6rem - 21px); transform-origin: left center; }

	.bk-tl-card { display: block; }
	.bk-tl-detail img { max-width: 100%; }

	.bk-tl-anim .bk-tl-item:not(.is-shown) { transform: translateX(1.6rem); }
	.bk-tl-scrub { right: 0; gap: .3rem; }
	.bk-tl-scrub a { width: 6px; height: 6px; }
	.bk-tl-scrub a span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bk-tl-anim .bk-tl-item:not(.is-shown) { opacity: 1; transform: none; }
	.bk-tl-anim .bk-tl-item, .bk-tl-card, .bk-tl-detail { transition: none; }
	.bk-tl-anim .bk-tl-item.is-shown .bk-tl-node { animation: none; }
	.bk-tl-anim .bk-tl-elbow { transition: none; }
	.bk-tl-anim .bk-tl-item:not(.is-shown) .bk-tl-elbow { transform: none; }
}

/* ---------- Archive slices ---------- */
.bk-tl-archive-title {
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0;
	color: #171717;
}
.bk-tl-archive-desc { max-width: 520px; margin: .6rem auto 0; color: #777; font-size: .95rem; }
.bk-tl-empty { text-align: center; color: #999; margin: 3rem 0; }
.bk-tl-end a { color: #666; text-decoration: none; border-bottom: 1px solid #ccc; padding-bottom: 2px; }
.bk-tl-end a:hover { color: #171717; border-color: #171717; }

/* ---------- Homepage browse row: every type and category, with counts ---------- */
.bk-tl-browse {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	max-width: 640px;
	margin: 1.1rem auto 0;
}
.bk-tl-browse a {
	font-size: .78rem;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 999px;
	padding: .3rem .8rem;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bk-tl-browse a[data-kind="project"] { color: #2a7ae2; }
.bk-tl-browse a[data-kind="blog"]    { color: #b3661a; }
.bk-tl-browse a:hover { background: #222; color: #fff; border-color: #222; }
.bk-tl-browse-count { color: #b5b5b5; font-size: .85em; }
.bk-tl-browse a:hover .bk-tl-browse-count { color: #ddd; }