/* Phone layout (October 2026)
----------------------------------------------------
The 2006 layout is a fixed 1000px. Below 760px the columns stack,
the menu wraps and images scale. Desktop is unchanged.
---------------------------------------------------- */

/* Keyboard focus, all widths */
a:focus-visible {
	outline: 2px solid #937752;
	outline-offset: 2px;
}

@media only screen and (max-width: 760px) {

	body {
		font-size: 0.9em;
	}

	/* Frame */
	#wrapper,
	#wrapper_home,
	#header,
	#header_home,
	#footer,
	#footer_home,
	#footer_inside,
	#left_column,
	#left_column_box_container,
	#right_column,
	#box_two_columns_container,
	#two_columns_full,
	#two_columns_left,
	#two_columns_right,
	#back-to-top {
		float: none;
		width: auto;
		height: auto;
	}
	img {
		max-width: 100%;
		height: auto;
	}

	/* Header: logo, wrapped menu, phone and email */
	#header,
	#header_home {
		background: #fff;
	}
	/* Only the bottom curve of the desktop header image, not its divider lines */
	#header::after {
		content: "";
		display: block;
		height: 40px;
		background: url(../images/backgrounds/header_bg.gif) right bottom no-repeat;
	}
	#header_home {
		padding-bottom: 4px;
	}
	#header .logo,
	#header_home .logo {
		float: none;
		margin: 14px auto 0;
	}
	#menu {
		float: none;
		position: static;
		width: auto;
		margin: 8px 8px 0;
	}
	#menu ul {
		float: none;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#menu ul li {
		float: none;
		display: block;
	}
	/* Taller tap targets: the sprite stays in the middle 18px */
	#menu ul li h2 a {
		padding: 10px 0;
		background-origin: content-box !important;
		background-clip: content-box !important;
	}
	#header p,
	#header_home p {
		float: none;
		padding: 10px 16px 0;
		line-height: 1.7;
	}
	/* Email on its own line */
	#header p b + b::before,
	#header_home p b + b::before {
		content: "\A";
		white-space: pre;
	}

	/* Content */
	#content {
		margin: 20px 16px 0;
	}
	/* Gallery pages: intro, then pictures, then quotes */
	#content {
		display: flex;
		flex-direction: column;
	}
	#left_column {
		display: contents;
	}
	#left_column_box_container {
		order: 1;
	}
	#right_column {
		order: 2;
	}
	#quote {
		order: 3;
	}
	#content[style] {
		height: auto !important;
	}
	#left_column_box_container p,
	#two_columns_full,
	#two_columns_left,
	#two_columns_right {
		padding-left: 12px;
		padding-right: 12px;
	}
	#two_columns_full img[align],
	#two_columns_left img[align],
	#two_columns_right img[align] {
		float: none;
		display: block;
		margin: 0 auto 20px;
	}
	#quote {
		margin-top: 4px;
	}

	/* Thumbnails: two columns */
	#right_column ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin-bottom: 20px;
	}
	#right_column ul li,
	#right_column ul li.press_list {
		float: none;
		display: block;
		height: auto;
		margin: 0;
	}
	#right_column ul li a {
		display: block;
	}
	#right_column img {
		box-sizing: border-box;
		width: 100%;
	}
	#li_text {
		width: auto;
		height: auto;
	}
	#credits {
		float: none;
		text-align: center;
		padding-right: 0;
	}

	/* Home: the bride photo sits under the header, the panel loses the desktop flourishes */
	#wrapper_home {
		background: #fff;
	}
	#wrapper_home #content {
		margin: 0;
		padding: 380px 16px 40px;
		box-sizing: border-box;
		background: url(../images/backgrounds/bg_home.jpg) 63% -80px no-repeat;
	}
	#left_column_box_home_container {
		margin-top: 0;
	}
	#box_home {
		width: auto;
		height: auto;
		background: rgba(255, 255, 255, 0.72);
		border-top: 2px solid #fff;
		border-bottom: 2px solid #fff;
		overflow: hidden;
	}
	#box_home_content {
		float: none;
		width: auto;
		margin: 0;
		padding: 14px 12px;
	}
	#box_home_content p {
		padding: 0;
	}
	#footer_home > img {
		display: none;
	}

	/* Footer */
	#footer_inside {
		height: auto;
		overflow: hidden;
		padding-bottom: 12px;
	}
	#footer_inside p {
		float: none;
		text-align: center;
		padding: 8px 0 0;
	}
	#footer_inside a {
		display: inline-block;
		padding: 6px;
	}
}