* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(16px, 1.1vw, 20px); scroll-behavior: smooth; overscroll-behavior: none;  }
body {font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; accent-color: var(--myBlue);}
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p:not(:last-of-type) {margin-bottom: 1.4em;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: inherit;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: "Barlow", system-ui, sans-serif;
    --header-font: "Rowdies", system-ui, sans-serif;

    /* Font weights */
    --font-regular: 400; 
    --font-medium: 500; 
    --font-bold: 700; 

    /* Font sizes */
    --font-size-h1: 3.25rem;    /* 65px */
    --font-size-h2: 1.4rem;     /* 28px */
    --font-size-h3: 1.25rem;    /* 25px */
    --font-size-h4: 1.1rem;     /* 22px */
    --font-size-h5: 1rem;       /* 20px */
    --font-size-h6: .9rem;      /* 18px */
    --font-size-body: .9rem;    /* 18px */

    /* Colors */  
    --main-color: var(--myBlack);
    --background-color: var(--myWhite);

    --myBlack: #000000;
    --myWhite: #F1F1F1;
    --myTrueWhite: #FFF;
    --myBeige: #EBE9E2; 
    --myBrown: #938766;
    --myOlive: #5E5918;
    --myLightOlive: #8C8419; 
    --myDarkOlive: #383616; 
    --myBlue: #5475E8; 
    --myFadedBlue: #7691F0; 

    --myGradient: linear-gradient(-90deg, rgba(235, 233, 226, 0.8) 0%, rgba(235, 233, 226, 0) 100%); 
    --myDarkGradient: linear-gradient(-90deg, rgba(0,0,0, 0.8) 0%, rgba(0,0,0, 0) 100%); 

    /* Line heights */
    --line-height-small: 1.15;
    --line-height-regular: 1.25;
    --line-height-medium: 1.35;
    --line-height-large: 1.66; 

    /* Widths */
    --gutter-side: 5rem;
    --gutter-top: 3.8rem;
    --max-width: 76rem;
    --max-width-wide: 86rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 47rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 4.5rem; 
    --btn-padding: 0.5em 1.4em;

    /* Transitions */
    --my-ease-out: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --drop-shadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blur-shadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --border-radius: 0.5rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 1em; 

    /* Logos */
    --logo-width: 3rem; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6 { font-weight: var(--font-medium); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.7em;  color: var(--myOlive);}
h1, .h1 {font-size: var(--font-size-h1); } 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3);  }
h4, .h4 {font-size: var(--font-size-h4); } 
h5, .h5 {font-size: var(--font-size-h5); } 
h6, .h6 {font-size: var(--font-size-h6); } 

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto;}
section:first-of-type { margin-top: 0; }
header, main, footer { max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
.container { display: flex; flex-direction: column;}
section { margin: 0 auto; position: relative; }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }

/* IMAGES */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
img, video { width: 100%; height: auto; }

/* SELECTION */
*::selection { background: var(--myOlive); color: var(--myBeige); }

/* NO VISIBLE SCROLLBAR */
figure.carrousel > ul,
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } 
.no-scrollbar::-webkit-scrollbar { display: none; }
figure.carrousel > ul::-webkit-scrollbar { display: none; }

/* BUTTONS */
button { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center; outline-offset: .1rem;}
button:focus-visible { outline: 2px solid var(--myBlue);}
button,label { cursor: pointer;  }
.btn { background: var(--main-color); color: var(--background-color); padding: var(--btn-padding); border-radius: var(--btn-border-radius); text-align: center;  }

/* LINK */
.link { font-family: var(--header-font); font-size: var(--font-size-h2); color: var(--myFadedBlue); display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0 auto; }
.link svg { width: 4rem;}
.url { font-weight: var(--font-medium); font-size: var(--font-size-h5); text-decoration: underline; color: var(--myBlue); text-underline-offset: 0.2em;}

/* --------------- HEADER --------------- */
header { position: absolute; z-index: 10; --link-padding: .6rem;  z-index: 4000;  pointer-events: none; }
header img, header svg { max-width: 100%; height: auto; }

nav#fixed, .burger, .mobile { display: none;  }

/* DESKTOP NAV */
nav#fixed { margin: 0 auto; padding: 0.15rem 0;   pointer-events: all;  }
nav#fixed > ul { display: flex; justify-content: flex-end; align-items: center;}
nav#fixed > ul li {position: relative; display: flex; }
nav#fixed > ul li a { display: flex;  font-weight: var(--font-medium);}
nav#fixed > ul li.active:not(:first-of-type) > a { font-weight: 700;}
nav#fixed > ul > li:first-of-type {margin-right: auto; max-width: var(--logo-width); }
nav#fixed > ul > li:not(:first-of-type) {margin-left: 1.5rem; }
nav#fixed > ul > li:not(:first-of-type) > a { padding: var(--link-padding); }
nav#fixed > ul > li:last-of-type > a {padding-right: 0;}

nav#fixed { position: fixed; top: 0; transition: 500ms ease; width: 100%; display: flex; justify-content: center;  align-items: center; background: var(--background-color); max-width: var(--max-width-ultra-wide); left: 50%; transform: translate(-50%,-100%);}
nav#fixed > ul { display: flex; height: 100%; width: var(--width);  max-width: var(--max-width);  }
nav#fixed > ul > li { display: flex; transition: 500ms ease; }
nav#fixed > ul > li > a { padding: 0.5rem;  }

