/* TSG Reading Page */
.tsg-reading {
	--tsg-ink: #382110;
	--tsg-muted: #767676;
	--tsg-bar: #9c7f5d;
	--tsg-track: #d8d8d8;
	--tsg-line: #d6d0c4;
}

.tsg-reading .tsg-sec { margin: 0 0 2.5em; }

.tsg-reading .tsg-h {
	font-size: 1.6em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tsg-ink);
	border-bottom: 1px solid var(--tsg-line);
	padding-bottom: .35em;
	margin: 0 0 1em;
}
.tsg-reading .tsg-h span {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tsg-muted);
	font-size: .6em;
	margin-left: .5em;
}

.tsg-reading .tsg-title {
	font-family: Merriweather, Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--tsg-ink);
	margin: 0 0 .2em;
}
.tsg-reading .tsg-title a { color: inherit; text-decoration: none; }
.tsg-reading .tsg-title a:hover { text-decoration: underline; }
.tsg-reading .tsg-author { font-size: .9rem; color: var(--tsg-muted); margin: 0 0 .5em; }

.tsg-reading .tsg-cover {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	background: #eee;
}

/* At Bat — Goodreads-style currently reading cards */
.tsg-reading .tsg-current { display: grid; gap: 1.25em; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tsg-reading .tsg-card { display: flex; gap: 1em; align-items: flex-start; }
.tsg-reading .tsg-card__img { flex: 0 0 100px; }
.tsg-reading .tsg-card__body { flex: 1; min-width: 0; }

.tsg-reading .tsg-progress { display: flex; align-items: center; gap: .6em; margin: .3em 0 .7em; font-size: .9rem; color: var(--tsg-ink); }
.tsg-reading .tsg-bar { flex: 0 0 70px; height: 10px; background: var(--tsg-track); display: block; overflow: hidden; }
.tsg-reading .tsg-bar > span { display: block; height: 100%; background: var(--tsg-bar); }

.tsg-reading .tsg-btn {
	display: inline-block;
	font-size: .85rem;
	padding: .3em .9em;
	border: 1px solid var(--tsg-ink);
	border-radius: 3px;
	color: var(--tsg-ink);
	text-decoration: none;
	background: #fff;
}
.tsg-reading .tsg-btn:hover { background: #f4f1ea; }

/* On Deck / Clubhouse — cover wall with hover tooltips */
.tsg-reading .tsg-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.tsg-reading .tsg-tile { margin: 0; }
.tsg-reading .tsg-tile__img { display: block; position: relative; }
.tsg-reading .tsg-tile .tsg-cover {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	transition: transform .15s ease, box-shadow .15s ease;
}
.tsg-reading .tsg-tile__img:hover .tsg-cover,
.tsg-reading .tsg-tile__img:focus-visible .tsg-cover {
	transform: translateY(-3px);
	box-shadow: 0 6px 14px rgba(0,0,0,.3);
}

.tsg-reading .tsg-tip {
	position: absolute;
	left: 50%;
	top: calc(100% + 8px);
	transform: translate(-50%, -4px);
	width: max-content;
	max-width: 200px;
	padding: .55em .75em;
	background: #2b1a0d;
	color: #fff;
	border-radius: 4px;
	font-size: .8rem;
	line-height: 1.35;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 20;
}
.tsg-reading .tsg-tip::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-bottom-color: #2b1a0d;
}
.tsg-reading .tsg-tip strong {
	display: block;
	font-family: Merriweather, Georgia, "Times New Roman", serif;
	font-size: .85rem;
	margin-bottom: .15em;
}
.tsg-reading .tsg-tip__author { display: block; opacity: .8; }
.tsg-reading .tsg-tip .tsg-stars { display: block; margin-top: .2em; font-size: .85rem; }
.tsg-reading .tsg-tip .tsg-stars__off { color: #6b5a4a; }
.tsg-reading .tsg-tile__img:hover .tsg-tip,
.tsg-reading .tsg-tile__img:focus-visible .tsg-tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.tsg-reading .tsg-stars { color: #e87400; letter-spacing: .1em; margin: 0; font-size: .95rem; }
.tsg-reading .tsg-stars__off { color: #ccc; }

.tsg-reading .tsg-empty { color: var(--tsg-muted); font-style: italic; }
.tsg-reading .tsg-disclosure { font-size: .8rem; color: var(--tsg-muted); border-top: 1px solid var(--tsg-line); padding-top: .75em; }

@media (max-width: 480px) {
	.tsg-reading .tsg-current { grid-template-columns: 1fr; }
	.tsg-reading .tsg-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Belt and braces: never show the share image as a banner on the reading page */
body:has(.tsg-reading) .page-header-image,
body:has(.tsg-reading) .page-header-image-single { display: none; }