/*
		.___                                   __    __          
	  __| _/______  ____   ____   ____   _____/  |__/  |_  ____  
	 / __ |\_  __ \/  _ \ /  _ \ /  ___\_/ __ \   __\   __\/ __ \ 
	/ /_/ | |  | \(  <_> |  <_> ) /_/  >  ___/|  |  |  | \  ___/ 
	\____ | |__|   \____/ \____/\___  / \___  >__|  |__|  \___  >
		 \/                    /_____/      \/                \/ 

*/

/* ============================================================
	 1. LAYOUT — TOPICS RAIL + TEXT COLUMN
	 Mirrors .post-layout, but the sticky rail holds sibling
	 topic pages instead of a table of contents.
	============================================================ */
.page-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
	margin-top: 2.4rem;
}

/* ============================================================
	 2. TOPICS RAIL
	============================================================ */
.page-topics {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
}

.page-topics-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--border);
}

.page-topics ol {
	list-style: none;
	margin-top: 0.3rem;
}

.page-topics li {
	border-bottom: 1px solid var(--border);
}

.page-topics li:last-child { border-bottom: 0; }

.page-topics a,
.page-topics .current {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: baseline;
	gap: 8px;
	padding: 0.62rem 0.15rem 0.62rem 0.5rem;
	border-left: 2px solid transparent;
	font-size: 13px;
	color: var(--text-dim);
}

.page-topics .t-num {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-muted);
	transition: color 0.25s;
}

.page-topics a {
	transition: color 0.25s, transform 0.3s var(--ease), opacity 0.3s var(--ease), border-color 0.25s;
}

.page-topics a:hover {
	color: var(--text);
	transform: translateX(4px);
	border-left-color: var(--border-focus);
}

.page-topics a:hover .t-num { color: var(--text); }

/* The page you're currently reading: not a link, accent-marked */
.page-topics .current {
	color: var(--text);
	border-left-color: var(--accent);
}

.page-topics .current .t-num { color: var(--accent); }

/* Sibling-dimming, echoing the homepage index rows.
   The current entry is not an <a>, so it stays lit while the rest recede. */
.page-topics ol:hover li:not(:hover) a { opacity: 0.35; }

/* ============================================================
	 3. LINK GROUPS — text blocks, then the posts that expand them.
		They sit inside .prose but are NOT width-constrained, so
		they run wider than the text measure — the same breakout
		rhythm figures have in posts.
	============================================================ */
.prose > p {
	margin: 1rem 0;
}

.prose > h2 {
	margin: 1rem 0;
}

.link-group {
	margin: 1.6rem 0 0.8rem;
}

/* Tighten the section-label (from droogette.css) so the rows
   flow directly beneath it */
.link-group .section-label {
	margin-bottom: 0.25rem;
	padding-bottom: 1rem;
}

.link-row {
	display: grid;
	grid-template-columns: 44px 1fr auto 26px;
	align-items: start;
	gap: 1.1rem;
	padding: 1.05rem 0.3rem;
	border-bottom: 1px solid var(--border);
	font-family: var(--font-sans);
	transition: opacity 0.35s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.link-row:last-child { border-bottom: 0; }

/* The homepage's signature sibling-dimming hover, again */
.link-rows:hover .link-row:not(:hover) { opacity: 0.3; }

.link-row:hover {
	transform: translateX(7px);
	background-color: rgba(255, 255, 255, 0.015);
}

.link-num {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-muted);
	padding-top: 0.25rem;
	transition: color 0.25s;
}

.link-row:hover .link-num { color: var(--text); }

.link-main {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.link-title {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--text);
	transition: color 0.25s;
}

.link-row:hover .link-title { color: #ffffff; }

.link-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-dim);
	font-weight: 300;
}

.link-tag {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding-top: 0.5rem;
	white-space: nowrap;
}

.link-arrow {
	padding-top: 0.3rem;
	color: var(--text-muted);
	transition: color 0.25s, transform 0.25s var(--ease);
}

.link-arrow svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
}

.link-row:hover .link-arrow {
	color: var(--text);
	transform: translate(3px, -3px);
}

/* ============================================================
	 4. PAGE FOOT
	 The spacing comes from .post-foot (post.css); the endmark,
	 prev/next nav and button styles are likewise shared.
	 ============================================================ */
.page-foot .btn-ghost { margin-top: 1.2rem; }

/* ============================================================
	 5. RESPONSIVE
	 ============================================================ */
@media (max-width: 960px) {
	.page-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.page-topics {
		position: static;
		margin-bottom: 2.6rem;
		border: 1px solid var(--border);
		border-radius: 5px;
		background-color: var(--bg-subtle);
		padding: 1.15rem 1.25rem 1.25rem;
	}

	.page-topics-label {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.page-topics ol {
		margin-top: 0.35rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.6rem;
	}

	.page-topics li { border-bottom: 0; }

	.page-topics a,
	.page-topics .current {
		padding: 0.5rem 0.1rem 0.5rem 0.4rem;
	}
}

@media (max-width: 620px) {
	.page-topics ol { grid-template-columns: 1fr; }

	.link-row {
		grid-template-columns: 34px 1fr 24px;
		gap: 0.8rem;
		padding: 0.95rem 0.15rem;
	}

	.link-tag { display: none; }
}

/* ============================================================
	 6. PRINT — post.css already inverts the palette and hides the
	 banner, header, footer, endmark and nav; pages only need to
	 lose the rail and the button. Link groups stay: they're content.
	 ============================================================ */
@media print {
	.page-layout { display: block; }
	.page-topics,
	.page-foot .btn-ghost { display: none; }
	.link-group { border-bottom: 1px solid var(--border); }
}

/* ============================================================
	 7. OPT-OUTS
	 ============================================================ */
/* Pages inherit the post drop cap for family resemblance.
   Opt out per page with: <div class="prose no-dropcap"> */
.prose.no-dropcap > p:first-of-type::first-letter {
	float: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
}