/* SCROLLED */
header.scrolled nav#fixed { transform: translateX(-50%); }

/* Burger */
input.burger { display: none; }
label.burger {  width: 1.5rem; height: 1.5rem; z-index: 99;  display: none; align-items: center;   }
label.burger > span { width: 1.3rem; height: 3px; position: absolute; background: var(--main-color); transition: transform 250ms ease, opacity 150ms ease; }
label.burger > span:nth-of-type(1) { transform: translateY(-.45rem); }
label.burger > span:nth-of-type(2) { transform: scaleX(1); opacity: 1;}
label.burger > span:nth-of-type(3) { transform: translateY(.45rem); }

/* Burger checked */
input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: rotate(45deg);}
input.burger:checked ~ header label.burger span:nth-of-type(2) { transform: rotate(-135deg); opacity: 0;}
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: rotate(-45deg);}
input.burger:checked ~ header nav#top { transform: none;  }


/* Submenu bit */
header li.arrow { position: relative; }
header li.arrow ul.sub { position: absolute; padding: .5rem var(--link-padding); left: 0;}
header li.arrow ul.sub li a { padding: .25em 0; color: var(--myLightOlive);}

header:not(.scrolled) nav#fixed li.arrow ul.sub { transform: translateY(calc(100% - 1rem)); opacity: 0; pointer-events: none;}
nav#fixed li.arrow { display: flex; align-items: center; }
nav#fixed li.arrow ul.sub { white-space: nowrap; background: var(--myTrueWhite); padding: 1rem  1.25rem;; left: calc(var(--link-padding) * -1);  transform: translateY(calc(100% - 1rem)); opacity: 0;  pointer-events: none; transition: transform 333ms, opacity 333ms;  bottom: -.75rem; transform: translateY(100%); }
nav#fixed li.arrow ul.sub > li { margin-bottom: .25em;}
nav#fixed li.arrow ul.sub::before { content: ""; width: 100%; height: 1rem; background: none; opacity: 0; position: absolute; top: -1rem; left: 0; }
nav#fixed li.arrow::after { content: ""; top: .05em; position: relative;  width: .4rem; height: .3rem; clip-path: polygon(50% 0%, 100% 100%, 0 100%); transform: rotate(180deg); background: currentColor;   transition: transform 333ms; display: flex; align-items: center; justify-content: center; }
nav#fixed li.arrow:is(:hover,.hover) ul.sub.sub { pointer-events: all; opacity: 1; transform: translateY(100%);}
nav#fixed li.arrow:is(:hover,.hover)::after { transform: rotate(360deg);}
nav#fixed li.arrow .active > a {font-weight: var(--font-bold);}

nav#top { display: flex; max-width: var(--max-width-wide); width: var(--width); position: relative; margin: var(--gutter-top) auto 0;}
nav#top > ul { display: flex; flex-direction: column; align-items: flex-start; }
nav#top > a { pointer-events: all; margin: calc(var(--gutter-top) * -.5) 0 0 auto; width: var(--logo-width);  height: auto; color: var(--myOlive); align-self: flex-start;}
header.light nav#top > a { color: var(--myWhite);}

header.white nav#top a { color: var(--myWhite);}
header.white nav#top ul.sub a { color: var(--myBeige);}
header.white nav#top li.arrow button::before { background: var(--myWhite);  }

nav#top > ul > li { margin-bottom: .8rem; padding-bottom: .8rem; font-weight: var(--font-medium); pointer-events: all;}
nav#top > ul > li:last-of-type { margin-bottom: 0;}
nav#top li.active > span > a,
nav#top > ul > li.active > a { font-weight: var(--font-bold);}
nav#top li.arrow { flex-direction: column; align-items: flex-start;  display: flex; }
nav#top li.arrow .active > a {font-weight: var(--font-bold);}
nav#top li.arrow span { position: relative; padding-right: .8rem;  }
nav#top li.arrow button { width: 100%; height: 85%;  position: absolute; right: 0; bottom: 0;  display: flex; align-items: center; justify-content: flex-end; transition: transform 500ms; color: inherit;}
nav#top li.arrow button::before { content: ""; position: absolute;  width: .4rem; height: .3rem; clip-path: polygon(50% 0%, 100% 100%, 0 100%); transform: rotate(180deg); background: currentColor;   transition: transform 500ms; display: flex; align-items: center; justify-content: center; }
nav#top li.arrow > div {  overflow: hidden;   transition: height 500ms; display: flex; flex-direction: column;  }
nav#top li.arrow ul.sub { position: relative; transform: none; margin-left: 1.15rem; padding: .5rem 0 0; display: block; color: var(--myLightOlive); }
nav#top li.arrow ul.sub li:not(:last-of-type) { margin-bottom: .25rem;}

body:not(.touch-device) nav#top li.arrow button {  pointer-events: none;}
/* End submenu bit */


