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

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

@media (max-width: 900px) {
	body { margin: 32px auto 20px; padding: 0 16px; }

	#twc,
	#twc_inner,
	#header { width: auto; float: none; }

	h1 { float: none; margin: 0 0 18px; }
	h1 img { max-width: 100%; height: auto; }

	p,
	#header p { float: none; width: auto; text-align: left; font-size: 1.5em; line-height: 1.6em; margin: 0 0 10px; }

	img.hero { display: block; width: 100%; height: auto; margin-top: 14px; }

	p.footer { font-size: 1.2em; margin-top: 10px; }

	/* Stack the contact line on narrow phones */
	#header .sep { display: none; }
	#header .item { display: block; }
}

@media (min-width: 901px) {
	#header .item { display: inline; }
}