/*  chenarch.com — layout with CSS grid and flexbox, no floats.
    Centered and fluid up to 1440px (the banner images are 1200px, so not much wider).

    Type: 1rem = 20px. Three sizes: --text-small (16px), 1rem (20px), --text-large (24px).
    Space: everything uses the --space-* steps below.  */

:root
{
	--text-small: 0.8rem;
	--text-large: 1.2rem;

	--space-xs: 4px;
	--space-s: 8px;
	--space-m: 16px;
	--space-l: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;

	--page-gutter: var(--space-xl);
	--rule: #dbdbdb;
}

*
{
	padding: 0;
	margin: 0;
	border: 0;
}
html
{
	overflow-y: scroll;
	font-size: 20px;
}
body
{
	margin: 0;
	background: #fff;
	font-family: "Optima", "Candara", "Arial", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}
/* a flex column, so vertical margins add up rather than collapse */
#center
{
	display: flex;
	flex-direction: column;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--page-gutter);
}
img
{
	max-width: 100%;
}
a:link, a:visited, a:active
{
	color: #979797;
	text-decoration: none;
}
img
{
	transition: opacity 0.2s ease;
}
a:hover img
{
	opacity: 0.85;
}

/*  ####################  type  ####################  */

h2
{
	margin: var(--space-l) 0 var(--space-s) 0;
	font-size: var(--text-large);
	font-weight: 500;
	line-height: 1.25;
	color: #374c04;
}
h2:first-child
{
	margin-top: 0;
}
h2 a:link, h2 a:visited
{
	color: inherit;
}
h2 a:hover
{
	color: #d24602;
}
h4
{
	margin: var(--space-m) 0 var(--space-xs) 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	color: #630a0a;
}
h5
{
	font-size: var(--text-small);
	font-weight: 100;
	color: #630a0a;
}
p
{
	font-size: 1rem;
	color: #727272;
}
p a:link, p a:visited, p a:active
{
	color: #d24602;
}
p a:hover
{
	color: #ff7f01;
}

/*  ####################  header  ####################  */

/* logo on the left, contact button on the right, bottoms aligned */
.site-title
{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-m);
	padding-top: var(--space-xl);
	margin-bottom: var(--space-m);
}
/* logotype: logo square, then the site name in spaced caps. Sized in em
   so both shrink together to fit a phone. */
.site-name:link, .site-name:visited
{
	display: flex;
	align-items: center;
	gap: 0.55em;
	font-size: min(29.5px, calc((100vw - 32px) / 24));
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #8b1604;
}
.site-logo
{
	flex-shrink: 0;
	width: 1.6em;
	height: 1.6em;
}
/* the logo doesn't fade on hover like other linked images */
.site-name:hover .site-logo
{
	opacity: 1;
}

/* top navigation */
.site-nav
{
	display: flex;
	align-items: center;
	gap: var(--space-l);
}
.site-nav > a:link, .site-nav > a:visited
{
	font-size: 1.1rem;
	line-height: 1.25;
	color: #727272;
}
.site-nav > a:hover
{
	color: #d24602;
}
.site-nav > a.current
{
	color: #8b1604;
	box-shadow: inset 0 -1px 0 currentColor;
}
/* hamburger button, phones only */
.menu-toggle
{
	display: none;
}
.headerimage
{
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 320;
	background: url(../images/header/header-1200.png) center / cover;
}
.headerimage-exter { background-image: url(../images/header/header-exter.png); }
.headerimage-inter { background-image: url(../images/header/header-inter.jpg); }
.headerimage-katrina { background-image: url(../images/header/header-katrina.jpg); }
.headerimage-cottage { background-image: url(../images/header/header-cottage.jpg); }
.headerimage-painting { background-image: url(../images/header/header-painting.jpg); }
.headerimage-sculpture { background-image: url(../images/header/header-sculpture.jpg); }

/* breadcrumbs under the banner: Home › Section › Page */
.breadcrumbs ol
{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-top: var(--space-s);
	font-size: var(--text-small);
	color: #727272;
}
.breadcrumbs li + li::before
{
	content: "\203A";
	padding: 0 var(--space-s);
	color: #a9a9a9;
}
.breadcrumbs a:link, .breadcrumbs a:visited
{
	color: #979797;
}
.breadcrumbs a:hover
{
	color: #d24602;
}

