@charset "utf-8";

/***** RESET *****/
body, img, ul, li, h1, h2, p, dl, dt, dd { border: 0; padding: 0; margin: 0; }
*, *::before, *::after {
	box-sizing: border-box;
}
img {
	max-width: 100%;
	height: auto;
}
/**** /RESET *****/

/***** SETUP *****/
html, body {
	height: 100%;
}
html {
	/* 1rem = 10px sitewide - anchored on the root so rem stays predictable
	   everywhere, unlike the old em chains which compounded with nesting
	   depth (e.g. a 1.7em heading inside a 1.4em container silently
	   became 1.7 x 1.4, not 1.7, of the root size). */
	font-size: 62.5%;
}
body {
	background: #f7f5f1;
}
#page-wrapper {
	background: #fcfbf9;
	color: #8e8e7d;
	font-family: tahoma, arial, sans-serif;
	line-height: 1.5em;
	width: 100%; max-width: 950px; padding: 0 20px;
	margin: 0 auto;

	/* min height */
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
}
/**** /SETUP *****/

/***** COMMON *****/
a {
	color: #52759e;
}
a:hover {
	text-decoration: none;
}
.clear {
	clear: both;
}
/**** /COMMON *****/

/***** HEADER *****/
#header {
	padding: 15px 0 10px 0;
	border-bottom: 1px solid #e8e8db;
}
#header #logotype {
	float: left;
	margin-top: 15px;
}
#menu-wrapper {
	float: right;
}
#languages {
	float: right;
	margin-bottom: 1.4em;
	font-size: 1.3rem;
}
#languages li {
	float: left;
	list-style: none;
	padding-left: 1em;
}
#languages a {
	color: #8e8e7d;
}
#languages li.current-lang a {
	font-weight: bold;
	text-decoration: none;
}
#menu {
	clear: both;
	margin-top: 18px;
/*	background: red; */
}
#menu {
	font-family: arial, tahoma, sans-serif;
	font-size: 1.8rem;
	color: #739884;;
	line-height: 1em;
}

#menu .page_item,
#menu .current_page_item,
#menu .page_item_contact,
#menu .page_item_phone {
	display: inline;
}
#menu .page_item a,
#menu .current_page_item a {
	color: #739884;
}
/* Separator between nav items - CSS-generated instead of literal PHP text,
   so it can simply not apply once the nav stacks to one-per-line on phone. */

#menu .page_item_contact a {
	color: #52759e;
}
#menu .page_item_phone a {
	color: #666666;
}
#menu .page_item a,
#menu .page_item_contact a,
#menu .page_item_phone a {
	text-decoration: none;
}
#menu .page_item a:hover,
#menu .current_page_item a:hover,
#menu .page_item_contact a:hover,
#menu .page_item_phone a:hover {
	text-decoration: underline;
}
/**** /HEADER *****/

/***** CONTENT *****/
#content {
	padding-bottom: 35px; /* absolute footer */
	font-size: 1.6rem;
	line-height: 1.5em;
}
#content p {
	margin-bottom: 1.2em;
}
#content h1,
#content h2 {
	/* font-family: helvetica, arial, tahoma, sans-serif; */
	font-family: arial, tahoma, sans-serif;
	letter-spacing: -0.05em;
}
#content h1 {
	font-size: clamp(2rem, 1.8rem + 1vw, 2.4rem);
	color: #79796b;
	margin: 0.5em 0 0.2em -0.1em;
}
#content h2 {
	font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.7rem);
	color: #8e8e7d;
	margin-left: -0.05em;
}
#content h2 span.date {
	color: #e3c32e;
}
#banner-frontpage {
	width: 100%; /* height: 240px; */
	/* background: #e8e8db; */
	margin: 15px 0 5px 0;
}
#albums-wrapper {
	border-top: 1px solid #e8e8db;
	margin-bottom: 15px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px 3%;
}
#gallery-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 30px 3%;
	margin-top: 15px;
}
/* The PHP/JS still group items into rows for markup reasons; display:contents
   makes those row wrappers invisible to layout so their children (div.stack /
   div.painting-wrapper) become direct items of the grid above instead. */
