/* Mobile layer on top of the original style.css (which is a fixed 507px layout).
   Desktop is untouched; below 540px everything scales to the screen. */

/* Contact items: keep the original spacing on desktop, but let them wrap as units */
footer p.inner .c { display: inline-block; margin: 0 .3em; white-space: nowrap; }

a:focus-visible { outline: 2px solid #ed1c24; outline-offset: 2px; }

@media (max-width: 540px) {
	body { background-size: 1000px auto; }

	div.wrapper,
	article,
	section,
	footer {
		width: auto;
		max-width: 507px;
	}
	div.wrapper { padding: 0 16px; }

	div.text { width: auto; }

	img.top {
		display: block;
		width: 62%;
		max-width: 286px;
		height: auto;
	}

	header h1 {
		width: 100%;
		max-width: 382px;
		height: auto;
		aspect-ratio: 382 / 203;
		background-size: contain;
	}

	ul li, p { font-size: 1.5em; line-height: 1.45em; }

	footer p.inner { font-size: 1.6em; line-height: 1.7em; padding: 10px 0; }
	footer p.inner .c { display: block; margin: 0; }
	footer p.inner a { padding: 4px 0; }

	footer p.by { font-size: 1.1em; line-height: 1.5em; }
}