*,:before,:after {padding: 0; margin: repla0; box-sizing: border-box;}

html {font-size: clamp(16px, 1.3vw, 19px);}
body {
    background: white; 
    font-family: 'Playfair Display'; 
    font-size: 1rem; 
    font-weight: 400; 
    line-height: 1.4;
}
h1 {display: none; margin-bottom: 1.4rem; line-height: 1.1; font-weight: normal; margin-bottom: 3rem; font-size: 3rem;}
h2 {font-weight: normal; margin-bottom: 1.4rem; line-height: 1.1;}
body, a, .header .logo a {color: rgba(54, 122, 28, 1); text-decoration-color: rgba(54, 122, 28, .85);}
.page {max-width: 80rem; margin: 0 auto; padding: clamp(2rem, 2.5vw, 2.5vw) clamp(2rem, 5vw, 3rem);}
a {text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer;}
.small {font-size: 1rem; font-family: 'EB Garamond'; font-size: 1rem;}


/* IMAGE */
.content p + p > img {margin-top: 4rem;}
.content img {max-height: 25rem; max-width: 100%;}
#lightbox .img, .content img {
    filter: contrast(0.7) sepia(1) hue-rotate(60deg) saturate(0.2) contrast(0.7) brightness(1.25);
}
#lightbox {background:rgb(234, 220, 247)!important;}
a.lightbox-image {text-decoration-style: dotted;}


/* HEADER */

.header {display: flex; align-items: center; justify-content: space-between;}
.header, .header a {color: #111;}
.header a {text-decoration: none;}
.header nav ul {display: flex; font-family: 'EB Garamond'; gap: clamp(1.5rem, calc(0.5rem + 1vw), calc(0.5rem + 1vw)); font-size: 19px;}
.header nav ul li {list-style: none; display: flex; align-items: center;}
.header nav ul li.active a {text-decoration: underline; text-underline-offset: 0.4em;}
.header .logo, .content, h2 {font-size: 1.6rem;}
.header .socials {display: flex; align-items: center; gap: calc(0.25rem + 0.75vw); margin-left: calc(0.25rem + 0.5vw);}
.header .socials a {display: block;}
.header .socials img {height: 1rem; display: block; opacity: 0.9;}
@media (max-width: 50rem) {
    .header .socialsli {display: none;}
}



/* CONTENT */

.content {margin-block: clamp(7rem, 15vw, 10rem) 0; max-width: 40rem;}
.content h1 + p {font-size: 1.6rem; max-width: 100%; font-family: 'Playfair Display'; margin-bottom: clamp(3.5rem, 7.5vw, 5rem); color: rgba(54, 122, 28, 1);}
.content p {margin-bottom: 1.3em; max-width: 54rem; line-height: 1.5; font-size: 1rem; font-family: 'EB Garamond'; font-size: 19px; max-width: 38rem; color: #111;}
.content .contactlink {font-size: 3rem; margin-block: clamp(7rem, 15vw, 10rem) clamp(-3.5rem, -7.5vw, -5rem); display: inline-block;}
@media (max-width: 50rem) {
    .content .contactlink {margin-block: 5rem -2.5rem;}
}
body.centered .content,
body.blog .content {margin-inline: auto;}
body.centered .content h1 {display: block;}


/* FOOTER */

.footer p {margin-top: clamp(7rem, 15vw, 10rem); font-size: 1.6rem; font-family: 'Playfair Display'; color: rgba(54, 122, 28, 1);}


/* HOME */

body.home .content {margin-block: clamp(12rem, 20vw, 19rem) 0; max-width: 59rem;}
body.home .content h1 + p {margin-bottom: clamp(7rem, 15vw, 10rem); max-width: 100%; font-size: 3rem; line-height: 1.35;}
body.home .content p {max-width: 54rem; font-size: 1.6rem; font-family: 'Playfair Display'; color: rgba(54, 122, 28, 1);}
@media (max-width: 50rem) {
    body.home .content h1 + p  {font-size: 2.6rem;}
}



/* TIMELINE */

.content ul.timeline {margin-block: clamp(7rem, 15vw, 10rem); display: flex; flex-direction: column; gap: 5rem;}
.content ul.timeline li {list-style: none; display: flex; max-width: 53rem; }
.content ul.timeline li > div {flex: 1;}
.content ul.timeline li > div:nth-child(1) {font-size: 1.1rem; padding-bottom: 1rem;}
.content ul.timeline li > div:nth-child(2) * {color: #111; font-family: 'EB Garamond'; font-size: 19px;}
@media (max-width: 50rem) {
    .content ul.timeline li {flex-direction: column;}
}


/* POSTS */

.posts {display: flex; flex-direction: column; gap: 5rem;}
.posts li {list-style: none;}
.date {font-size: 1.1rem; margin-bottom: 1rem;}
.posts li h2 {font-size: 3rem; margin-bottom: 3rem;}
.posts li p {color: #111;}
.posts li:first-child .date, .content > .date:first-child {margin-top: -2rem;}


/* FORM */

.contactform {margin-block: 0 clamp(7rem, 15vw, 10rem);}
form {display: flex; flex-direction: column; max-width: 39rem; gap: 1.2rem}
form > div {display: flex; flex-direction: column; gap: 0.35rem}
form > div label {font-size: 19px; color: #111; font-family: 'EB Garamond';}
form > div textarea,
form > div input {
    padding: 0.5rem; 
    font-size: 19px; 
    color: #111; 
    font-family: 'EB Garamond';
    border-radius: 0;
    border: 1px solid #bbb;
}
form > div textarea {height: 7rem; resize: vertical;}
form > div input[type="submit"] {
    background: rgba(54, 122, 28, 1); 
    border: 0; 
    padding: 1rem 1.75rem; 
    color: white;
    cursor: pointer;
}


@media (max-width: 500px) {
    html {font-size: 3.2vw;}
}