/* ---------------------------------------------------------------------------
   LST Timeline — front-end styles
   Gold on near-black, carried over from the existing site so the WordPress
   build sits in the same visual world. Everything is scoped under .lst so it
   cannot leak into the rest of the theme.
   -------------------------------------------------------------------------*/

.lst {
	--lst-bg: #08070d;
	--lst-surface: #14121d;
	--lst-gold: #e8be67;
	--lst-gold-dim: #7a6330;
	--lst-cream: #ede0c4;
	--lst-text: #d0bc98;
	--lst-muted: #8a7050;
	--lst-hairline: rgba(232, 190, 103, 0.2);
	--lst-hairline-dim: rgba(232, 190, 103, 0.1);
	--lst-accent: var(--lst-gold);

	--lst-display: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--lst-body: "Cormorant Garamond", Georgia, "Iowan Old Style", serif;
	--lst-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--lst-gap: clamp(2.5rem, 6vw, 5rem);
	--lst-rail: 1px;

	color: var(--lst-text);
	font-family: var(--lst-body);
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.65;
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.lst *,
.lst *::before,
.lst *::after {
	box-sizing: border-box;
}

/* --- Controls ------------------------------------------------------------ */

.lst-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	padding-block: 1.5rem 2rem;
	border-bottom: 1px solid var(--lst-hairline-dim);
	margin-bottom: var(--lst-gap);
}

.lst-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.lst-chip {
	font-family: var(--lst-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--lst-muted);
	background: transparent;
	border: 1px solid var(--lst-hairline-dim);
	border-radius: 2px;
	padding: 0.45em 0.9em;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.lst-chip:hover {
	color: var(--lst-cream);
	border-color: var(--lst-hairline);
}

.lst-chip.is-on {
	color: var(--lst-bg);
	background: var(--lst-gold);
	border-color: var(--lst-gold);
}

.lst-tools {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	margin-left: auto;
}

.lst-sort {
	font-family: var(--lst-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--lst-cream);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lst-hairline);
	padding: 0.2em 0;
	cursor: pointer;
}

.lst-sort:hover {
	color: var(--lst-gold);
}

.lst-count {
	font-family: var(--lst-mono);
	font-size: 0.7rem;
	color: var(--lst-muted);
	margin: 0;
}

/* --- The spine ------------------------------------------------------------
   The signature element: one hairline thread with a glyph node per event.
   Everything else on the page stays quiet so this reads first.
   -------------------------------------------------------------------------*/

.lst-spine {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.lst-spine::before {
	content: "";
	position: absolute;
	inset-block: 0.75rem;
	left: 1.25rem;
	width: var(--lst-rail);
	background: linear-gradient(
		to bottom,
		transparent,
		var(--lst-hairline) 6%,
		var(--lst-hairline) 94%,
		transparent
	);
}

.lst-item {
	position: relative;
	padding: 0 0 var(--lst-gap) 3.75rem;
}

.lst-item:last-child {
	padding-bottom: 0;
}

.lst-item[hidden] {
	display: none;
}

.lst-node {
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--lst-accent);
	border-radius: 50%;
	background: var(--lst-bg);
	color: var(--lst-accent);
	box-shadow: 0 0 0 6px var(--lst-bg);
}

.lst-glyph {
	font-family: var(--lst-display);
	font-size: 1rem;
	line-height: 1;
}

/* --- Card ---------------------------------------------------------------- */

.lst-card {
	border-left: 2px solid transparent;
	padding-left: 0;
	transition: border-color 0.25s, padding-left 0.25s;
}

.lst-item:hover .lst-card,
.lst-item:focus-within .lst-card {
	border-left-color: var(--lst-accent);
	padding-left: 1rem;
}

.lst-card-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 18rem;
	object-fit: cover;
	margin-bottom: 1rem;
	filter: saturate(0.85) brightness(0.9);
}

.lst-epoch {
	font-family: var(--lst-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: var(--lst-muted);
	margin: 0 0 0.35rem;
}

.lst-title {
	font-family: var(--lst-display);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--lst-cream);
	margin: 0 0 0.3rem;
}

.lst-open {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
}

.lst-open:hover {
	color: var(--lst-gold);
}

.lst-open:focus-visible {
	outline: 2px solid var(--lst-gold);
	outline-offset: 4px;
}

.lst-sub {
	font-size: 1em;
	font-style: italic;
	color: var(--lst-muted);
	margin: 0 0 0.6rem;
}

.lst-when {
	font-family: var(--lst-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--lst-gold-dim);
	margin: 0 0 0.8rem;
}

.lst-excerpt {
	margin: 0;
	max-width: 62ch;
}

.lst-no-results,
.lst-empty {
	font-family: var(--lst-mono);
	font-size: 0.8rem;
	color: var(--lst-muted);
	padding-block: 3rem;
	text-align: center;
}