@media only screen and (min-width: 768px) {
    nav#top li.arrow ul.sub { padding: 1rem  1.25rem; position: absolute; left: unset; right: -1.25em; top: -0.85rem; opacity: 0; background: var(--myTrueWhite); white-space: nowrap; color: var(--myDarkOlive); transform-origin: left; transition: opacity 500ms; z-index: 2;  transform: translateX(100%); pointer-events: none;}
    nav#top li.arrow ul.sub::before { content: ""; position: absolute; left: -1.25em; height: 100%; opacity: 0; width: 1.25em; top: 0; }
    nav#top li.arrow ul.sub li a { color: var(--myLightOlive); position: relative; display: block;}
    nav#top li.arrow:is(:hover, [data-open=true]) button::before {transform: rotate(90deg); }
    nav#top li.arrow:is(:hover, [data-open=true]) ul.sub { opacity: 1; pointer-events: all;}
}

@media only screen and (max-width: 768px) {
    nav#top > ul > li { transition: margin 500ms;}
    nav#top li.arrow > div {  height: var(--height, 0); }
    nav#top li.arrow[data-open=true] > div { height: var(--height, auto);}
    nav#top li.arrow[data-open=true] button::before { transform: rotate(0deg);}
    nav#top li.arrow[data-open=true] { margin-bottom:  0.8rem;}
}

/* --------------- FOOTER --------------- */
footer { background: var(--myDarkOlive); color: var(--myWhite); }
footer > nav { display: grid; grid-template-columns: auto 1fr; align-items: flex-start;  grid-gap: var(--gap);  font-weight: var(--font-medium);}
footer > nav > a { color: var(--myLightOlive); width: var(--logo-width); display: block; }
footer > nav > ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem;   max-width: 45rem;}
footer > nav > ul ul { display: flex; flex-direction: column; gap: .5rem;}
footer > nav > ul li:nth-of-type(2) ul li:last-of-type a,
footer > nav > ul ul li a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(255,255,255,0.5);}
footer > nav > ul li:nth-of-type(2) ul li:last-of-type a:hover,
footer > nav > ul ul li a:has(br):hover {text-decoration: none;}
footer > nav > ul li {   line-height: var(--line-height-large); }
footer #language {background: none; border-radius: 0; color: var(--myBeige); font-size: var(--font-size-body); font-family: var(--primary-font); font-weight: var(--font-medium); border: 1px solid rgba(255,255,255,0.5); line-height: 1.4; padding-inline: 0.2rem;}


/* --------------- SECTIONS --------------- */

/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { background: var(--myBeige);}
section.landing .container > img { max-width: 8rem; margin: 3.6rem auto 2.8rem; width: 25%;}
section.landing .container { margin: 0 auto; max-width: var(--max-width-narrow); min-height: 22rem; display: flex; flex-direction: column; align-items: center;  text-align: center; padding-bottom: 5.5rem; }
section.landing.has-image .container {min-height: 25rem;}
section.landing:not(.has-image) + section {background: white; overflow: auto;}
section.landing h1 { text-align: inherit; max-width: 12em; margin-left: auto; margin-right: auto; margin-bottom: .48em;}
section.landing .h3 { font-weight: var(--font-regular); line-height: var(--line-height-large); color: var(--myLightOlive); text-align: center;}


@media only screen and (max-width: 1200px) {
    section.landing .container {display: flex!important; flex-direction: column !important; }
    body.page section.landing.intro.intro .container {display: flex!important;  max-width: var(--max-width-narrow);}
    section.landing.landing .container { min-height:  18rem;  padding: 5rem 0; }
    section.landing:not(.intro,.landing) .container { padding: 2rem 0;}
}


@media only screen and (max-width: 768px) {
    section.landing .container { align-items: flex-start;  text-align: left; min-height: unset;  padding-bottom: 2rem;}
    section.landing.landing .container { min-height:  14rem; }
    section.landing h1 {margin-bottom: 2rem}
    section.landing .container > img {margin-top: 1rem;}
}


/* =========================================================== */
/* ========================== INTRO ========================== */
/* =========================================================== */
section.intro { isolation: isolate;}
section.intro > .image {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: cover;}
section.intro > .image::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: var(--myGradient); content: ""; transform: scaleX(-1);}
section.intro .container {  justify-content: center; padding-bottom: 0rem; }
section.intro p { font-family: var(--header-font);  line-height: var(--line-height-small); font-size: var(--font-size-h3);  color: var(--myLightOlive);}
header.light ~ main section.intro p { color: var(--myWhite);}
header.white ~ main section.intro :is(h1,p) { color: var(--myWhite);}
header.white ~ main section.intro .image::before { background: var(--myDarkGradient); }
body.galleries.page main {background: white;}

@media only screen and (max-width: 768px) {
    section.intro .container { padding: 7rem 0 2rem; align-items: flex-start !important; }
    section.intro .container > * { max-width: 20rem;}
    section.intro h1 { margin: 0 0 .5em; }
    section.intro > .image::before { background: linear-gradient(-15deg, rgba(235, 233, 226, 0.8) 1%, rgba(235, 233, 226, 0) 100%); }
}


/* =========================================================== */
/* ========================= TABLE =========================== */
/* =========================================================== */