/* "Back to Top" links at the foot of galleries, only as wide as their text */
a:has(> .chenarchbox)
{
	align-self: flex-start;
	margin-top: var(--space-xl);
}
.chenarchbox
{
	font-size: var(--text-small);
	color: #a9a9a9;
}
.chenarchbox:hover
{
	color: #5d7c12;
}

/*  ####################  intro text  ####################  */

.fullwidthtext
{
	max-width: 50em;
	margin: var(--space-l) 0;
	font-size: 1rem;
	font-weight: 100;
	color: #979797;
}
.fullwidthtext a:link, .fullwidthtext a:visited, .fullwidthtext a:active
{
	color: #ea6524;
}
.fullwidthtext a:hover
{
	color: #ff7f01;
}
/* under a page title, the h2's own bottom margin is the gap */
h2 + .fullwidthtext,
h2 + .navigationbuttonbox
{
	margin-top: 0;
}
/* intro text that wraps around a drawing (Gabriel Prize) */
.fullwidthtext.with-figure
{
	display: flow-root;
}
.fullwidthtext p + p
{
	margin-top: var(--space-m);
}
.text-figure
{
	float: right;
	width: 240px;
	margin: 0 0 var(--space-m) var(--space-xl);
}
.text-figure img
{
	display: block;
	width: 100%;
	height: auto;
}
.text-figure figcaption
{
	margin-top: var(--space-xs);
	font-size: var(--text-small);
}

/*  ####################  home page  ####################  */

/* about box and latest news side by side, each as wide as two project
   tiles, so their edges line up with the tiles below */
.home-intro
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-m);
	margin-top: var(--space-l);
}

/* about box: headshot in the top left, beside a short intro */
.about
{
	display: flex;
	align-items: flex-start;
	gap: var(--space-l);
	padding: var(--space-m);
	border: 1px solid var(--rule);
}

/* latest news: the newest post's date, title, and summary */
.latest-news
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-m) var(--space-l);
	border: 1px solid var(--rule);
}
.latest-news-label
{
	font-size: var(--text-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #a9a9a9;
}
.latest-news time
{
	font-size: var(--text-small);
	color: #979797;
}
.latest-news h2
{
	margin: 0 0 var(--space-xs) 0;
}
.about-photo
{
	flex-shrink: 0;
	width: 128px;
	height: 128px;
}
.about h2
{
	margin: 0 0 var(--space-xs) 0;
}
.about-links
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-l);
	margin-top: var(--space-s);
}

/* about page: the text wraps around the portrait. Floats are only used for
   this and .text-figure, the kind of job floats exist for. flow-root keeps
   the float inside the page's box. */
/* a firm's logo at the top of a page, not full width */
.prose .firm-logo
{
	width: 360px;
	margin: var(--space-m) 0 var(--space-s);
}
blockquote
{
	margin-top: var(--space-m);
	padding-left: var(--space-m);
	border-left: 2px solid var(--rule);
	font-style: italic;
}
blockquote .attribution
{
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	font-style: normal;
	color: #979797;
}
.prose blockquote .attribution a:link, .prose blockquote .attribution a:visited
{
	color: #d24602;
}
/* testimonials: quote cards, two across on wider screens */
.testimonials
{
	margin-top: var(--space-xl);
}
.testimonial-list
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18em, 100%), 1fr));
	gap: var(--space-l);
	margin-top: var(--space-m);
}
.testimonial
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-m);
	padding: var(--space-l);
	border: 1px solid var(--rule);
}
.testimonial blockquote
{
	margin: 0;
	padding: 0;
	border: 0;
}
.prose .testimonial blockquote p
{
	margin: 0;
}
.testimonial figcaption
{
	display: flex;
	flex-direction: column;
	font-size: var(--text-small);
}
.testimonial-name
{
	color: #374c04;
}
.testimonial-role
{
	color: #979797;
}
/* news: a dated list of posts, and the posts themselves */
.news-feed
{
	list-style: none;
	margin-top: var(--space-m);
	border-top: 1px solid var(--rule);
}
.news-feed li
{
	padding: var(--space-l) 0;
	border-bottom: 1px solid var(--rule);
}
.news-feed time, .news-post time
{
	display: block;
	font-size: var(--text-small);
	color: #979797;
	font-variant-numeric: tabular-nums;
}
.news-feed h3
{
	margin-top: var(--space-xs);
	font-size: var(--text-large);
	font-weight: 500;
	line-height: 1.25;
}
.news-feed h3 a:link, .news-feed h3 a:visited
{
	color: #374c04;
}
.news-feed h3 a:hover
{
	color: #d24602;
}
.news-feed p
{
	margin-top: var(--space-s);
}
.news-post ul
{
	margin-top: var(--space-m);
	padding-left: 1.2em;
	color: #727272;
}
.news-post li
{
	margin-top: var(--space-xs);
}
.news-post figure
{
	margin-top: var(--space-l);
}
.news-post figure img
{
	width: 100%;
}
/* two photos side by side at the same height: each figure's flex-grow is
   its image's width / height */