.galleries-per-row,
.albums-per-row {
	display: contents;
}
/* .clear divs were only ever needed to clear floats; under CSS grid they
   have no job left to do, but display:contents on their parent means they
   now render as empty grid items unless hidden explicitly. */
#gallery-wrapper .clear,
#albums-wrapper .clear {
	display: none;
}
div.stack {
  position: relative;
  width: 100%;
  aspect-ratio: 290 / 415;
  margin: 0;
}
/* Row-separator line: positioned in the grid's row gap via a pseudo-element,
   rather than as border/padding on div.stack itself, since div.stack's own
   box size drives the layered stacking-level1/level2 + album effect and
   must stay untouched. */
div.stack::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	margin-top: 9px;
	height: 1px;
	background: #e8e8db;
}
div.stacking {
	position: absolute;
}
div.stacking-level1 {
	z-index: 20;
	left: 3px; top: 3px;
}
div.stacking-level2 {
	z-index: 10;
	left: 6px; top: 6px;
}
div.album {
	z-index: 50;
	position: absolute;
	background: #fff;
	text-align: center;
}
div.stacking,
div.album {
	width: 100%; height: 100%;
	background: #fff;
	border: 1px solid #deded2;
}
div.painting {
	width: 80%;
	aspect-ratio: 1 / 1;
	display: table;
	margin: 0 auto;
	margin-top: 15%;
}
div.painting div.cell {
	display: table-cell;
	vertical-align: middle;
}
div.painting img {
	display: block;
	margin: 0 auto;
}
div.album div.painting img {
	border: 1px solid #686868;
}
div.album a.title {
	display: block;
	margin-top: 30px;
	color: #8e8e7d;
	text-decoration: none;
}
div.album:hover a.title {
	color: #52759e;
	text-decoration: underline;
}
div.navigation {
	padding: 8px 0;
	/* border-bottom: 1px solid #e8e8db; */
	/* font-family: helvetica, arial, tahoma, sans-serif; */
	font-family: arial, tahoma, sans-serif;
	font-size: 1.6rem;
	/* margin-top: -14px; /* WP update fix, 10/9/2015, defix 18/11/2016 */
}
div.border-bottom {
	border-bottom: 1px solid #e8e8db;
}
div.border-top {
	border-top: 1px solid #e8e8db;
}
div.navigation ul,
div.navigation li {
	list-style: none;
	display: inline;
}
div.navigation li {
	margin-left: 5px;
}
div.navigation a {
	text-decoration: none;
}
div.navigation .align-left {
	float: left;
}
div.navigation .align-right {
	float: right;
}
div.painting-wrapper {
	width: 100%;
	text-align: center;
	padding-bottom: 20px;
	border-bottom: 1px solid #e8e8db;
}
div.painting-wrapper div.painting {
	width: 80%;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	margin-top: 30px;
}
div.painting-wrapper div.painting div.cell {
	vertical-align: bottom;
}
div.painting-wrapper div.painting div.cell div.border {
	background: #fff; padding: 10px;
	border: 1px solid #deded2;
	display: -moz-inline-box;  /* For older FF-s */
	display: inline-block;
	vertical-align: bottom;
}
div.painting-wrapper div.details {
	margin-top: 10px;
}
div.painting-wrapper a.title {
	display: block;
	color: #ddd9d0;
	text-decoration: none;
}
div.painting-wrapper:hover a.title {
	color: #52759e;
	text-decoration: underline;
}
div.painting-wrapper span {
	display: block;
	font-size: 1.3rem;
	color: #ddd9d0;
}
div.painting-wrapper:hover span {
	color: #8e8e7d;
}
div.highlight {
	background: #f0ede8;
	padding: 1.5em 2%;
	border: 1px solid #e8e8db;
	border-top: none;
}
div.highlight h1 {
	display: inline;
}
div.highlight div.image-float,
div.highlight div.wp-caption,
div.highlight div.mceTemp {
	float: right;
	background: #fff; padding: 10px;
	border: 1px solid #deded2;
	margin-left: 15px;
}
/* WP makes img container div 10px wider for some strange reason */
div.highlight div.wp-caption,
div.highlight div.mceTemp {
	padding: 10px 5px 5px 5px;
	text-align: center;
}
/* Hide text captions for images in WP */
div.highlight p.wp-caption-text {
	display: none;
}
div.highlight div.image-float img,
div.highlight div.mceTemp img {
	vertical-align: bottom;
}
div.facts {
	font-size: 1.4rem;
	line-height: 1.5em;
}
div.facts ul {
	list-style-image: url(../IMG/list-bullet-square.png);
	margin-left: 1.5em;
}
div.facts strong {
	color: #79796b;
}
div.facts em {
	font-style: italic;
}
div.columns-wrapper div.column {
	width: 48%;
	margin: 0 1%;
	float: left;
}
/* Do not show images on the front page */
div.columns-wrapper div.hide-images div.wp-caption,
div.columns-wrapper div.hide-images div.mceTemp,
div.columns-wrapper div.hide-images div figure,
div.columns-wrapper div.hide-images iframe {
	display: none;
}
div.facts div.column {
	width: 45%;
	padding: 0 1% 0 3%;
	margin: 1em 0;
}
div.facts div.column-border {
	border-left: 1px solid #f4f3ed;
}
div.facts h1 {
	padding-top: 0.4em;
}
div.content-spacing {
	padding: 1%;
}
/**** /CONTENT *****/