table {border-collapse: collapse;}
table:not(#monasteries) {width: 100%;}
.tablewrapper {
    overflow-x: auto;
    max-width: calc(100vw - 2rem);
}
tr.unmatched {display: none;}
tr.search_unmatched {display: none;}
option:disabled {display: none;}
th {
    font-family: var(--header-font);
    line-height: var(--line-height-small);
    font-size: var(--font-size-h4);
    color: var(--myBrown);
    text-align: left;
    line-height: 1.7;
    font-weight: 400;
}
th,td {padding-right: 2rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-block: 0.25rem;}
td {cursor: pointer;}
table#monasteries tr:hover td {background: var(--myWhite);}
td > span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;}
td:nth-child(1) > span {max-width: 10em;}
td:nth-child(2) > span {max-width: 15em;}
td:nth-child(3) {padding-right: 0.5rem;}
th:nth-child(4), td:nth-child(4) {width: 100%;}
td:nth-child(4) > span {max-width: 40rem;}
th:nth-child(4), td:nth-child(5) {text-align: right; padding-right: 0;}
td:nth-child(5) > span {max-width: 5em; min-width: 5em;}
.resetbutton {
    color: var(--myBrown)!important;
    font-family: var(--primary-font)!important;
    font-weight: var(--font-medium)!important;
    font-size: var(--font-size-h5)!important;
}
.tablewrapper ~ button {margin-top: 0.8rem; margin-right: 2rem;}
.tablewrapper ~ button.hidden {display: none;}

@media (max-width: 600px) {
    .filter {flex-direction: column;}
    table#monasteries tr > :nth-child(1), table#monasteries tr > :nth-child(2) {display: none;}
}



/* =========================================================== */
/* ========================== NEWS =========================== */
/* =========================================================== */
body.news.section main { background: var(--myBeige);}
body.news.page main { background: var(--myTrueWhite);}
body.news section.news.list .container { margin-top: 4rem; }
body.page:is(.news,.events,.necrologies,.monasteries) section .container {display: grid!important; grid-template-columns: 1fr 1fr; max-width: var(--max-width);}
body.page:is(.news,.events,.necrologies,.monasteries) section.content .prose {max-width: 100%;}
body:not(:has(.intro.has-image)) main {background: var(--myTrueWhite);}
section:is(.list, .news) ul.list { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 3.5rem 2.1rem;}
li.newscard { max-width: 31rem; flex: 1;}
li.newscard a { border-radius: 100vmin 100vmin  0 0; display: block; }
li.newscard img { border-radius: 100vmin 100vmin 0 0;}
li.newscard time { margin: 1.75rem 0 .4rem;  display: block; font-size: var(--font-size-h5); color: var(--myBrown); font-weight: var(--font-medium);}
li.newscard .h2 { color: var(--myBrown); line-height: var(--line-height-small); margin-bottom: 0.6rem;}
li.newscard div { font-weight: var(--font-medium); line-height: var(--line-height-large); }
li.newscard span {margin-top: 1.5rem; font-size: var(--font-size-h5); text-decoration: underline; display: inline-block;  color: var(--myBlue); font-weight: var(--font-medium); text-underline-offset: 0.2em;}
/*li.newscard span::after {content: "→"; display: inline-block; margin-left: 0.35rem;}*/
li.newscard .h2 + span {margin-top: 0;}

section.some ul.list {  display: flex; grid-gap: unset; gap: 2.1rem;  scroll-snap-type: x mandatory;}
section.some ul.list > li { min-width: 15rem;  scroll-snap-align: center; flex-shrink: 1; }
section.some a.link { margin-top: 2rem;}

@media only screen and (max-width: 1024px) {
    section.list ul.list { grid-template-columns: 1fr 1fr; }
}
    
@media only screen and (max-width: 820px) {
    section.some ul.list {  overflow: auto; max-width: 100vw; margin-left: calc(var(--gutter-side) * -1); width: calc(100% + var(--gutter-side) * 2);}
    section.some ul.list::after { content: ""; width: 1px; height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0;  }
    section.some ul.list > li:first-of-type { margin-left: var(--gutter-side);}
    section.some ul.list > li:last-of-type { margin-right: calc(var(--gutter-side) * -1);}
}
@media only screen and (max-width: 450px) {
    section.list ul.list { grid-template-columns: 1fr;}
    
}


/* =========================================================== */
/* ==================== LATEST NECROLOGY ===================== */
/* =========================================================== */
section.necrology-latest { background: var(--myOlive); color: var(--myWhite); display: flex; flex-direction: column; }
section.necrology-latest .container { display: grid; grid-template-columns: 1fr .75fr auto; grid-gap: .5rem 1rem; margin-inline: auto;}
section.necrology-latest .h1 {color: inherit;}
section.necrology-latest ul { margin-top:  1.5rem; }
section.necrology-latest ul li { display: grid; grid-template-columns: auto 1fr;  grid-gap: 0 .6rem;  margin-bottom: 2.5rem;}
section.necrology-latest ul li .h2 { margin: 0 0 0.25em;  line-height: var(--line-height-medium); color: inherit;}
section.necrology-latest ul li svg { grid-row: span 2; width: 1.75rem; height: auto;  margin-top: .5em;}
section.necrology-latest a { align-self: flex-end; }

@media only screen and (max-width: 850px) {
    section.necrology-latest .container { grid-template-columns: 1fr; grid-gap: 0;}
    section.necrology-latest .h1 svg {  display: none;  }
}


