@layer reset, global, layout;

@import "/lib/css/base-bones.css" layer(reset);

@layer global {
	:root {
		--family-sans: Inter, Aptos, system-ui, sans-serif;
		--family-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
		--family-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

		--back: #f5f5f5;
		--soft: #fff;
		--text: #333;

		--edge: #999;
		--accent: oklch(0.55 0.25 0);

		@media (prefers-color-scheme: dark) {
			--back: #000;
			--soft: #333;
			--text: #eee;
			--accent: oklch(0.86 0.11 0);
		}
	}

	:focus-visible {
		outline-offset: 0.2em;
		outline-color: var(--accent);
	}

	[id] {
		scroll-margin-top: 1rem;
	}
}

@layer layout {
	body {
		max-width: 65ch;
		margin: 0 auto;
		padding: 1em;
		font-family: var(--family-sans);
		font-feature-settings: "ss01" on, "ss04" on;
		line-height: 1.5;
		color: var(--text);
		background-color: var(--back);
	}

	main {
		margin-block: 1em;
	}

	nav {
		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}

		li {
			display: inline;
		}

		li+li::before {
			content: " - ";
		}
	}

	.nav__disabled {
		color: var(--edge);
		text-decoration: line-through;
	}

	.serif article {
		font-family: var(--family-serif);
	}

	.list-compact {
		:is(ul, article > ul) {
			padding: 0;
			list-style-type: none;
		}
	}

	body>footer {
		margin-block: 3em;
		padding-block: 3em 0;
		font-size: 12pt;
		text-align: center;
		border-block-start: 1px solid var(--edge);
	}

	#back-to-top {
		position: fixed;
		bottom: 1em;
		right: 1em;
		margin: 0;
		padding: 0.3em 0.6em;
		text-decoration: none;
		color: CanvasText;
		background-color: var(--soft);
		border: 1px solid var(--edge);

		&:hover,
		&:focus {
			color: Canvas;
			background-color: CanvasText;
			border-color: CanvasText;
		}
	}

	#no-adblocker-detected {
		text-align: start;
	}
}

@layer global {
	:is(h1, h2, h3, h4, h5, h6) {
		margin-block: 2rem 1rem;
		line-height: 1.2;
		text-wrap: balance;
		color: CanvasText;
		break-after: avoid;
	}

	a {
		text-underline-offset: 0.1em;

		&:hover,
		&:focus {
			color: var(--accent);
		}
	}

	:is(b, strong) {
		color: CanvasText;
	}

	.h-anchor {
		font: inherit;
		color: inherit;
		text-decoration: none;

		&:hover,
		&:focus {
			text-decoration: underline;
		}
	}

	hr {
		margin-block: 3em;
		border-color: var(--edge);
	}
}

@layer global.typography {
	#content a {
		font-weight: 500;
	}

	li {
		margin-block: 0.5em;
	}

	blockquote {
		margin: 1em 0;
		padding: 0.7em 1em;
		font-style: italic;
		background-color: var(--soft);
		border-inline-start: 0.2em solid var(--edge);
		box-shadow: var(--shadow);
		overflow-x: auto;

		a {
			color: inherit;
		}
	}

	details {
		margin-block: 1rem;
		background-color: var(--soft);
		border: 1px solid;

		&>div {
			padding: 1em;
		}
	}

	summary {
		padding: 0.5em 1em;
		background-color: var(--soft);
		cursor: pointer;

		&:hover,
		&:focus {
			color: var(--accent);
		}

		[open]>& {
			color: Canvas;
			background-color: CanvasText;

			&:hover,
			&:focus {
				background-color: var(--accent);
			}
		}
	}

	mark {
		padding: 2px;
		font-weight: 700;
		color: Canvas;
		background-color: CanvasText;
	}

	table {
		background-color: Canvas;
	}

	th,
	td {
		padding-inline: 0.5em;
		padding-block: 0.25em;
		border: 1px solid var(--edge);
		text-wrap: balance;
	}

	th {
		vertical-align: bottom;
		background-color: var(--soft);
	}

	td {
		vertical-align: top;
	}

	:where(code, kbd, pre) {
		font-family: var(--family-mono);
	}

	code {
		font-size: max(1rem, 100%);
	}

	code:not([language]) {
		color: var(--accent);
	}
}

@layer components {
	.cast-list-table {
		width: 40ch;
		max-width: 100%;
		margin: auto;
		background-color: transparent;
		border-collapse: initial;
		border-spacing: 1px 0.5em;

		td {
			padding-inline: 0;
			border: 0;
			border-block-end: 1px dotted;

			&:last-child {
				text-align: end;
				font-style: italic;
			}
		}
	}

	.nowrap {
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}
}

@media print {
	body {
		max-width: none;
		padding: 0;
		background-color: transparent;
	}

	nav,
	footer,
	#back-to-top,
	.hidden-print {
		display: none;
	}

	h1 {
		margin-block-start: 0;
	}

	p {
		break-inside: avoid-page;
	}
}

@layer pages {
	/* compact list */
	:is(.page-reviews-index) {
		main li {
			line-height: 1.2;
		}

		h2 {
			position: sticky;
			top: 0;
			margin-block: 1.5rem 0.5rem;
			padding-block: 0.5rem;
			background-color: var(--back);
			border-block-end: 1px solid var(--edge);
		}
	}

	.page-roc-island {
		main {
			h1 {
				font-size: 2.4em;
			}

			h2 {
				font-size: 1.8em;
			}

			h3 {
				font-size: 1.5em;
			}

			a {
				font-weight: 700;
				color: CanvasText;

				&:hover,
				&:focus {
					color: var(--accent);
				}
			}

			#no-adblocker-detected {
				display: none;
			}
		}
	}
}