/* Single articles & projects: strict single column in the timeline's
   language. Blue = project, amber = blog, same as the homepage.
   This stylesheet only loads on singles, so root-level rules are safe. */

html, body { overflow-x: clip; }

.bk-article-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 3.5rem 1.25rem 5rem;
}

.bk-article {
	--bk-accent: #2a7ae2;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #2c2c2c;
}
.bk-article--blog { --bk-accent: #b3661a; }

/* The parent theme floats article internals into pseudo-columns; this
   page is one column, full stop. */
.bk-article, .bk-article > *, .bk-article-content, .bk-article-foot {
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
}
.bk-article-foot { clear: both; }

/* ---------- Header ---------- */
.bk-article-header { text-align: left; margin-bottom: 0; }
.bk-article-kicker {
	display: flex; gap: .5rem; align-items: baseline;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #999;
	margin: 0 0 .6rem;
	position: relative;
	padding-left: 2rem;
}
.bk-article-kind { color: var(--bk-accent); font-weight: 600; }

/* The timeline connector: a line running in from off-screen left to the
   article's pin — this page branched off the timeline just out of view. */
.bk-article-kicker::before {
	content: '';
	position: absolute;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	left: -100vw;
	right: calc(100% - 1.2rem);
	background: linear-gradient(90deg, rgba(200,200,200,0), #d5d5d5 40%, var(--bk-accent));
}
.bk-article-kicker::after {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(1.2rem - 5.5px);
	transform: translateY(-50%);
	width: 11px; height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--bk-accent);
}

.bk-article .entry-title {
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	font-weight: 800;
	margin: 0 0 .8rem;
	color: #171717;
}

.bk-article-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .4rem; padding: 0; }
.bk-article-tags a {
	font-size: .78rem;
	color: #666;
	background: #f0f0f0;
	border-radius: 999px;
	padding: .25rem .75rem;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.bk-article-tags a:hover { background: #222; color: #fff; }

.bk-article-hero { margin: 1.6rem 0 0; }
.bk-article-hero img {
	width: 100%; height: auto;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* ---------- Share toolbar as a rule between header and article ---------- */
.bk-article-rule {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 2rem 0 2.2rem;
	font-size: .8rem;
}
.bk-article-rule::before,
.bk-article-rule::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e2e2e2;
}
.bk-share-label {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #aaa;
}
.bk-article-rule a, .bk-share-copy {
	color: #777;
	background: none;
	border: none;
	padding: .2rem .1rem;
	font-size: .8rem;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
	line-height: 1.4;
}
.bk-article-rule a:hover, .bk-share-copy:hover { color: #171717; border-bottom-color: #171717; }
.bk-share-copy.is-copied { color: var(--bk-accent); border-bottom-color: var(--bk-accent); }

/* ---------- Body ---------- */
.bk-article-content {
	font-size: 1.125rem;
	line-height: 1.75;
}
.bk-article-content > * + * { margin-top: 1.1em; }
.bk-article-content h2, .bk-article-content h3 {
	font-weight: 700;
	letter-spacing: -.01em;
	color: #171717;
	margin-top: 2em;
	line-height: 1.25;
}
.bk-article-content h2 { font-size: 1.6rem; }
.bk-article-content h3 { font-size: 1.25rem; }
.bk-article-content a { color: #2a7ae2; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bk-article-content a:hover { text-decoration-thickness: 2px; }
.bk-article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.bk-article-content figure { margin: 1.6em 0; }
.bk-article-content figcaption { font-size: .85rem; color: #999; text-align: center; margin-top: .5em; }
.bk-article-content blockquote {
	margin: 1.6em 0;
	padding: .3em 0 .3em 1.2em;
	border-left: 3px solid var(--bk-accent);
	color: #555;
	font-style: italic;
}
.bk-article-content pre {
	background: #171b22;
	color: #e6e9ef;
	border-radius: 10px;
	padding: 1rem 1.2rem;
	overflow-x: auto;
	font-size: .9rem;
	line-height: 1.6;
}
.bk-article-content code { font-size: .92em; }
.bk-article-content :not(pre) > code {
	background: #eef1f5;
	border-radius: 4px;
	padding: .12em .35em;
}
.bk-article-content ul, .bk-article-content ol,
.bk-article-content li {
	/* The parent sets list-style-position: inside (on li directly), which
	   strands the bullet on its own line whenever a list item contains a
	   block element (blockquote, p, figure). Outside is the sane default. */
	list-style-position: outside;
}
.bk-article-content ul, .bk-article-content ol { padding-left: 1.4em; }
.bk-article-content li + li { margin-top: .35em; }
.bk-article-content hr { border: none; border-top: 1px solid #e5e5e5; margin: 2.5em auto; width: 60%; }
.bk-article-content iframe, .bk-article-content video { max-width: 100%; border-radius: 10px; }

/* ---------- Travel band: a horizontal stretch of the timeline ---------- */
.bk-article-foot { margin-top: 3.5rem; }

.bk-travel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
	padding-top: 2.4rem;
	margin-bottom: 2.4rem;
}
/* The line runs off BOTH edges of the screen — the timeline passing through. */
@media (min-width: 601px) {
	.bk-travel::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100vw; right: -100vw;
		height: 2px;
		background: linear-gradient(90deg, #b3661a, #d5d5d5 35%, #d5d5d5 65%, #2a7ae2);
		opacity: .65;
	}
}

.bk-travel-card {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: .9rem 1.1rem;
	text-decoration: none;
	color: #2c2c2c;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.bk-travel-card--project { --bk-accent: #2a7ae2; }
.bk-travel-card--blog    { --bk-accent: #b3661a; }

/* Elbow up to the line, node on the line — same anatomy as the homepage. */
.bk-travel-card::before {
	content: '';
	position: absolute;
	top: -2.4rem;
	height: 2.4rem;
	width: 2px;
	background: #ccc;
}
.bk-travel-card.is-prev::before { left: 1.4rem; }
.bk-travel-card.is-next::before { right: 1.4rem; }
.bk-travel-card::after {
	content: '';
	position: absolute;
	top: calc(-2.4rem - 4.5px);
	width: 11px; height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--bk-accent, #555);
	z-index: 1;
}
.bk-travel-card.is-prev::after { left: calc(1.4rem - 4.5px); }
.bk-travel-card.is-next::after { right: calc(1.4rem - 4.5px); }

.bk-travel-card:hover {
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
	transform: translateY(-2px);
	border-color: #bbb;
}
.bk-travel-card.is-next { text-align: right; }
.bk-travel-dir { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bk-accent, #999); }
.bk-travel-title { display: block; font-weight: 600; margin: .3rem 0 .15rem; line-height: 1.3; color: #171717; }
.bk-travel-card time { font-size: .78rem; color: #aaa; }

.bk-article-back { text-align: center; margin: 0; }
.bk-article-back a {
	font-size: .9rem;
	color: #666;
	text-decoration: none;
	border-bottom: 1px solid #ccc;
	padding-bottom: 2px;
}
.bk-article-back a:hover { color: #171717; border-color: #171717; }

/* Mobile: cards stack, and the timeline runs DIAGONALLY behind them —
   in from the left to the Earlier card's top-left pin, corner to corner
   under the frosted cards, out from the Later card's bottom-right pin.
   The to-top-right gradient's 50% line touches those two corners at any
   box size, so the geometry survives any card height. */
@media (max-width: 600px) {
	.bk-travel {
		grid-template-columns: 1fr;
		gap: 1.6rem;
		padding-top: 0;
		background: linear-gradient(to top right,
			transparent calc(50% - 1px),
			rgba(150,150,150,.55) calc(50% - 1px) calc(50% + 1px),
			transparent calc(50% + 1px));
	}
	/* entry stub: off-screen left into the top-left corner */
	.bk-travel::before {
		content: '';
		position: absolute;
		top: -1px; height: 2px;
		left: -100vw; right: 100%;
		background: rgba(150,150,150,.55);
	}
	/* exit stub: out of the bottom-right corner, off-screen right */
	.bk-travel::after {
		content: '';
		position: absolute;
		bottom: -1px; height: 2px;
		left: 100%; right: -100vw;
		background: rgba(150,150,150,.55);
	}

	/* frosted glass: the diagonal shows through, fuzzy and lighter */
	.bk-travel-card {
		background: rgba(255,255,255,.72);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}

	/* pins sit exactly where the line enters and exits; no elbows */
	.bk-travel-card::before { display: none; }
	.bk-travel-card.is-prev::after {
		top: 0; left: 0; right: auto; bottom: auto;
		transform: translate(-50%, -50%);
	}
	.bk-travel-card.is-next::after {
		top: auto; left: auto; right: 0; bottom: 0;
		transform: translate(50%, 50%);
	}
	.bk-travel-card.is-next { text-align: right; }
}

/* ---------- Static pages: neutral pin, same shell ---------- */
.bk-article--page { --bk-accent: #555; }
.bk-article--page .bk-article-kind { color: #999; }

/* ---------- Contact form (theme-owned [contact-form]) ---------- */
.bk-contact-form { max-width: 560px; }
.bk-contact-form label { font-weight: 600; font-size: .95rem; color: #171717; }
.bk-contact-form .required { color: #b3661a; }
.bk-contact-form input[type="text"],
.bk-contact-form input[type="email"],
.bk-contact-form input[type="url"],
.bk-contact-form textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: #2c2c2c;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: .65rem .9rem;
	margin-top: .3rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.bk-contact-form input:focus,
.bk-contact-form textarea:focus {
	outline: none;
	border-color: #2a7ae2;
	box-shadow: 0 0 0 3px rgba(42, 122, 226, .15);
}
.bk-contact-form button[type="submit"] {
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
	background: #222;
	border: none;
	border-radius: 999px;
	padding: .7rem 1.8rem;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.bk-contact-form button[type="submit"]:hover { background: #2a7ae2; transform: translateY(-1px); }
.bk-contact-sent {
	background: #eef6ee;
	border: 1px solid #cfe6cf;
	border-radius: 10px;
	padding: .9rem 1.2rem;
	color: #2c5a2c;
}

/* Kicker labels are links to their category/type slice now */
.bk-article-kind a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.bk-article-kind a:hover { border-bottom-color: currentColor; }

/* Old WordPress.com content sometimes wraps each list item's text in its
   own <blockquote>. Those are formatting accidents, not quotes — render
   them as plain text so bullets keep their content. The outer blockquote
   (an actual quote containing the list) keeps its styling. */
.bk-article-content li blockquote {
	margin: 0;
	padding: 0;
	border-left: none;
	font-style: normal;
	color: inherit;
}
.bk-article-content li blockquote > p { margin: 0; }