/* =========================================================== */
/* ===================== NECROLOGY LIST ====================== */
/* =========================================================== */
body.necrologies.section { background: var(--myBeige);}
body.necrologies.page { background: var(--myBeige);}
section.necrologies .container > h2 { font-size: var(--font-size-h1);}

/* =========================================================== */
/* ====================== NECROLOGYCARD ====================== */
/* =========================================================== */
li.necrologycard { max-width: 31rem; }
li.necrologycard time { margin: 1.75rem 0 .4rem; display: block; font-size: var(--font-size-h5); color: var(--myBrown); font-weight: var(--font-medium);}
li.necrologycard .h2 { color: var(--myBrown); margin-bottom: .5em;}
li.necrologycard img { filter: grayscale(1);}
li.necrologycard span { font-size: var(--font-size-h5); text-decoration: underline; display: inline-block; color: var(--myBlue);  font-weight: var(--font-medium); text-underline-offset: 0.2em;}

body.necrologies.page section.content img {filter: grayscale(1);}

/* =========================================================== */
/* ========================== ABOUT ========================== */
/* =========================================================== */
body.home section.content .container { display: grid; grid-template-columns: 1.2fr 1fr; grid-gap: 2rem var(--gap);}
body.home section.content .h1 { margin-bottom: 0;  line-height: var(--line-height-regular);}
body.home section.content article { display: flex; flex-direction: column; line-height: var(--line-height-large); height: 100%;}
body.home section.content article h2 { color: var(--myBrown);}
body.home section.content article h2 ~ *:not(a.link) { max-width: 30rem; font-weight: var(--font-medium);}
body.home section.content article a.link { margin-top: auto; text-align: right;}

@media only screen and (max-width: 1024px) {
    body.home section.content .inner h2 { color: var(--myBrown);   margin-top: 0;  } 
    body.home section.content .container { grid-template-columns: 1fr; max-width: 50rem; }
    body.home section.content .container a.link { margin-top: 2rem;}
}


/* =========================================================== */
/* ==================== SOME MONASTERIES ===================== */
/* =========================================================== */
section.some-monasteries { background: var(--myBeige); display: flex; flex-direction: column; }
section.some-monasteries ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-gap: 2rem; }
section.some-monasteries a.link { margin-top: 2rem; }

li.monasterycard picture { margin-bottom: 1.2rem;}
li.monasterycard :is(strong,h2) { color: var(--myBrown); display: block; margin-bottom: .5rem; }
li.monasterycard :is(strong) {margin: 1.75rem 0 .35rem;  display: block; font-size: var(--font-size-h5); color: var(--myBrown); font-weight: var(--font-medium);}
li.monasterycard[data-visible=false] { display: none; }


/* =========================================================== */
/* ======================== VOCATIONS ======================== */
/* =========================================================== */
section.vocations { background: url("/uploads/vocations.jpg") 0% 50% / cover no-repeat;   display: flex; flex-direction: column; }
section.vocations::before { content: ""; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--myGradient); }
section.vocations h2 { font-size: var(--font-size-h1); }
section.vocations h2 ~ *:not(.link) { font-weight: var(--font-medium);  max-width: 30rem;}
section.vocations .inner { max-width: 40rem; margin-left: auto;  display: flex; flex-direction: column;  width: 100%; }
section.vocations .inner .link { margin: 2rem 0 0 auto; }

@media only screen and (max-width: 1100px) {
    section.vocations { background: url("/uploads/vocations.jpg") 15% 50% / cover  no-repeat;}
    section.vocations::before { background: linear-gradient(-45deg, rgba(235, 233, 226, 0.9) 50%, rgba(235, 233, 226, 0) 100%);  }
}

@media only screen and (max-width: 768px) {
    section.vocations::before { background: linear-gradient(-25deg, rgba(235, 233, 226, 0.9) 50%, rgba(235, 233, 226, 0) 100%);  }
}

/* =========================================================== */
/* ========================== BLOCK ========================== */
/* =========================================================== */
section.content .container.split { display: grid; grid-template-columns: 1fr auto; grid-gap: 0;}
section.content .container.split > div:first-child blockquote {padding-right: 2rem;}
section.content .container:not(.split) {display: block;}
section.content .prose { max-width: 37rem; font-weight: var(--font-medium); line-height: var(--line-height-large);}
section.content .container:not(.split) .prose {margin-inline: auto;}
section.content .container > div:first-of-type:not(:last-of-type) h2 { font-size: var(--font-size-h1); }

@media only screen and (max-width: 1200px) {
    section .container.split.split.split { grid-template-columns: 1fr; max-width: var(--max-width-narrow);}
}


/* =========================================================== */
/* ======================== TIMELINE ========================= */
/* =========================================================== */
section.timeline .container { align-items: center; }
section.timeline article { padding-left: calc(var(--font-size-h2) * 2); position: relative;}
section.timeline article::before { content: ""; position: absolute; left: calc(var(--font-size-h2) * (1 / 3) + 1px); height: var(--height, 100%); top: var(--top); background: var(--myBrown); width: 2px; transition: transform 3.5s ease-in-out 250ms;  transform-origin: top; transform: scaleY(0); }
section.timeline.start article::before { transform: none;}
section.timeline h2 { position: relative; padding-top: 0;}
section.timeline h2:not(:first-of-type) { margin-top: 4em;}
section.timeline h2::before,section.timeline h2::after { position: absolute; top: .2em; left: -2em; height: .8em; width: .8em;  background: var(--background-color); border: 2px solid var(--myBrown); border-radius: 50%; content: ""; }
section.timeline h2::before { transform: scale(1.8); border: none;   }

