/* contact/mobile.css — additive mobile rules for contact/index2.html.
   Double-gated: this file is linked with
   media="(pointer: coarse) and (max-width: 768px)" AND every rule is
   wrapped in the identical @media block below, so fine-pointer desktop
   rendering (including the 850px iframe interior) can never match. */
@media (pointer: coarse) and (max-width: 768px) {

	/* NOTE: the self-hosted P22 Cezanne @font-face that used to live here has
	   been promoted into the inline <style> of index2.html so it loads for ALL
	   viewports (desktop included), not just mobile. */

	/* Clean up the desktop float/translate centering hack so the heading
	   sits cleanly centered on a narrow screen. */
	.contactheader {
		float: none;
		position: static;
		top: auto;
		left: auto;
		-webkit-transform: none;
		transform: none;
		padding-left: 0;
		text-align: center;
	}

	/* 4B.2 — scale the CEO painting down to the viewport. The 55px white
	   box-shadow glow in the desktop block is untouched; the 24px margin
	   keeps the glow from clipping at the panel edges. */
	img.center {
		max-width: calc(100% - 24px);
		height: auto;
	}

	/* 4B.3 — shrink-wrap the photo-credit container around the scaled
	   image so .bottom-right tracks it. The desktop .bottom-right block
	   (right:80px, tuned to the 850px panel) stays untouched. */
	.container {
		display: table;
		margin: 0 auto;
	}

	/* Center every office thumbnail AND its caption on phones: drop the
	   float (and the .floated_img_center translate hack) so each image
	   stacks centered in its own row with the <p> caption centered under
	   it, instead of floating flush-left. */
	.floated_img,
	.floated_img_center {
		float: none;
		display: block;
		width: auto;
		padding-left: 0;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		left: auto;
		-webkit-transform: none;
		transform: none;
	}

	/* Let the 250x171 office thumbs shrink to the viewport, centered. */
	.floated_img img,
	.floated_img_center img {
		max-width: 100%;
		height: auto;
	}

}