html, body, div, p, ul, ol, li, h1, h2, h3, h4, pre, form, p, button, img, a img, figure { border: 0 none; margin: 0; padding: 0; }
ul, li { list-style-type: none; }
* { box-sizing: border-box; }
mark { background: transparent; }

:root { 
	--black: #222222; 
	--gray1: #edccae;
	--gray2: #f5f2f1;
	--small-font: 0.8em;
	--small-font-line-height: 1.25em;
	--width1: 600px;
	--line-height: 1.6em;
	--page-border: 2rem;
}

html { font-size: 16px; transition: font-size 0.1s; }
body { font-family: "Source Serif 4", serif; font-optical-sizing: auto; font-weight: 400; background: #fff; color: #222; line-height: var(--line-height); }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }

/* generic */

.is-layout-grid { display: flex; flex-wrap: wrap }
.is-layout-grid * { width: 100%; }

/* zero outline on focus */

a:active, a:focus { outline: 0; border: none; -moz-outline-style: none; }
a:visited { outline: none; }
a:active, a:focus { box-shadow: none; }
a, .link_button { text-underline-offset: 3px; text-decoration-thickness: 1.2px; }

img { color: #aaa; font-size: 10px; }
::selection { background: #c7c3c0; color: var(--black); }

/* no higlight on selection */
.link_button::selection, .wp-block-gallery::selection, img::selection { background: transparent; color: #222; }

h1, h2, h3, h4 { font-size: 1em; }
h3, h4 { margin-bottom: 1.5em; line-height: 1.5em; }

figcaption { font-size: 0.8em; line-height: 1.25em; margin-top: 0.25em; }

.edit-button { position: fixed; right: 0; bottom: 5rem; transform:  rotate(-90deg); background: blue; color: #fff; padding: 0 10px; opacity: 0.5; border-radius: 3px; transition: 0.2s }
.edit-button:hover { opacity: 1 }

.has-small-font-size { font-size: 0.8em; line-height: 1.5em; }

.backlink { display: none; } 
.hidden { display: none; }

/* link animation */

.animated_links a span, .animated_menu_link a {
    position: relative;
    padding: 0 3px;
	}

.animated_links a span::after, .animated_menu_link a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    background-color: var(--gray1);
    left: 0;
    bottom: 0;
    transition: height 0s;
    z-index: -1;
	}

.animated_links a span:hover::after, .animated_menu_link a:hover::after {
    height: 1.3em; 
    transition: height 0.2s ease;
	}

.animated_links .current_page a span::after  { display: none; }

/* selected links */

.current_page a span { background: var(--gray1); }

/* header */

main { display: flex; flex-wrap: wrap; gap: 2rem; }
h1 { font-weight: 400; line-height: var(--line-height); }

header { width: 100%; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: 1.5rem var(--page-border); }
header a { white-space: nowrap; }
header nav { display: flex; gap: 0 1rem; } 
header nav a { text-decoration: none; }
header a:hover, header nav .current-menu-item a { }
header nav li { display: inline-block; line-height: var(--line-height); }
header .menu_items { display: flex; gap: 0 0.75rem; white-space: nowrap; }
header .logo { width: 6rem; }
header .language li :not(.selected) { opacity: 0.5 }

/* general proportions */

.container { display: flex; padding: 0 var(--page-border); width: 100%; gap: 4rem; margin-bottom: 8rem; }
.container.narrow nav.vertical { width: 8rem; }
nav.vertical { width: 40%; }
article { width: 60%; }
nav.vertical.wide { width: 100%; }

/* vertical navigation */

nav.vertical
	{
	li { line-height: var(--line-height); display: grid; width: 100%; grid-template-columns: 17em 3em auto; align-items: center; }
	li a { text-overflow: ellipsis; overflow: hidden; cursor: default; }
	li span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
	a:hover .title {  }
	li .title { cursor: pointer; } 
	li .year { text-align: right; } 
	li .excerpt { font-size: var(--small-font); line-height: normal; margin-left: 1rem; margin-top: 1px; }
	li.current_page .title { position: initial; }
	li.current_page a::before { left: 0; }
	}
nav.vertical.wide li { grid-template-columns: 20rem 3em auto; } 
nav.vertical.simple li {  grid-template-columns: auto 0 0; } 

/* page */

article { line-height: var(--line-height); }
article 
	{
	figure.thumbnail { margin: 2rem 0; max-width: var(--width1); }
	figure.thumbnail img { width: 100%; height: auto; box-shadow: 0 0 10px #0000002e; }
	figure.thumbnail figcaption { margin-top: 0.25rem; }
	a { text-decoration: underline; text-decoration-thickness: 1.2px; }
	p, ul, ol { margin-bottom: var(--line-height); width: var(--width1); }
	h2, h3, h4 { width: var(--width1); }
	ul, ol { padding-left: 2em; }
	h2 { font-weight: normal; }
	.metadata{ margin-bottom: var(--line-height); width: var(--width1); }
	ul li { list-style-type: disc; }
	ol li { list-style-type: decimal; }
	.backlink { margin-bottom: var(--line-height); }
	figure.wp-block-image img { width: var(--width1); height: auto; box-shadow: 0 0 10px #0000002e; }
	figure.wp-block-image { margin: 2rem 0; max-width: var(--width1); }
	sup, sub { line-height: 1em; }
	}

article.standard_page
	{
	margin: auto;
	h2 { margin-bottom: 3em; }
	date { display: none; }
	.wp-block-image img { width: var(--width1); height: auto; }
	}

/* news */

.container.news { width: 100%; margin: 5rem 0 8rem 0; }
.container.news article
	{
	width: 80%;
	max-width: 1200px;
	img { width: 100%; height: auto }
	h2 { margin-bottom: 0; font-weight: normal; }
	.block_grid { width: 100%; display: flex; gap: 1rem; justify-content: center; }
	.block_grid .col { background: var(--gray2); padding: 1rem; width: 32%; border-radius: 5px; }
	}

/* gallery */

.wp-block-gallery { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 2rem 0; max-width: 1100px; }
.wp-block-gallery figure.wp-block-image { margin: 0; margin: 0 }
.wp-block-gallery figure.wp-block-image img { width: auto; height: 11vw; max-height: 11rem; box-shadow: 0 0 5px #00000029; transition: transform 0s; cursor: pointer; display: block;}
.wp-block-gallery figcaption { display: none; }
.wp-block-gallery img:hover { transform: scale(1.025); transition: transform 0.25s !important; }

/* lightbox */

.wp-block-gallery 
	{
	.wp-block-image.lightbox { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: #fff; z-index: 10; cursor: default; }
	.wp-block-image.lightbox 
		{ 
		max-width: 100%;
		img { width: 80vw; height: 80vh; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -55%, 0px); object-fit: contain; box-shadow: none; opacity: 0; animation-name: fade01; animation-duration: 0.2s; animation-fill-mode: forwards; animation-delay: 0.2s; }
		.wp-element-caption { display: block; position: absolute; left: 50%; bottom: 3em; transform: translateX(-50%); text-align: center; text-shadow: 1px 1px 1px #fff; }
		img { cursor: default; }
		}
	}

.close_button { position: fixed; top: 1.5rem; right: 1rem; width: 3vw; min-width: 3em; display: none; z-index: 100; cursor: pointer; }
.arrows { position: fixed; top: 50%; transform: translateY(-50%); width: 3vw; min-width: 3em; display: none; z-index: 100; cursor: pointer; }
.arrows.arrow_prev { left: 1rem; }
.arrows.arrow_next { right: 1rem; }
.close_button, .arrows { opacity: 1; transition: opacity 0.125s; }
.close_button:hover, .arrows:hover { opacity: 0.5; }

/* image fade out */

.wp-block-gallery .wp-block-image.lightbox img.image-fadeout { opacity: 1; animation-name: fadeout; animation-duration: 0.25s; animation-delay: 0s }

/* animation */

@keyframes fade01 { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade02 { from { opacity: 0; } to { opacity: 0.5; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }

/* embed */

.wp-block-embed { width: var(--width1); margin: 2rem 0; padding: 0; }
.wp-block-embed iframe { width: 100% !important; }
.wp-block-file { border: 1px solid var(--black); width: var(--width1);}
.wp-block-file, .wp-block-file__embed { display: block; }
.wp-block-file a { display: none; }
.vimeo-embed { width: 100% !important; }
.wp-block-embed-vimeo iframe { height: 21.2em; background: #000; }

/* flex */

nav.vertical li { transition: grid-template-columns 0.2s }

@media screen and (max-width: 1600px) 
	{
	nav.vertical li { grid-template-columns: 14rem 3em auto; }
	}

@media screen and (max-width: 1300px) 
	{
	:root { --width1: 500px; } 
	html { font-size: 13px; }
	nav.vertical li { grid-template-columns: 14rem 3em auto; }
	nav.vertical.wide li { grid-template-columns: 17rem 3em auto; } 
	nav.vertical li .excerpt { margin-top: 0px; }
	header { padding-top: 1.5rem; }
	.container.news article { width: 100%; }
	article figure.thumbnail,
	article figure.wp-block-image.size-full img, article figure.wp-block-image.size-large img { width: 100%; max-width: unset; margin-right: 0.5rem; }
	}

@media screen and (max-width: 960px) 
	{
	:root { --width1: 100%; } 
	.container { gap: 2rem }
	nav.vertical { width: 18rem; }
	article { width: 75%}
	nav.vertical.wide li { grid-template-columns: 17rem 3em auto; } 
	nav.vertical.simple li { grid-template-columns: auto; } 
	nav.vertical li { grid-template-columns: auto auto 0; justify-content: start; } 
	nav.vertical:not(.wide) li .excerpt { display: none; }
	nav.vertical:not(.wide) li .title { grid-row: 1/1; grid-column: 2/2; }
	nav.vertical:not(.wide) li .year { width: 3rem; text-align: left; grid-row: 1/1; grid-column: 1/1; }
	.container.news article .block_grid .col { width: 30%; }
	}

@media screen and (max-width: 580px) 
	{
	nav.vertical:not(.wide) { display: none; }
	nav.vertical.wide li { grid-template-columns: auto auto 0; } 
	nav.vertical li .title { grid-row: 1/1; grid-column: 2/2; }
	nav.vertical li .year { width: 3rem; text-align: left; grid-row: 1/1; grid-column: 1/1; }
	article { width: 100%; }
	article .news {	width: 100%; }
	.wp-block-gallery img { height: 18vw; }
	.container.news article .block_grid { justify-content: center; }
	.container.news article .block_grid .col { width: 100%; max-width: 360px; }
	nav.vertical+article .backlink { display: block; }
	.container.narrow .backlink { display: none; }
	.container.narrow { flex-wrap: wrap; }
	.container.narrow nav.vertical { display: inline-block; width: 100%; margin-left:-3px }
	.container.narrow nav.vertical li { display: inline-block; float: left;  width: auto;}
	}


body.mobile 
{ 
font-size: 18px; 
--line-height: 1.4em;

main { gap: 0rem; }
header nav { justify-content: space-between; width: 100% }
header { flex-wrap: wrap; gap: 0; }
header .menu_items { flex-wrap: wrap; }
header .menu_items li { display: block; width: 100%; }
.current-menu-item { text-decoration: underline; text-underline-offset: 3px; }

nav.vertical li span { display: block; white-space: wrap; }
nav.vertical li { align-items: start; }
nav.vertical li .title { width: auto; margin-left: 0.5em; }
nav.vertical li .excerpt { display: none; }

nav.vertical.simple li span { margin: 0 }

h2 { font-weight: bold; margin-bottom: 1em; font-size: 1.5em; line-height: 1.25em; }

.container.narrow nav.vertical { margin: 0 }
.container.narrow nav.vertical li { display: block; float: initial; }
.current_page a span { background: transparent; text-decoration: underline; }

.wp-block-image.size-large img, .wp-block-image.size-full img { width: 100%; height: auto; }
.wp-block-gallery .wp-block-image.size-large img { width: 24vw; height: 24vw; object-position: center center; object-fit: cover; }
.wp-block-gallery figcaption {  }
.wp-block-gallery .wp-block-image.lightbox.size-large img { width: 75%; height: auto; margin: 0 }

.animated_links a span, .animated_menu_link a { padding: 0 3px; }
.animated_links a span::after, .animated_menu_link a::after { display:  none; 	}
.animated_links a span:hover::after, .animated_menu_link a:hover::after { display: none; }

.language.menu_items { position: absolute; right: 1.4em; top: 1em }

.wp-block-embed-vimeo iframe { height: 12em; }

}