/* =========================================================== */
/* ====================== LIST SECTION ======================= */
/* =========================================================== */
.searchform { margin-bottom: 2.4rem; display: flex; flex-direction: column; align-items: flex-start; max-width: 17rem; }
.searchform label {display: block; }
.searchform div { display: flex; align-items: stretch; width: 100%; }
.searchform input {font-size: var(--font-size-h5); font-family: var(--primary-font); color: var(--myOlive);  padding: .5em; font-weight: var(--font-medium); width: 100%;}
.searchform input::placeholder { color: var(--myDarkOlive); opacity: .5; }
.searchform > div {position: relative;}
.searchform button {width: 2.425rem; flex-shrink: 0; background: var(--myLightOlive);  display: flex; align-items: center; justify-content: center; transition: background 333ms; position: absolute; right: 0; top: 0; height: 100%;}
.searchform button:hover { background: var(--myOlive);}
.searchform button svg { width: 38%; color: var(--myWhite);}

ul.pagination { display: flex; align-items: center; max-width: var(--maxWidthNarrow); width: 100%; justify-content: flex-end; margin: 5rem auto 0;   gap: .25em;}
ul.pagination li { display: flex;  transition: background 250ms; border-radius: 0.5em;  color: var(--myFadedBlue); font-family: var(--header-font); font-size: var(--font-size-h2);}
ul.pagination .empty { opacity: 0;}
ul.pagination li a {  padding: .05em 0.25em; }
ul.pagination li.dots { padding: 0; }
ul.pagination li:not(.dots):hover { background: var(--myBlack10); }
ul.pagination .active:is(:hover,:not(:hover)) a { background: var(--myFadedBlue); color: var(--myWhite); text-decoration: none; }

/* =========================================================== */
/* ======================= SEARCH PAGE ======================= */
/* =========================================================== */
section.search.all ul.list { grid-gap: 1.5rem;}
section.search.all span.no-results { text-align: center; display: none;}
section.search.all form[data-active=true] ~ ul.list:empty  ~ span { display: block; }
section.search.all .search-all { max-width: 100%; margin: 0 auto 2rem; width: 100%;  display: grid; grid-template-columns: 1fr 1fr 1fr;  grid-gap: 1rem;}
section.search .search-all > div { grid-column: 2; margin-bottom: 1rem;}
section.search .search-all input { background: var(--myBeige);}

li.searchcard { border: 1px solid var(--myBeige); display: flex; }
li.searchcard > a { padding: 1rem; display: grid; grid-template-columns: auto auto; width: 100%; } 
li.searchcard > a > *:not(.h2,em) { grid-column: -1/1;}
li.searchcard > a > em { margin: 0 0 auto auto; color: var(--myLightOlive);  font-weight: var(--font-bold);}
li.searchcard > a span { margin-top: auto; padding-top: 1rem;  }

@media only screen and (max-width: 1024px) {
    section.search.all .search-all { grid-template-columns: 1fr; max-width: 25rem;}
    section.search.all .search-all > div { grid-column:-1/1;}
}

/* =========================================================== */
/* ======================= NEWS INTRO ======================== */
/* =========================================================== */
body:not(.section) section.news.intro .container { max-width: var(--max-width); display: grid; grid-template-columns: 1fr 1fr; }
section.intro time {font-family: var(--header-font); line-height: var(--line-height-small); font-size: var(--font-size-h3); color: var(--myLightOlive);}
body:not(.section) section.intro:is(.news,.events,.necrologies,.monasteries) .container > div { grid-column: 2; text-align: left;}
section.news.intro .container h1 {max-width: 10.5em; margin-inline: 0;}
section.news.intro.galleries .container {display: grid;}
section.news.intro.galleries .container > div {text-align: center; grid-column: 1 / span 2; margin-inline: auto;}
section.news.intro.galleries .container > div h1 {margin-inline: auto;}

@media only screen and (max-width: 1200px)  {
    section.news.intro .container { min-height: 10rem; align-items: center; }
    section.news.intro .container h1 {margin-top: 0;}  
}

@media only screen and (max-width: 768px) {
    section.news.intro .container { grid-template-columns: 1fr;}
    section.news.intro .container > div { grid-column: unset;}
     
}

/* =========================================================== */
/* ========================= CONTENT ========================= */
/* =========================================================== */
section.content .container { display: grid; grid-template-columns: 1fr 1fr;}
section.content article { grid-column: 2; }
section.content article > p:last-child:has(a) {margin-top: -1.4rem;}
section.content article > p:last-child:has(a:only-child) > a, 
section.content article > a:last-child, 
section.content article > a.back {display: inline-block;  color: var(--myFadedBlue);  font-family: var(--header-font); text-decoration: none; font-size: var(--font-size-h2); margin-top: 3rem;}
section.content article > p:last-child:has(a:only-child) > a:not(.link)::after, 
section.content article > a:last-child:not(.link)::after {content: "→"; display: inline-block; margin-left: 0.7rem;}
section.content article > a.back::after {content: none!important;}
section.content article > a.back::before { content: "←"; display: inline-block; margin-right: 0.7rem;}
section.content h2:first-of-type:not(:first-child) { margin-top: 0.5em;}
section.content img.portrait { width: 100%; max-width: 30rem;}