/***** FOOTER *****/
#footer {
	clear: both;
	text-align: right;
	border-top: 1px solid #e8e8db;
	padding: 7px 0;

	position: absolute;
	left: 20px; right: 20px;
	bottom: 0;
}
#footer p {
	display: none;
}
/**** /FOOTER *****/

/***** RESPONSIVE *****/

/* Phones in landscape are wide but short - by width alone they'd land in
   the same column count as a tablet, which feels cramped with so little
   vertical room. pointer:coarse keeps this scoped to touch devices so a
   short desktop browser window isn't affected. */
@media (max-height: 500px) and (pointer: coarse) {
	#gallery-wrapper,
	#albums-wrapper {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	}
}

/* Phone: stack the header, collapse the nav and language switcher to a
   simple full-width list, and drop every grid down to a single column
   so nothing is ever narrower than its content forces it to be. */
@media (max-width: 820px) {
	#page-wrapper {
		padding: 0 15px;
	}

	/* Header: logo and menu no longer float side by side */
	#header #logotype {
		float: none;
		margin: 0 0 10px;
	}
	#header #logotype img {
		width: auto;
		max-width: 70%;
	}
	#menu-wrapper {
		float: none;
	}
	#languages {
		float: none;
		margin-bottom: 0.8em;
		font-size: 1.4rem;
	}
	#languages li {
		float: none;
		display: inline-block;
		padding: 0 1em 0 0;
	}
	#menu {
		margin-top: 10px;
		font-size: 1.8rem;
		line-height: 1.4em;
	}
	#menu .page_item {
		display: block;
		padding: 10px 0;
	}
	#menu .page_item_contact,
	#menu .page_item_phone {
		display: block;
		padding: 10px 0;
	}

	/* Body copy: a bit more generous than the sitewide 16px baseline,
	   since this is the size most of the page's reading happens at */
	#content {
		font-size: 1.7rem;
	}
	div.navigation {
		font-size: 1.7rem;
	}
	div.painting-wrapper span,
	div.facts {
		font-size: 1.5rem;
	}

	/* Two-column layouts (front page teasers, biography facts) stack */
	div.columns-wrapper div.column,
	div.facts div.column {
		width: 100%;
		margin: 0 0 1.5em;
		float: none;
	}
	div.facts div.column-border {
		border-left: none;
		border-top: 1px solid #f4f3ed;
		padding-top: 1.5em;
	}

	/* Captioned/floated images inside body copy: full width instead of
	   a right-hand float, so text doesn't get squeezed into a sliver */
	div.highlight div.image-float,
	div.highlight div.wp-caption,
	div.highlight div.mceTemp {
		float: none;
		margin: 0 0 15px;
		text-align: center;
	}

	/* Footer no longer needs to be pinned/absolute at this width once
	   content routinely runs taller than the viewport */
	#footer {
		position: static;
		text-align: center;
		margin-top: 20px;
	}
}
/**** /RESPONSIVE *****/