.news-post .compare
{
	display: flex;
	gap: var(--space-m);
	margin-top: var(--space-l);
}
.news-post .compare figure
{
	flex-basis: 0;
	min-width: 0;
	margin-top: 0;
}
.news-post .news-map
{
	max-width: 300px;
}
.news-post figcaption
{
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	color: #979797;
}
.news-post figcaption a:link, .news-post figcaption a:visited
{
	color: inherit;
	text-decoration: underline;
}
/* services: short bulleted lists under each service */
.services ul
{
	margin-top: var(--space-s);
	padding-left: 1.2em;
	color: #727272;
}
.services li
{
	margin-top: var(--space-xs);
}
.services h2:not(:first-child)
{
	margin-top: var(--space-xl);
}
.prose.about-page
{
	display: flow-root;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
/* CV sections start below the portrait */
.about-page h2 ~ h2
{
	clear: both;
	margin-top: var(--space-2xl);
}
/* "As featured in" band on the Recognition page: outlet names set as
   greyscale wordmarks, wrapping onto as many centered rows as needed */
.featured-in
{
	margin: var(--space-xl) 0 var(--space-m);
	padding: var(--space-l) 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	text-align: center;
}
.prose .featured-in-label
{
	margin: 0 0 var(--space-m);
	font-size: var(--text-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #a9a9a9;
}
.featured-in ul
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-l) var(--space-xl);
	list-style: none;
	color: #6b6b6b;
	font-size: 1.15rem;
	line-height: 1.2;
}
.wm-sans-caps
{
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 0.8em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
/* press logos, all in one grey: height sets their size, and wordmarks
   that are mostly empty space (stacked or boxed) get a little more.
   --logo-scale sizes them by importance: the national outlets get a row
   of their own, larger; minor ones are smaller. */
.featured-in
{
	--logo-scale: 1;
}
.featured-in .featured-major
{
	--logo-scale: 1.6;
	gap: var(--space-l) var(--space-2xl);
	margin-bottom: var(--space-l);
}
.featured-in .featured-small
{
	--logo-scale: 0.75;
}
.featured-in ul:not(.featured-major)
{
	gap: var(--space-m) var(--space-xl);
	margin-top: var(--space-m);
}
.prose .featured-in img
{
	display: block;
	width: auto;
	height: calc(26px * var(--logo-scale));
	margin: 0;
	filter: grayscale(1);
	opacity: 0.55;
}
.prose .featured-in img.logo-tall
{
	height: calc(38px * var(--logo-scale));
}
.featured-in .logo-with-name
{
	display: flex;
	align-items: center;
	gap: var(--space-s);
}
.prose .featured-in .logo-with-name img
{
	height: calc(40px * var(--logo-scale));
}
.featured-in .logo-with-name span
{
	font-size: calc(0.6em * var(--logo-scale));
	line-height: 1.3;
	color: #8c8c8c;
}
.prose .featured-in img.logo-xl
{
	height: calc(46px * var(--logo-scale));
}

/* links at the end of a CV entry */
.cv a:link, .cv a:visited
{
	color: #d24602;
	white-space: nowrap;
}
.cv a::after
{
	content: " \203A";
}
/* CV lists: year on the left, entry on the right */
.cv
{
	list-style: none;
	margin-top: var(--space-s);
	border-top: 1px solid var(--rule);
}
.cv li
{
	display: grid;
	grid-template-columns: 8em 1fr;
	gap: var(--space-m);
	padding: var(--space-s) 0;
	color: #727272;
	border-bottom: 1px solid var(--rule);
}
.cv-when
{
	color: #979797;
	font-variant-numeric: tabular-nums;
}
.prose .about-portrait
{
	float: right;
	width: 300px;
	margin: 0 0 var(--space-m) var(--space-xl);
}

/* featured projects: four equal tiles spanning the banner width.
   Each tile is a column so "Read more" sits at the bottom of every tile. */
.project-tiles
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-m);
	margin-top: var(--space-l);
}
.tile
{
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rule);
}
.tile-image img
{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.tile h2
{
	margin: var(--space-m) var(--space-m) var(--space-s);
}
.tile p
{
	padding: 0 var(--space-m);
}
.tile .read-more
{
	margin-top: auto;
	padding: var(--space-m);
}
.read-more:link, .read-more:visited
{
	white-space: nowrap;
	color: #d24602;
}
.read-more:hover
{
	color: #ff7f01;
}
.read-more::after
{
	content: " \203A";
}

/*  ####################  text pages  ####################  */

.prose
{
	max-width: 50em;
	margin-top: var(--space-l);
}
.prose p
{
	margin-top: var(--space-m);
}
.prose img
{
	display: block;
	height: auto;
	margin-top: var(--space-m);
}

/* text with images beside it (Metro Canopy Program) */
.split
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--space-2xl);
	align-items: start;
}
.split .prose
{
	max-width: none;
}
.split-aside
{
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	margin-top: var(--space-l);
}
.split-aside figure img
{
	display: block;
	width: 100%;
	height: auto;
}
/* two small portraits side by side */
.split-aside .portraits
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-m);
}
.split-aside figcaption
{
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	color: #979797;
}