@media only screen and (max-width: 768px) {
    section.content .container { grid-template-columns: 1fr; max-width: 30rem;}
}


/* =========================================================== */
/* =================== MONASTERY LIST PAGE =================== */
/* =========================================================== */
body.monasteries main { background: var(--myTrueWhite);}
body.monasteries .searchform input { background: var(--myBeige);}

section.monasteries:not(.intro) .container { padding-bottom: 2rem;}
section.monasteries:not(.intro) .filter { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:  .75rem 2.2rem; margin-bottom: 2rem; margin-top: -1rem;}
section.monasteries:not(.intro) .searchform { max-width: unset; width: 100%; margin: 0; }
section.monasteries:not(.intro) .searchform input { width: 100%; }
section.monasteries:not(.intro) .select { display: flex; flex-direction: column; }
section.monasteries:not(.intro) .searchform input, section.monasteries .select select { background: var(--myWhite); font-size: var(--font-size-h5); font-family: var(--primary-font); font-weight: var(--font-medium); padding: .5em; }

section.monasteries .has-reset { grid-column: -1/1; display: none; }
section.monasteries .has-reset:is([data-search-active=true],[data-filter-active=true]) { display: block; }



@media only screen and (max-width: 768px) {
    section.monasteries:not(.intro) .filter { grid-template-columns: 1fr; }
    section.monasteries:not(.intro) .filter .h2 { margin-bottom: 0.5em; font-size: var(--font-size-h5);}
}

/* =========================================================== */
/* =========================== MAP =========================== */
/* =========================================================== */
section.map figure { height: clamp(35rem, 50vw, 50rem); background: var(--myBeige);}
section.map figure #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.map figure #map:focus-visible { outline: none; }
section.map figure .dot { width: 14px; height: 14px; background: var(--myLightOlive); border-radius: 50%; transition: transform 333ms ease, background 333ms ease;  border: 1px solid var(--myWhite);}
section.map figure .dot.active { transform: scale(1.5); background: var(--myBlue); }
section.map figure [data-visible=false] .dot { transform: scale(0);}

/* Leaflet overrides */
section.map figure .leaflet-tile-pane { filter: contrast(0.5) brightness(1.38) saturate(0) sepia(0.10); }
section.map figure .leaflet-control-attribution { display: none; }

section.map figure .leaflet-div-icon { background: none; border: none; }
section.map figure .leaflet-popup-content-wrapper { padding: 0; }
section.map figure .leaflet-popup-content { margin: 0; }
section.map figure .leaflet-popup-content > div  { display: flex; flex-direction: column; gap: .25rem;  padding: .75rem; }
section.map figure .leaflet-popup-content em { color: var(--myOlive);}
section.map figure .leaflet-popup-content picture { min-width: 12rem; width: 100%; height: 0; padding-bottom: 56.25%; }
section.map figure .leaflet-popup-content img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;   border-radius: 12px 12px 0 0;}
section.map figure .leaflet-popup-content strong { font-weight: var(--font-medium); font-family: var(--header-font); font-size: var(--font-size-h3); color: var(--myOlive); }
section.map figure .leaflet-popup-content a { color: var(--myBlue); text-decoration: underline; display: inline-block; margin-top: .25rem;}



/* --------------- PROSE CONTENT --------------- */
.prose { line-height: var(--line-height-large); font-weight: var(--font-medium); padding-bottom: 1rem;}
body.home .prose {padding-bottom: 0;}
.prose > * + * { margin-top: 1.5em;}
.prose > h2 {padding-top: .5em;}
.prose > h2 + h2 {position: relative; bottom: 0.7em; margin-bottom: 0;}
.prose img,  .prose iframe { width: auto; max-width: 100%;} 
.prose ul, .prose ul ul ul { list-style: disc;}
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul)  { padding-left: 1em;}
.prose :is(ol,ul) > li { margin-bottom: .5em;}
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--main-color);}
.prose > * strong { font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn) { text-decoration: underline; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4) + :is(h1,h2,h3,h4) { margin-top: 0;}
.prose :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4) { color: var(--myBrown);}
.prose :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4) + p { margin-top: .5em;}


