@layer application {
	main {
		display: flex;
		flex-direction: row;

		article {
			flex: 1;

			/* <article id="books"> … */
			&#books {
				/* styles for the books page */

				/* Primary rule: size all book cover images under #books */
				img {
					width: 250px;
					height: auto;
					display: block;
				}

				/* Optional: spacing/cleanup around the list */
				ul {
					list-style: none;
					margin: 0;
					padding: 0;
				}
				li {
					margin: 0 0 1.5rem;
				}
				a img {
					margin-bottom: 0.5rem;
				}

				/* If you ONLY want to affect images from your assets domain,
					 uncomment this and remove the generic img rule above. */
				/* img[src^="https://assets.christlikeintelligence.life/shared/img/"] {
					width: 250px;
					height: auto;
					display: block;
				} */
			}

			&#author {
				img {
					width: 750px;
					height: auto;
					display: block;
				}
			}
		}

		#dimension-nav {
			color: #fff;
			width: 250px;
			position: sticky;
			top: 1rem;
			margin-left: 1rem;

			a {
				color: #fff;
				text-decoration: none;

				&:visited { color: #fff; }

				/* subtle hover/active */
				&:hover { text-decoration: underline; }
				&:active { opacity: 0.85; }

				/* keyboard focus visibility */
				&:focus-visible {
					outline: 2px solid currentColor;
					outline-offset: 2px;
				}
			}

			ul {
				list-style: none;
				margin: 0;
				padding: 0;

				/* vertical stack with spacing */
				display: flex;
				flex-direction: column;
				gap: 0.5rem;
				margin-bottom: 0.5rem;

				li {
					/* defeat any global inline/inline-block rules */
					display: block;

					a {
						display: block;             /* larger click target */
						color: inherit;             /* use sidebar’s text color */
						line-height: 1.35;
						padding: 0.25rem 0.125rem;
						border-radius: 0.25rem;
						word-wrap: anywhere;        /* prevent overflow on long text */
					}

					/* optional “current page” highlight (set aria-current="page" on the link) */
					a[aria-current="page"], a.current {
						font-weight: 600;
						text-decoration: underline;
					}
				}
			}

			/* optional: a small note/link under the list */
			.note {
				margin-top: 0.75rem;
				font-size: 0.925rem;
				opacity: 0.9;
			}
		}

		/* Responsive: collapse to full width on narrow layouts */
		@media (max-width: 900px) {
		#dimension-nav {
			position: static;
			width: 100%;
			margin: 1rem 0 0 0;
		}
		}
	}
}