/* ============================================================
   Exchanged Timeline — the bookshelves ([et_work_index], 2.0.297)
   Token-first, like the read-here index: the page's --exl-* values
   when it defines them, the same values as fallbacks.
   ============================================================ */

.et-wi {
	--wi-ink:     var(--exl-ink, #292d30);
	--wi-muted:   var(--exl-ink-muted, #596269);
	--wi-rule:    var(--exl-rule, #d8dcdd);
	--wi-surface: var(--exl-surface, #ffffff);
	--wi-wash:    var(--exl-focus, #f8f9f8);
	--wi-accent:  var(--exl-crimson, #9b2335);
	--wi-accent-strong: var(--exl-crimson-strong, #7a1a29);
	--wi-teal:    var(--exl-teal, #286773);
	--wi-serif:   "EB Garamond", Garamond, "Palatino Linotype", Georgia, serif;
	--wi-sans:    "Source Sans 3", "Segoe UI", -apple-system, Roboto, Arial, sans-serif;

	font-family: var(--wi-sans);
	color: var(--wi-ink);
	margin: 0 0 2.5rem;
}
.et-wi *, .et-wi *::before, .et-wi *::after { box-sizing: border-box; }

/* Shelve by: Period · Author · Title */
.et-wi-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}
.et-wi-switch-label {
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wi-muted);
}
.et-wi-switch a {
	color: var(--wi-accent) !important;
	text-decoration: none !important;
	font-weight: 600;
	border-bottom: 1.5px solid transparent;
}
.et-wi-switch a:hover,
.et-wi-switch a:focus-visible { color: var(--wi-accent-strong) !important; border-bottom-color: currentColor; }
.et-wi-switch-on {
	font-weight: 600;
	color: var(--wi-ink);
	border-bottom: 1.5px solid var(--wi-ink);
}
.et-wi-switch-total {
	margin-left: auto;
	color: var(--wi-muted);
	font-variant-numeric: lining-nums;
}

/* The row of shelves (eras, or letters) */
.et-wi-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.875rem;
	padding: 0 0 1.25rem;
	margin: 0 0 1.75rem;
	border-bottom: 1px solid var(--wi-rule);
	font-size: 0.9375rem;
	line-height: 1.4;
}
.et-wi-jump a {
	color: var(--wi-muted) !important;
	text-decoration: none !important;
	border-bottom: 1.5px solid transparent;
}
.et-wi-jump a:hover,
.et-wi-jump a:focus-visible { color: var(--wi-accent) !important; border-bottom-color: currentColor; }

/* One shelf */
.et-wi-shelf { margin: 0 0 2.25rem; scroll-margin-top: 5rem; }
.et-wi-shelf-head {
	font-family: var(--wi-serif);
	font-weight: 500;
	font-size: 1.625rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wi-rule);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	color: var(--wi-ink);
}
.et-wi-shelf-head a { color: inherit !important; text-decoration: none !important; }
.et-wi-shelf-head a:hover,
.et-wi-shelf-head a:focus-visible { color: var(--wi-accent) !important; }
.et-wi-shelf-sub {
	font-family: var(--wi-sans);
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--wi-muted);
	font-variant-numeric: lining-nums;
}
.et-wi-shelf-count {
	margin-left: auto;
	font-family: var(--wi-sans);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wi-muted);
}

/* The books on it */
.et-wi-list { list-style: none; margin: 0; padding: 0; }
.et-wi-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem 0.75rem;
	padding: 0.4375rem 0;
	border-bottom: 1px solid var(--wi-rule);
}
.et-wi-item:last-child { border-bottom: 0; }
.et-wi-title {
	font-family: var(--wi-serif);
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--wi-ink) !important;
	text-decoration: none !important;
	border-bottom: 1.5px solid transparent;
}
a.et-wi-title:hover,
a.et-wi-title:focus-visible { color: var(--wi-accent) !important; border-bottom-color: currentColor; }
.et-wi-meta {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--wi-muted);
	font-variant-numeric: lining-nums;
}
.et-wi-meta a { color: var(--wi-muted) !important; text-decoration: none !important; border-bottom: 1px solid transparent; }
.et-wi-meta a:hover,
.et-wi-meta a:focus-visible { color: var(--wi-accent) !important; border-bottom-color: currentColor; }
.et-wi-dot { opacity: 0.6; }
.et-wi-marks { display: inline-flex; gap: 0.5rem; margin-left: auto; }
.et-wi-mark {
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wi-muted);
}
.et-wi-mark--read { color: var(--wi-teal); }
.et-wi-mark--free { color: var(--wi-teal); opacity: 0.85; }

.et-wi--empty p { color: var(--wi-muted); }

@media ( max-width: 600px ) {
	.et-wi-switch-total { margin-left: 0; flex-basis: 100%; }
	.et-wi-shelf-count { margin-left: 0; flex-basis: 100%; }
	.et-wi-marks { margin-left: 0; flex-basis: 100%; }
}