/* --------------- CARROUSEL --------------- */
figure.carrousel { display: flex;  position: relative; top: 0; left: 0; width: 100%; flex-direction: column;}
figure.carrousel ul{ width: 100%; flex-shrink: 0; padding: 0; height: 0;  padding-bottom: 63%;  position: relative;  }
figure.carrousel :is(li, picture, img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
figure.carrousel ul li { transition: opacity 333ms 0ms;  color: #eee;   margin: 0; }
figure.carrousel ul li:first-of-type { z-index: 2; }
figure.carrousel ul li img { object-fit: cover;}
figure.carrousel ul li[data-active=false] { opacity: 0; pointer-events: none; transition: opacity 333ms 75ms;}

figure.carrousel .buttons { position: absolute; top: calc(50% - .375rem); transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; justify-content: space-between; z-index: 2; display: flex; width: calc(100% - 1rem);  }
figure.carrousel .buttons button {  background: var(--myWhite); border-radius: 50%; width: 1.5rem; height: 1.5rem;   display: flex; align-items: center; justify-content: center;   line-height: 1.5; transition: opacity 250ms; opacity: 0;}
figure.carrousel .buttons button::before { content: "→"; position: absolute; width: 1rem;  transform: translateY(-.025rem); }
figure.carrousel .buttons button:first-of-type { transform: scaleX(-1);}
figure.carrousel .buttons:hover button,
figure.carrousel ul:hover ~ .buttons button { opacity: .7; }
figure.carrousel .buttons button:hover { opacity: 1;}

figure.carrousel > .indicators { position: relative; left: 0; right: 0; margin: 1rem auto 0; z-index: 2;  display: flex; justify-content: center; gap: .5em;  pointer-events: none; }
figure.carrousel > .indicators > button { --_size: .7rem; width: var(--_size); height: var(--_size);  border-radius: 50%;  transition: 500ms; pointer-events: all; position: relative;  border: 2px solid var(--myBlue);}
figure.carrousel > .indicators > button::before { content: ""; position: absolute;  --_excess: -0.3em; top: var(--_excess); left: var(--_excess); width: calc(100% - var(--_excess) * 2); height: calc(100% - var(--_excess) * 2); }
figure.carrousel > .indicators > button[data-active=true] {  background: var(--myBlue); }

body.touch-device figure.carrousel :is(li, picture, img) { position: relative; }
body.touch-device figure.carrousel ul { padding-bottom: 0; height: auto; display: flex; overflow: auto;  scroll-snap-type: x mandatory;  scroll-behavior: smooth;} 
body.touch-device figure.carrousel ul li[data-active] { display: flex; flex-shrink: 0; scroll-snap-align: center; opacity: 1; }

/* --------------- PARALLAX --------------- */

@keyframes parallax {
  from { 
    background-position: center bottom;
  }
  to {
    background-position: center top;
  }
}
.parallax {
  background-position: center center;
  animation: parallax linear;
  animation-fill-mode: none;
  animation-timeline: view();
}

.prose > div.param {padding: 0.3rem 0; margin: 0!important; display: flex; line-height: 1.4;}
.prose > div.param strong {font-weight: 700; min-width: 10em; display: inline-block;}
.prose > div.param + div.param.multiline {margin-top: 1.5rem;}
.prose > div.param span > *, .prose > div.param span > * > * {display: inline; padding: 0;}
.prose > div.param.multiline > ul {padding: 0;}
.prose > div.param.multiline > ul > li {list-style: none; margin: 0 0 0.6rem!important;}
.prose > div.param:not(.multiline) :is(ol, ul) > li {margin: 0;}
.prose > div.param a {text-decoration: none;}

/* --------------- 404 PAGE --------------- */
section.not-found { display: flex; flex-direction: column; align-items: center  }


/* --------------- MEDIA QUERIES --------------- */
/* MIN */


/* MAX */
@media only screen and (max-width: 1200px) {
    :root { 
        --gutter-top: 1rem; 
        --gutter-side: 2rem; 
    }
    /* --------------- HEADER --------------- */
    nav#top { position: fixed; left: 0; top: 3.875rem; background: var(--background-color);  margin: 0;  padding: var(--gutter-side) 3rem var(--gutter-side) var(--gutter-side); width: auto; height: calc(100vh - 3.875rem ); height: calc(100dvh - 3.875rem );   transform: translateX(-100%); transition: transform 500ms ease; border-right: 1px solid var(--myBeige);}
    main { padding-top: 3rem;}
    header::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;  background: #000;  opacity: 0; transition: opacity 500ms;}
    header > * { pointer-events: all;}
    input.burger {  position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 98;  }
    input.burger:checked ~ header::before { opacity: .2;}
    input.burger:checked { display: block; }
    
    nav#fixed { transition: 0s; transform: translateX(-50%);}
    nav#fixed > ul > li:first-of-type > a { padding-left: 0; padding-right: 1rem;}
    
}
@media only screen and (max-width: 768px) {
    :root { 
        --font-size-h1: 1.8rem;    /* 65px */
        --font-size-h2: 1.3rem;     /* 28px */
        --font-size-h3: 1.15rem;    /* 25px */
        --font-size-h4: 1.05rem;     /* 22px */
        --font-size-h5: 1rem;       /* 20px */
        --font-size-h6: .9rem;      /* 18px */
        --font-size-body: .9rem;    /* 18px */
        --margin-y: 4rem; 
        --gutter-side: 1rem; 
    }
    /* --------------- HEADER --------------- */
    label.burger { display: flex; }
    nav#fixed > ul > li:not(:first-of-type,:last-of-type) { display: none; }
    nav#top > a { display: none; }
    
    /* --------------- FOOTER --------------- */
    footer > nav { grid-template-columns: 1fr; grid-gap: 3rem; }
    footer > nav > a { width: 5rem; }
    footer > nav > ul { grid-template-columns: 1fr; grid-gap: 3rem; }

}

@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw;}
}

/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion) { }
  

/* --------------- ANIMATIONS --------------- */