/* --- Two-sided layout at desktop width ----------------------------------- */

@media (min-width: 62rem) {
	.lst-spine::before {
		left: 50%;
		transform: translateX(-50%);
	}

	.lst-item {
		width: 50%;
		padding-left: 0;
		padding-right: 4rem;
	}

	.lst-item--right {
		margin-left: 50%;
		padding-left: 4rem;
		padding-right: 0;
	}

	.lst-item--left .lst-card {
		text-align: right;
		border-left: 0;
		border-right: 2px solid transparent;
		padding-right: 0;
	}

	.lst-item--left:hover .lst-card,
	.lst-item--left:focus-within .lst-card {
		border-right-color: var(--lst-accent);
		padding-left: 0;
		padding-right: 1rem;
	}

	.lst-item--left .lst-open {
		text-align: right;
	}

	/* Headline and labels mirror; the paragraph does not. Ragged-left body
	   copy is harder to read than the mirroring is worth. */
	.lst-item--left .lst-excerpt {
		margin-left: auto;
		text-align: left;
	}

	.lst-node {
		left: auto;
		right: -1.25rem;
	}

	.lst-item--right .lst-node {
		right: auto;
		left: -1.25rem;
	}
}

/* --- Reading panel --------------------------------------------------------
   The timeline never disappears. The panel slides in over it, and the spine
   stays visible behind the scrim.
   -------------------------------------------------------------------------*/

.lst-reader {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	justify-content: flex-end;
	/* The wrapper must not swallow clicks meant for the page behind it. */
	pointer-events: none;
}

.lst-reader[hidden] {
	display: none;
}

.lst-reader-scrim {
	position: absolute;
	inset: 0;
	background: rgba(8, 7, 13, 0.72);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: auto;
}

.lst-reader.is-open .lst-reader-scrim {
	opacity: 1;
}

.lst-reader-panel {
	position: relative;
	width: min(46rem, 100%);
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: linear-gradient(180deg, #100e18 0%, #08070d 60%);
	border-left: 1px solid rgba(232, 190, 103, 0.22);
	box-shadow: -30px 0 60px rgba(0, 0, 0, 0.55);
	padding: clamp(1.75rem, 4vw, 3.5rem);
	color: #d0bc98;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.7;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: auto;
}

.lst-reader.is-open .lst-reader-panel {
	transform: none;
}

.lst-reader-head {
	position: relative;
	padding-bottom: 1.25rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid rgba(232, 190, 103, 0.15);
}

.lst-reader-when {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: #7a6330;
	margin: 0 0 0.5rem;
}

.lst-reader-title {
	font-family: "Cinzel", Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.1;
	color: #ede0c4;
	margin: 0 0 0.4rem;
	padding-right: 3rem;
}

.lst-reader-sub {
	font-style: italic;
	color: #8a7050;
	margin: 0;
}

.lst-reader-close {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.6rem;
	line-height: 1;
	color: #8a7050;
	background: transparent;
	border: 1px solid rgba(232, 190, 103, 0.15);
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.lst-reader-close:hover {
	color: #e8be67;
	border-color: rgba(232, 190, 103, 0.45);
}

.lst-reader-body > * + * {
	margin-top: 1.1em;
}

.lst-reader-body p {
	max-width: 68ch;
}

.lst-reader-body strong {
	color: #ede0c4;
	font-weight: 600;
}

.lst-quote {
	margin: 0 0 1.75rem;
	padding-left: 1.25rem;
	border-left: 2px solid rgba(232, 190, 103, 0.35);
	font-size: 1.15em;
	font-style: italic;
	color: #ede0c4;
}

.lst-quote cite {
	display: block;
	margin-top: 0.6rem;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.68rem;
	font-style: normal;
	letter-spacing: 0.05em;
	color: #7a6330;
}

.lst-layer {
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(232, 190, 103, 0.12);
}

.lst-layer h4 {
	font-family: "Cinzel", Georgia, serif;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: #e8be67;
	margin: 0 0 0.75rem;
}

/* Bottom sheet on small screens, so the spine stays visible above it. */
@media (max-width: 48rem) {
	.lst-reader {
		align-items: flex-end;
	}

	.lst-reader-panel {
		width: 100%;
		height: 88vh;
		border-left: 0;
		border-top: 1px solid rgba(232, 190, 103, 0.22);
		border-radius: 4px 4px 0 0;
		transform: translateY(100%);
		box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.55);
	}
}

/* --- Accessibility floor -------------------------------------------------- */

.lst :focus-visible,
.lst-reader :focus-visible {
	outline: 2px solid #e8be67;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.lst *,
	.lst-reader * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

body.lst-reader-open {
	overflow: hidden;
}