/*
		ActiveSo.org — Idea A: house-style single page.
		Section Co. design system: Google Sans Flex + Oswald, OKLCH tokens,
		BEM class names, hairline rules, noise dividers, 768px column.
	*/
	:root {
		--color-primary: oklch(0.0753 0.0168 66.15);
		--color-accent: oklch(59.63% 0.163 41.1);
		--color-accent--darker: oklch(54% 0.163 41.1);
		--color-off-white: oklch(0.9791 0 0);
		--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='noise' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.85' intercept='0.075'/%3E%3CfeFuncG type='linear' slope='0.85' intercept='0.075'/%3E%3CfeFuncB type='linear' slope='0.85' intercept='0.075'/%3E%3CfeFuncA type='table' tableValues='0 0.42'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23noise)'/%3E%3C/svg%3E");
		--font-size-base: 1.25rem;
		--menu-border: 0.5px solid var(--color-primary);
		--active-link-thickness: 0.3rem;
	}

	* { box-sizing: border-box; }

	html { overflow-x: clip; }

	body {
		background-color: var(--color-off-white);
		color: var(--color-primary);
		font-family: "Google Sans Flex", sans-serif;
		font-optical-sizing: auto;
		line-height: 1.5;
		margin: 0 auto;
		max-width: 768px;
		min-width: 320px;
		padding: 1rem;
		font-size: var(--font-size-base);
		text-wrap: pretty;
	}

	::selection { background: var(--color-accent); color: var(--color-off-white); }

	a {
		color: var(--color-primary);
		text-decoration: none;

		&:not(.button) {
			text-decoration-line: underline;
			text-decoration-color: var(--color-accent);
			text-decoration-thickness: 0.1rem;
			text-underline-offset: 0.4rem;
		}

		&:not(.button):hover,
		&.active {
			text-decoration-color: var(--color-primary);
			text-decoration-thickness: var(--active-link-thickness);
		}
	}

	h2, h3 {
		font-family: "Oswald", sans-serif;
		text-transform: uppercase;
	}

	/* ---------- Reading progress bar (pure CSS scroll-driven animation) ---------- */

	.reading-progress {
		position: fixed;
		top: 0;
		left: 0;
		height: 3px;
		width: 100%;
		z-index: 50;
		background-color: color-mix(in oklch, var(--color-accent) 88%, var(--color-primary));
		transform-origin: 0 50%;
		transform: scaleX(0);
		animation: reading-progress-grow auto linear both;
		animation-timeline: scroll(root);
	}

	@keyframes reading-progress-grow {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}

	/* Browsers without scroll-driven animations keep a static hairline; hide it there. */
	@supports not (animation-timeline: scroll(root)) {
		.reading-progress { display: none; }
	}

	@media (prefers-reduced-motion: reduce) {
		.reading-progress { display: none; }
	}

	/* ---------- Header ---------- */

	header {
		display: grid;
		grid-template-areas: "headline menu";
		grid-template-columns: 1fr auto;
		align-items: center;
		margin-bottom: 2rem;
	}

	nav menu {
		grid-area: menu;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-wrap: wrap;
		row-gap: 0.6rem;
		margin: 0;
		padding: 1.5rem;
		border-right: var(--menu-border);
		border-top: var(--menu-border);
		font-size: 1rem;
		min-width: 11rem;

		li {
			padding: 0;
			margin: 0;
			list-style-type: none;
			white-space: nowrap;
		}

		.menu__icon {
			display: inline-block; /* breaks the parent underline's run so the icon stays clean */
			text-decoration: none;
			width: 1.35em; /* fixed box: every label starts at the same x, emoji or SVG alike */
			text-align: center;
			margin-right: 0.35rem;

			svg {
				height: 1.05em;
				width: auto;
				vertical-align: -0.15em;
			}
		}
	}

	/* ---------- Headline (house pattern: noise-clipped Oswald) ---------- */

	#headline {
		position: relative;
		grid-area: headline;
		align-self: center;
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-size: clamp(2.25rem, 9vw, 6rem);
		font-weight: 400;
		line-height: 1;
		margin: 0;
		white-space: nowrap;
		z-index: 2;
	}

	#headline-animation {
		color: var(--color-accent);
		display: inline-block;
		animation: headline-animation-drop-in 1.4s cubic-bezier(0.45, 0, 0.55, 1) both;
	}

	@supports ((-webkit-background-clip: text) or (background-clip: text)) {
		#headline {
			color: transparent;
			background-image: var(--noise), linear-gradient(var(--color-primary), var(--color-primary));
			background-clip: text;
			-webkit-background-clip: text;
		}
	}

	@keyframes headline-animation-drop-in {
		0%   { transform: translateY(-100vh) scale(1, 1); opacity: 0; }
		3%   { opacity: 1; }
		40%  { transform: translateY(0)     scale(1.6, 0.5); }
		50%  { transform: translateY(-22vh) scale(1.1, 0.9); }
		66%  { transform: translateY(0)     scale(1.35, 0.65); }
		76%  { transform: translateY(-7vh)  scale(1.08, 0.92); }
		88%  { transform: translateY(0)     scale(1.15, 0.85); }
		100% { transform: translateY(0)     scale(1, 1); opacity: 1; }
	}

	@media (prefers-reduced-motion: reduce) {
		#headline-animation { animation: none; }
	}

	/* ---------- Intro ---------- */

	#hello {
		font-size: clamp(var(--font-size-base), 6vw, 1.6rem);
		margin: 0 0 1.5rem;
		padding: 1rem 0;
	}

	.intro__meta {
		margin: 0 0 2rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		align-items: center;
		font-size: 1rem;
		color: color-mix(in oklch, var(--color-primary) 68%, transparent);
	}

	/* ---------- Buttons & chips ---------- */

	.button {
		display: block;
		padding: 0.5rem;
		background-color: var(--color-primary);
		color: var(--color-off-white);
		border: 0;
		border-radius: 0.25rem;
		width: fit-content;
		font-family: "Oswald", sans-serif;

		svg {
			height: 1.5rem;
			width: auto;
			position: relative;
			top: 0.3rem;
		}

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

	.button--outline {
		background-color: transparent;
		color: var(--color-primary);
		border: 1px solid var(--color-primary);

		&:hover { background-color: color-mix(in oklch, var(--color-primary) 8%, transparent); }
	}

	.intro__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		align-items: center;
		margin-bottom: 2.5rem;
	}

	.chip {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		border: 0.5px solid var(--color-primary);
		padding: 0.35rem 0.6rem;
		font-family: ui-monospace, "SF Mono", Menlo, monospace;
		font-size: 0.85rem;
		background: color-mix(in oklch, var(--color-primary) 3%, transparent);
		max-width: 100%;
		overflow-x: auto; /* narrow screens: the non-wrapping command scrolls within the chip */

		code { white-space: nowrap; }

		button {
			all: unset;
			cursor: pointer;
			font-family: "Oswald", sans-serif;
			font-size: 0.7rem;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			padding: 0.15rem 0.4rem;
			background-color: var(--color-primary);
			color: var(--color-off-white);

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

			/* all: unset removes the default ring; give keyboard users an explicit one. */
			&:focus-visible {
				outline: 2px solid var(--color-accent--darker);
				outline-offset: 1px;
			}
		}
	}

	/* ---------- Divider (house) ---------- */

	.divider {
		margin-top: 2rem;
		margin-bottom: 2rem;
		display: flex;
		align-items: center;
		font-size: 2rem;
		font-family: "Oswald", sans-serif;
		font-weight: 800;
		text-transform: uppercase;
		color: var(--color-off-white);
		background-color: var(--color-primary);
		background-image: var(--noise);
		background-repeat: repeat;
		padding: 0.5rem;
		width: 100%;
	}

	.divider--overflow-right {
		width: calc(50vw + 50%);
		padding-left: 1rem;
	}

	.divider--overflow-left {
		width: calc(50vw + 50%);
		margin-left: calc(50% - 50vw);
		padding-left: calc(50vw - 50%);
	}

	/* ---------- Numbered sections ---------- */

	.topic {
		border-bottom: 1px solid var(--color-primary);
		padding-bottom: 2rem;
		margin-bottom: 2rem;

		&:last-of-type { border-bottom: none; }
	}

	.topic p { margin: 0.75rem 0; font-size: 1.05rem; }
	.topic p code, .topic td code, .topic li code {
		font-family: ui-monospace, "SF Mono", Menlo, monospace;
		font-size: 0.85em;
		background: color-mix(in oklch, var(--color-primary) 5%, transparent);
		padding: 0.05rem 0.3rem;
	}

	/* ---------- Code blocks ---------- */

	.code {
		margin: 1.25rem 0 0;
		border: 0.5px solid var(--color-primary);
		background: color-mix(in oklch, var(--color-primary) 3%, var(--color-off-white));
		max-height: 28rem;
		overflow: auto;

		pre {
			margin: 0;
			padding: 1rem;
			font-family: ui-monospace, "SF Mono", Menlo, monospace;
			font-size: 0.85rem;
			line-height: 1.6;
			tab-size: 4;
		}

		figcaption {
			display: flex;
			justify-content: space-between;
			gap: 1rem;
			padding: 0.35rem 1rem;
			border-bottom: 0.5px solid var(--color-primary);
			font-family: "Oswald", sans-serif;
			font-size: 0.75rem;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: color-mix(in oklch, var(--color-primary) 68%, transparent);
			/* The figure is the scroll container; pin the label bar while its code pans. */
			position: sticky;
			top: 0;
			left: 0;
			width: fit-content;
			min-width: 100%;
			background: color-mix(in oklch, var(--color-primary) 3%, var(--color-off-white));
		}
	}

	.tok-kw { color: var(--color-accent--darker); font-weight: 600; }
	.tok-str { color: color-mix(in oklch, var(--color-accent) 80%, var(--color-primary)); }
	.tok-com { color: color-mix(in oklch, var(--color-primary) 55%, transparent); font-style: italic; }
	.tok-tag { color: var(--color-primary); background: color-mix(in oklch, var(--color-accent) 18%, transparent); }

	/* ---------- Side-by-side mapping ---------- */

	.mapping {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 0;
		align-items: stretch;
		border: 0.5px solid var(--color-primary);
		margin-top: 1.25rem;

		.code {
			margin: 0;
			border: none;
			max-height: none;
		}

		.mapping__arrow {
			border-left: 0.5px solid var(--color-primary);
			border-right: 0.5px solid var(--color-primary);
			display: grid;
			place-items: center;
			padding: 0 0.6rem;
			font-family: "Oswald", sans-serif;
			font-size: 0.75rem;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			writing-mode: vertical-rl;
			color: var(--color-accent);
			background: color-mix(in oklch, var(--color-primary) 4%, transparent);
		}
	}

	@media (max-width: 700px) {
		.mapping {
			grid-template-columns: 1fr;

			.mapping__arrow {
				border-left: none;
				border-right: none;
				border-top: 0.5px solid var(--color-primary);
				border-bottom: 0.5px solid var(--color-primary);
				writing-mode: horizontal-tb;
				padding: 0.3rem;
			}
		}
	}

	/* ---------- Method specimens ---------- */

	.methods {
		display: grid;
		/* min(21rem, 100%) lets cards shrink below 21rem on narrow viewports instead of overflowing */
		grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
		gap: 1.25rem;
		margin-top: 1.25rem;
	}

	.method {
		display: flex;
		flex-direction: column;
		border: 0.5px solid var(--color-primary);
		background: color-mix(in oklch, var(--color-primary) 3%, var(--color-off-white));
	}

	.method--wide { grid-column: 1 / -1; }

	.method__head {
		padding: 0.55rem 1rem 0.6rem;
		border-bottom: 0.5px solid var(--color-primary);
	}

	.method__signature {
		margin: 0;
		font-family: ui-monospace, "SF Mono", Menlo, monospace;
		font-size: 0.9rem;
		font-weight: 700;

		.punct { color: var(--color-accent--darker); }
	}

	.method__desc {
		margin: 0.25rem 0 0;
		font-size: 0.9rem;
		line-height: 1.45;
		color: color-mix(in oklch, var(--color-primary) 78%, transparent);
	}

	.method .code {
		margin: 0;
		border: none;
		background: transparent;
		flex: 1;

		pre { font-size: 0.8rem; }
	}

	/* ---------- Tables ---------- */

	/* Scroll wrapper: a table wider than its container scrolls here instead of breaking the page. */
	.table-scroll {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Let keyboard users reach and pan the region; focus ring matches the house buttons. */
		&:focus-visible {
			outline: 2px solid var(--color-accent--darker);
			outline-offset: 1px;
		}

		.table {
			min-width: min(100%, 40rem); /* keep wide tables wide so columns stay readable while scrolling */
		}
	}

	.table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 1.25rem;
		font-size: 1rem;

		th {
			font-family: "Oswald", sans-serif;
			font-weight: 400;
			font-size: 0.8rem;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			text-align: left;
			border-top: 3px solid var(--color-primary);
			border-bottom: 1px solid var(--color-primary);
			padding: 0.5rem 0.75rem 0.5rem 0;
		}

		td {
			border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 20%, transparent);
			padding: 0.55rem 0.75rem 0.55rem 0;
			vertical-align: top;
		}

		tbody tr:last-child td { border-bottom: none; }

		td:first-child {
			font-family: ui-monospace, "SF Mono", Menlo, monospace;
			font-size: 0.85rem;
			white-space: nowrap;
		}

		/* Narrow viewports: let operation names wrap rather than clip (html overflow-x is clipped). */
		@media (max-width: 479px) {
			td:first-child { white-space: normal; }
		}
	}

	/* ---------- Errors list ---------- */

	.errors {
		border-top: 3px solid var(--color-primary);
		margin-top: 1.25rem;
		padding: 0;

		li {
			list-style: none;
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			gap: 1rem;
			padding: 0.55rem 0;
			border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 20%, transparent);

			&:last-child { border-bottom: none; }

			code {
				font-family: ui-monospace, "SF Mono", Menlo, monospace;
				font-size: 0.85rem;
			}
		}
	}

	@media (max-width: 640px) {
		.errors li { grid-template-columns: 1fr; }
	}

	/* ---------- Footer ---------- */

	footer {
		margin-top: 4rem;
		margin-bottom: 2rem;
		border-top: var(--menu-border);
		padding-top: 1.5rem;
		display: grid;
		grid-template-areas: "love links" "copyright links";
		grid-template-columns: 1fr auto;
		column-gap: 1.5rem;
		font-size: 1rem;
	}

	.footer__love {
		grid-area: love;

		.heart svg {
			fill: var(--color-accent);
			height: 1.25rem;
			width: auto;
			vertical-align: middle;
			margin: 0 -0.2rem;
		}
	}

	.footer__copyright {
		grid-area: copyright;
		align-self: end;
		white-space: nowrap;
	}

	nav.footer__links {
		grid-area: links;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.6rem;
		font-size: 0.95rem;
	}

	@media (max-width: 640px) {
		footer {
			grid-template-areas: "love" "links" "copyright";
			grid-template-columns: 1fr;
			row-gap: 1rem;
		}
	}