@import "./common.css";
@import "./barcode.css";

.fancy-hr {
	white-space: nowrap;
	overflow: hidden;

	margin-block: 2em;

	> * {
		display: flex;
		margin: 0 -1%;
		height: 0.3em;
		align-items: stretch;
		justify-content: space-between;
		gap: 10%;

		* {
			flex-grow: 1;
			transform: skew(-30deg);
		}
		:first-child,
		:last-child {
			flex-grow: 1.1;
		}
		:nth-child(1) {
			background: var(--color-a3);
		}
		:nth-child(2) {
			background: var(--color-a2);
		}
		:nth-child(3) {
			background: var(--color-fg);
		}
		:nth-child(4) {
			background: var(--color-a1);
		}
	}
}

main {
	display: grid;
	grid-auto-columns: 1fr 15em;
	grid-auto-rows: auto auto 1fr;
	gap: 4rem;
	row-gap: 0rem;
	max-width: 80rem;
	padding: 4rem;
	margin: auto;

	@media (max-width: 800px) {
		flex-direction: column;
		gap: 2rem;
		padding: 2rem;
		padding-top: 4rem;
		align-items: left;
	}

	/* table of contents */
	> aside {
		margin-top: -0.15lh;
		grid-row: 1 / 4;
		grid-column: 2 / 3;

		@media (max-width: 800px) {
			grid-row: 2 / 3;
			grid-column: 1 / 3;
		}

		flex-shrink: 0;

		> :first-child {
			margin-block-start: 0;
		}

		> ol {
			padding-left: 2em;
		}

		> .links {
			color: var(--color-a2);
			list-style-type: none;
			padding: 0;
			margin: 0;

			> li {
				margin-block: 0.25em;

				a {
					text-decoration: none;
				}

				svg {
					height: 1lh;
					aspect-ratio: 1;
					vertical-align: bottom;

					path {
						fill: currentColor;
					}
				}

				svg:last-child {
					vertical-align: baseline;
					height: 0.5lh;
				}
			}
		}
	}
	> .title-box {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
		@media (max-width: 800px) {
			grid-row: 1 / 2;
			grid-column: 1 / 3;
		}

		z-index: 1;

		position: relative;

		clip-path: inset(0 0 -1000px 0);

		display: flex;
		flex-direction: column;

		margin-block: 0 2rem;
		> h1 {
			font-size: 2.5em;
			margin-block: 3rem 1rem;
		}
		> .subtitle {
			color: var(--color-a2);
			font-size: 1.2em;
			height: 1lh;
			> .meta {
				float: right;
			}
		}
	}
	> article {
		grid-row: 2 / 4;
		grid-column: 1 / 2;

		@media (max-width: 800px) {
			grid-row: 3 / 4;
			grid-column: 1 / 3;
		}
		min-width: 0;
		overflow: hidden;
		position: relative;
	}
}

img {
	max-width: 100%;
}