/*  ####################  contact page  ####################  */

/* form beside the direct contact details, centred like the About page */
.contact-page
{
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-2xl);
	align-items: start;
	width: 100%;
	max-width: 1200px;
	margin: var(--space-l) auto 0 auto;
}
.contact-form
{
	display: flex;
	flex-direction: column;
	margin-top: var(--space-m);
}
.contact-form label
{
	margin-top: var(--space-m);
	margin-bottom: var(--space-xs);
	font-size: var(--text-small);
	color: #727272;
}
.contact-form label:first-child
{
	margin-top: 0;
}
.contact-form .optional
{
	color: #a9a9a9;
}
.contact-form input, .contact-form textarea
{
	padding: 12px;
	font: inherit;
	color: #333;
	border: 1px solid #c4c4c4;
	border-radius: 3px;
}
.contact-form textarea
{
	resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus
{
	outline: 2px solid #5d7c12;
	outline-offset: 1px;
	border-color: #5d7c12;
}
.cf-turnstile
{
	margin-top: var(--space-l);
}
.contact-form button
{
	align-self: flex-start;
	margin-top: var(--space-l);
	padding: 12px var(--space-xl);
	font: inherit;
	color: #fff;
	background: #5d7c12;
	border-radius: 3px;
	cursor: pointer;
}
.contact-form button:hover
{
	background: #374c04;
}
.form-note
{
	margin-top: var(--space-s);
	font-size: var(--text-small);
}
/* kept off-screen rather than display:none, which some bots detect */
.honeypot
{
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.contact-direct
{
	padding-left: var(--space-xl);
	border-left: 1px solid var(--rule);
}
.contact-direct p
{
	margin-top: var(--space-m);
}
.contact-line em
{
	font-style: normal;
	color: #374c04;
}
.contact-label
{
	display: block;
	font-size: var(--text-small);
	color: #979797;
}

/*  ####################  MSU news page  ####################  */

.news-page
{
	max-width: 50em;
	margin-top: var(--space-l);
}
.news-intro
{
	display: flex;
	align-items: center;
	gap: var(--space-m);
	margin-bottom: var(--space-s);
}
.news-intro > img
{
	flex-shrink: 0;
}
.map
{
	max-width: 420px;
	margin: var(--space-m) 0 var(--space-l);
}
.split-aside .map
{
	margin: 0;
}
.map img
{
	display: block;
	width: 100%;
	height: auto;
}
.map figcaption
{
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	color: #979797;
}
.news-list
{
	list-style: none;
	border-top: 1px solid var(--rule);
}
.news-list li
{
	padding: var(--space-m) 0;
	border-bottom: 1px solid var(--rule);
}
.news-list h4
{
	margin: 0;
}
.news-list h4 a:link, .news-list h4 a:visited
{
	color: inherit;
	box-shadow: inset 0 -1px 0 currentColor;
}
.news-date
{
	font-size: var(--text-small);
	color: #979797;
}

/*  ####################  landing pages (architecture, art, projects…)  ####################  */

/* same grid and 4:3 images as the galleries, with the label as a link below */
.navigationbuttonbox
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: var(--space-xl) var(--space-l);
	margin-top: var(--space-l);
}
.imagebox-button img
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 30%;
	margin-bottom: var(--space-s);
	background: #f4f4f4;
}
.external
{
	font-size: 0.85em;
	color: #a9a9a9;
}
/* logos are shown whole on a light panel rather than cropped */
.imagebox-button .tile-title
{
	display: block;
}
/* a line or two about the page, like the home page tiles */
.imagebox-button .tile-blurb
{
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	color: #727272;
}
.imagebox-button img.contain
{
	object-fit: contain;
	object-position: center;
	padding: var(--space-xl);
	box-sizing: border-box;
}

