/* ———————————————————————————————*/
/*   Responsiveness
/*   Breakpoints copied from veravandeseyp.com:
/*   1600+ / 788–1280 / max 787
/* ———————————————————————————————*/

@media (min-width: 1600px) {
	html, body {
		font-size: 20px;
		line-height: 26px;
	}

	:root { --display-size: 34px; }

	.invert { width: 37px; height: 37px; flex: 0 0 37px; font-size: 23px; }
	.header .button,
	.header .button-subtitle-inner { height: 37px; }

	body { padding-top: calc(var(--m) * 6.5); }

	.row { grid-template-columns: 215px minmax(0, 1fr) auto; }
	.article-title { font-size: 20px; }
}

@media (min-width: 788px) and (max-width: 1280px) {
	:root { --display-size: 26px; }

	.row { grid-template-columns: 175px minmax(0, 1fr) auto; }
	.about-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: calc(var(--m) * 2); }
}

@media (max-width: 787px) {
	html, body {
		font-size: 16px;
		line-height: 20px;
	}

	:root { --display-size: 21px; }

	.invert { width: 25px; height: 25px; flex: 0 0 25px; font-size: 16px; }
	.header .button,
	.header .button-subtitle-inner { height: 25px; }

	body { padding-top: calc(var(--m) * 5); }

	.row {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--m) / 2);
	}

	.row-meta { justify-content: flex-start; }

	.about-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--m) * 2);
	}


	.footer { flex-direction: column; align-items: flex-start; }
}

/* ———————————————————————————————*/
/*   Diagrams on small screens
/* ———————————————————————————————*/

/* A 1600px schematic scaled into a 370px column puts its labels at about four
   pixels tall, which is not a diagram any more — it is a texture. Below the
   tablet breakpoint the breakout figures keep a legible intrinsic width and
   pan horizontally instead, so the reader can move across the drawing rather
   than squint at all of it at once. */
@media (max-width: 787px) {
	.figure.is-wide .figure-frame,
	.figure.is-full .figure-frame {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.figure.is-wide .figure-frame img,
	.figure.is-full .figure-frame img {
		width: 780px;
		max-width: none;
	}

	/* The caption doubles as the affordance — without a hint the overflow is
	   easy to miss on a touch screen. */
	.figure.is-wide figcaption::after,
	.figure.is-full figcaption::after {
		content: '  (scroll to pan)';
		color: var(--gray-dark);
	}
}

/* The panning figures keep their scrollability but not the grey track that
   comes with it — the caption already says the drawing pans. */
@media (max-width: 787px) {
	.figure.is-wide .figure-frame,
	.figure.is-full .figure-frame {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.figure.is-wide .figure-frame::-webkit-scrollbar,
	.figure.is-full .figure-frame::-webkit-scrollbar {
		display: none;
	}
}