/*  ####################  galleries  ####################  */

/* one grid of equal cells: 4 across on desktop, 2 on tablet, 1 on phones.
   min() keeps a single column from overflowing very narrow screens. */
.gallery
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: var(--space-xl) var(--space-l);
	margin-top: var(--space-l);
}
/* every thumbnail cropped to the same 4:3 shape; the viewer shows it whole */
.imagebox img
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 30%;
	background: #f4f4f4;
}
/* a page of sections, each a heading, some text, and a gallery */
.gallery + h2
{
	margin-top: var(--space-2xl);
}
h2 + .prose,
h2 + .split > .prose,
h2 + .split > .split-aside
{
	margin-top: 0;
}
/* drawings and diagrams: shown whole on a light ground instead of cropped */
.imagebox img.contain
{
	object-fit: contain;
	background: #f4f4f4;
}
.textbox
{
	margin-top: var(--space-s);
}
.sold
{
	display: inline-block;
	margin-top: var(--space-xs);
	padding: 1px var(--space-s);
	font-size: 0.8em;
	letter-spacing: 0.12em;
	color: #fff;
	background: #8b1604;
	border-radius: 2px;
}
.textbox p
{
	font-size: var(--text-small);
	line-height: 1.4;
}

/*  ####################  slideshows  ####################  */

#slideshowcontainer
{
	width: 100%;
	max-width: 700px;
	margin: var(--space-2xl) auto 0 auto;
}
.fullwidthtext + #slideshowcontainer
{
	margin-top: var(--space-l);
}
#slideshow
{
	position: relative;
	z-index: 5;
	max-width: 680px;
	aspect-ratio: 680 / 480;
	font-size: var(--text-small);
	line-height: 1.4;
	text-align: center;
	color: #658e03;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
}

/* prev/next arrows, vertically centered on the slide */
#slideshow ul#nav
{
	position: absolute;
	inset: 0;
	z-index: 20;
	list-style: none;
	pointer-events: none;
}
#slideshow ul#nav li
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
#slideshow ul#nav li#prev { left: var(--space-s); }
#slideshow ul#nav li#next { right: var(--space-s); }
#slideshow ul#nav li a
{
	display: block;
	width: 16px;
	height: 32px;
	pointer-events: auto;
}
#slideshow ul#nav li#prev a { background: url(../images/prev_162.png) no-repeat; }
#slideshow ul#nav li#next a { background: url(../images/next_162.png) no-repeat; }

/* jquery.cycle positions each slide absolutely inside this box */
#slideshow ul#slides
{
	list-style: none;
	width: calc(100% - 80px) !important;    /* room for the arrows */
	height: calc(100% - 24px) !important;
	margin: var(--space-l) 0 0 40px;
}
#slideshow ul#slides li
{
	width: 100% !important;
	height: 100% !important;
	color: #658e03;
}
#slideshow ul#slides li img
{
	height: auto;
	margin-bottom: var(--space-xs);
}

/*  ####################  image viewer (js/image-viewer.js)  ####################  */

.viewer
{
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	padding: 0;
	background: transparent;
	border: 0;
}
.viewer::backdrop
{
	background: rgba(20, 20, 20, 0.92);
}
.viewer-figure
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--space-2xl) 72px;
	box-sizing: border-box;
}
.viewer-image
{
	max-width: 100%;
	max-height: calc(100vh - 140px);
	object-fit: contain;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.viewer-caption
{
	margin-top: var(--space-m);
	font-size: var(--text-small);
	color: #ddd;
	text-align: center;
	white-space: pre-wrap;
}
.viewer-close, .viewer-prev, .viewer-next
{
	position: fixed;
	width: 48px;
	height: 48px;
	font: 36px/1 "Optima", "Candara", "Arial", sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	cursor: pointer;
}
.viewer-close:hover, .viewer-prev:hover, .viewer-next:hover
{
	background: rgba(93, 124, 18, 0.9);
}
.viewer-close
{
	top: var(--space-m);
	right: var(--space-m);
}
.viewer-prev, .viewer-next
{
	top: 50%;
	transform: translateY(-50%);
	padding-bottom: 4px;
}
.viewer-prev { left: var(--space-m); }
.viewer-next { right: var(--space-m); }
.viewer img:hover
{
	opacity: 1;
}

/*  ####################  footer  ####################  */

#taglinebox
{
	margin: var(--space-2xl) 0 var(--space-xl) 0;
}
.horizline
{
	height: 1px;
	margin-bottom: var(--space-s);
	background: #8a8a8a;
}
.copyL
{
	display: block;
	font-size: var(--text-small);
	color: #8a8a8a;
}

/*  ####################  narrower than the header row  ####################  */

/* the site name and nav need about 1440px side by side; below that the
   nav moves onto its own row under the name */
@media (max-width: 1439px)
{
	.site-title
	{
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-m);
	}
}

/*  ####################  tablet and below  ####################  */

@media (max-width: 1249px)
{
	:root
	{
		--page-gutter: var(--space-l);
	}

	.prose .about-portrait
	{
		width: 220px;
		margin-left: var(--space-l);
	}

	/* images move under the text, side by side */
	.split
	{
		grid-template-columns: 1fr;
		gap: 0;
	}
	.split-aside
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	/* stacked under the text now, so it needs its gap back */
	h2 + .split > .split-aside
	{
		margin-top: var(--space-l);
	}

	/* about and latest news stack; side by side they get too narrow */
	.home-intro
	{
		grid-template-columns: 1fr;
	}

	/* project tiles two across */
	.project-tiles
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

/*  ####################  phone  ####################  */

@media (max-width: 767px)
{
	:root
	{
		--page-gutter: var(--space-m);
	}
	.site-title
	{
		padding-top: var(--space-m);
	}
	/* press logos: the national row scales down so logos can pair up */
	.featured-in .featured-major
	{
		--logo-scale: 1.1;
		gap: var(--space-m) var(--space-l);
	}

	/* nav collapses behind a Menu button; without JS the links stay
	   visible in a single column */
	.js .menu-toggle
	{
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		gap: var(--space-s);
		padding: var(--space-s) var(--space-m);
		border: 1px solid #c8c8c8;
		border-radius: 4px;
		background: none;
		font: inherit;
		font-size: var(--text-small);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #727272;
		cursor: pointer;
	}
	.js .menu-toggle:hover, .menu-open .menu-toggle
	{
		border-color: #8b1604;
		color: #8b1604;
	}
	.site-nav
	{
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.js .site-nav
	{
		display: none;
	}
	.js .menu-open .site-nav
	{
		display: flex;
	}
	.site-nav > a:link, .site-nav > a:visited
	{
		padding: var(--space-s) 0;
		border-bottom: 1px solid #e4e4e4;
	}
	.site-nav > a.current
	{
		box-shadow: none;
	}

	/* comparison photos stack */
	.news-post .compare
	{
		flex-direction: column;
	}

	/* banner runs edge to edge, past the page gutters */
	.headerimage
	{
		width: auto;
		margin: 0 calc(-1 * var(--page-gutter));
	}

	.about
	{
		align-items: flex-start;
		gap: var(--space-m);
	}
	.about-photo
	{
		width: 88px;
		height: 88px;
	}

	/* CV entries: year above the entry */
	.cv li
	{
		grid-template-columns: 1fr;
		gap: 0;
	}
	.cv-when:empty
	{
		display: none;
	}

	/* too narrow to wrap text: portrait sits above it */
	.prose .about-portrait
	{
		float: none;
		width: 100%;
		max-width: 280px;
		margin: 0 0 var(--space-l) 0;
	}
	.text-figure
	{
		float: none;
		width: 100%;
		max-width: 280px;
		margin: 0 0 var(--space-l) 0;
	}

	/* contact: details below the form */
	.contact-page
	{
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
	.contact-direct
	{
		padding-left: 0;
		padding-top: var(--space-l);
		border-left: 0;
		border-top: 1px solid var(--rule);
	}

	/* viewer: arrows over the image's edges */
	.viewer-figure
	{
		padding: 72px var(--space-s);
	}
	.viewer-prev { left: var(--space-xs); }
	.viewer-next { right: var(--space-xs); }

	.split-aside
	{
		grid-template-columns: 1fr;
	}

	/* tiles stack */
	.project-tiles
	{
		grid-template-columns: 1fr;
	}

	#slideshowcontainer
	{
		margin-top: var(--space-l);
	}
}