@font-face {
    font-family: "Clarendon Graphic";
    src: url("/assets/fonts/Clarendon-Graphic-Light.otf");
    font-weight: normal;
}
@font-face {
    font-family: "Clarendon Graphic";
    src: url("/assets/fonts/Clarendon-Graphic-Light Italic.otf");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "Clarendon Graphic";
    src: url("/assets/fonts/Clarendon-Graphic-Semi.otf");
    font-weight: bold;
}

:root {

    /* Colors */
    --mountain-heather:#965893;
    --dusky-rose: #d8a58f;
    --morning-yellow: #f3e29d;
    --sunset-orange: #f1ac5c;
    --pale-green: #c1d4bd;
    --moss-green: #899232;
    --forest-green: #015d40;
    --blue-mist: #d4dff3;
    --night-sky: #3a3d76;

    --color-background-mountain: rgb(254, 255, 240);
    --color-background-river: rgb(232, 252, 255);
    --color-background-valley: honeydew;

    --color-text-EN-normal: var(--night-sky);
    --color-text-CY-normal: var(--forest-green);
    --color-text-muted: ;
    --color-text-hover: ;

    /* Fontsizes */
    --fontsize-s: 0.8rem;
    --fontsize-m: 1rem;
    --fontsize-l: 1.5rem;
    --fontsize-xl: 2rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-s: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-m: 1rem;
    --spacing-l: 2rem;
    --spacing-xl: 4rem;

    --outer-margin: var(--spacing-m);

    /* Width */
    --width-text: 35rem;
    --width-wide: 70rem;
    --width-full: calc(100vw - (2 * var(--outer-margin)));
    --width-section-nav: 6rem;

    /* Border */
    --border: 1px solid black;
    --border-dashed: 1px dashed black;
    --border-hover: 1px dashed black;
    --border-active: 1px dashed red;

    /* Grid */
    --grid-columns: 12;
    --grid-margin: 0px;
    --grid-gap: 0px;

    --grid-gap-total: calc((var(--grid-columns) - 1) * var(--grid-gap));
    --grid-available: calc(100vw - (var(--grid-margin) * 2) - var(--grid-gap-total));
    --col-w-1: calc(var(--grid-available) / var(--grid-columns));
    --col-w-2: calc(var(--col-w-1) * 2 + var(--grid-gap) * 1);
    --col-w-3: calc(var(--col-w-1) * 3 + var(--grid-gap) * 2);
    --col-w-4: calc(var(--col-w-1) * 4 + var(--grid-gap) * 3);
    --col-w-5: calc(var(--col-w-1) * 5 + var(--grid-gap) * 4);  
    --col-w-6: calc(var(--col-w-1) * 6 + var(--grid-gap) * 5);
    --col-w-7: calc(var(--col-w-1) * 7 + var(--grid-gap) * 6);
    --col-w-8: calc(var(--col-w-1) * 8 + var(--grid-gap) * 7);
    --col-w-9: calc(var(--col-w-1) * 9 + var(--grid-gap) * 8);
    --col-w-10: calc(var(--col-w-1) * 10 + var(--grid-gap) * 9);
    --col-w-11: calc(var(--col-w-1) * 11 + var(--grid-gap) * 10);
    --col-w-12: calc(var(--col-w-1) * 12 + var(--grid-gap) * 11);
}

* {
  box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 20px;
}
@media only screen and (max-width: 600px) {
    html {
        font-size: 16px;
    }
}


::-webkit-scrollbar * {
  display: none;
}
html * {
    scrollbar-width: none;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
    -webkit-text-size-adjust: none;
    padding: 0;
    margin: 0;
    font-family: "Clarendon Graphic";
    background-color: var(--color-background-mountain);
}

button {
    font-size: 1em;
    font-family: inherit;
    border: 0;
    padding: 0;
    text-align: inherit;
}

figure {
    margin: 0;
}
img {
    width: 100%;
    vertical-align: bottom;
}
figcaption {
    font-size: var(--fontsize-s);
    margin-top: var(--spacing-xs);
}
p {
    margin-top: 0;
}

a, a:visited {
    color: inherit;
}

/* Utilities */
.flex-row {
    display: flex;
    column-gap: var(--outer-margin);
}
.flex-row__column,
.flex-row > * {
    flex: 1;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
@media only screen and (max-width: 900px) {
    .flex-row--mb-col {
        flex-direction: column;
    }
}

.pt {
    padding-top: var(--spacing-m);
}


.hidden {
    visibility: hidden;
    height: 0;
    width: 0;
    margin: 0;
}

.list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
}
.list-reset dd {
    margin: 0;
}

.list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    column-gap: var(--outer-margin);
    row-gap: var(--spacing-m);
}
.list-grid--fit {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.list-grid--small {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.journal-entries .list-grid {
    align-items: center;
}
@media only screen and (max-width: 600px) {
    .list-grid {
        grid-template-columns: 1fr;
    }
    .list-grid--small {
        grid-template-columns: 1fr 1fr;
    }
}
.list-feed {
    display: flex;
    flex-direction: column;
    row-gap: var(--outer-margin);
}

.link-reset {
    text-decoration: none;
    color: inherit;
}


/* Titles/text */

.site-title {
    color: inherit;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.section-title {
    font-size: var(--fontsize-s);
    display: flex;
    column-gap: var(--spacing-s);
    text-decoration: underline;
    margin: var(--spacing-s) 0;
}
.section-link {
    text-decoration: none;
}
.page-title {
    margin-top: 0;
    display: flex;
    flex-direction: column;
}
.page-title--journal {
    text-align: center;
    margin: var(--spacing-l) 0;
}

.text-en {
    color: var(--color-text-EN-normal);
}

.text-cy {
    color: var(--color-text-CY-normal);
}

.lang-priority-cy .text-cy {
    order: -1;
}

/* Site-wide */

.header {
    position: sticky;
    top: 0;
    display: flex;
    padding: var(--spacing-s) var(--outer-margin);
    justify-content: space-between;
    background-color: white;
    z-index: 1;
    border-bottom: 1px dashed black;
}

.menu {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.menu__button {
    z-index: 2;
}
.menu__list {
    display: none;
}
.menuIsOpen .menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}
.menu__list--full {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    padding: var(--spacing-xl) var(--spacing-s);
    backdrop-filter: blur(1rem);
    background-color: #ffffff80;
    width: 100vw;
    height: 100vh;
    font-size: var(--fontsize-xl);
    text-align: center;
    overflow: scroll;
}
.menu__list--full .menu__link {
    flex-direction: column;
}
.menu__link {
    text-decoration: none;
    display: flex;
    column-gap: var(--spacing-s);
    justify-content: end;
}
.menu__link:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
}
.menu__item--active .menu__link {
    text-decoration: underline;
}
.menu__item {
    width:fit-content;
    margin: 0 auto;
}

.main {
    min-height: calc(100vh - 2rem);
    position: static;
    margin-top: -1px;
}

.section {
    display: flex;
    flex-direction: column;
    padding-left: var(--outer-margin);
    padding-right: var(--outer-margin);
    padding-bottom: 3rem;
    margin-bottom: -2rem;
    height: 100%;
    border-top: var(--border-dashed);
    scroll-margin-top: 2rem;
}

.section-nav {
    display: inline-block;
    position: sticky;
    bottom: 0;
    left: calc(100vw - (var(--spacing-s) + (1 * (var(--width-section-nav) + var(--spacing-s)))));
    padding: var(--spacing-s);
    border: var(--border-dashed);
    border-top-left-radius: var(--spacing-s);
    border-top-right-radius: var(--spacing-s);
    height: 2rem;
    width: var(--width-section-nav);
    border-bottom: none;
    margin-bottom: -1px;
}
.section-nav--2 {
    left: calc(100vw - (var(--spacing-s) + (2 * (var(--width-section-nav) + var(--spacing-s)))));
}
.section-nav--3 {
     left: calc(100vw - (var(--spacing-s) + (3 * (var(--width-section-nav) + var(--spacing-s)))));
}

.mountain {
    background-color: var(--color-background-mountain);
}

.river {
    background-color: var(--color-background-river);
}

.valley {
    background-color: var(--color-background-valley);
}

/* HOME */

.home-logo {
   max-width: 600px;
}
.home-logo img {
    object-fit: contain;
}

@media only screen and (min-width: 2000px) {
    .home-intro {
    font-size: 1vw;
}
}

.home-localdata {
    color: var(--sunset-orange);
}

.home-localdata dl dd {
    /* display: inline-block; */
}
.local-time {
    text-transform: uppercase;
}
.local-weather {
    text-transform: capitalize;
}

.opencall {
    background-color: var(--mountain-heather);
    border-radius: 100%;
    display: flex;
    color: white
}

.opencall .link-reset {
    display: flex;
    flex: 1;
    width: 100%;
}

.opencall .item-card {
    justify-content: center;
    align-items: center;
    margin: auto;
    flex: 1; 
    color: white
}

.opencall .item-card .item-card__title {
    padding: 0 var(--spacing-m);
}

.opencall .item-card__title span {
    color: white;
}
.opencall .item-card__cover {
    display: none;
}
.related-person a {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background-color: white;
    display: flex;
    align-items: center;
}
.related-person p {
    text-align: center;
    width: 100%;
}


/* Item-card */

.item-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
    min-height: 200px;
}
.item-card--person {
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: white;
    position: relative;
}
.item-card__title {
    margin: 0;
    font-weight: normal;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.item-card--person .item-card__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.item-card__date {
    margin: 20px 0 0 0;
    font-size: var(--fontsize-s);
}
.item-card__deadline {
    margin: 0;
    font-size: var(--fontsize-s);
}
.item-card img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.site-list .item-card img {
    aspect-ratio: 3 / 3;
}
.journal-stream img {
    object-fit: contain;
}
.journal-stream .item-card {
    background-color: white;
    padding: var(--spacing-m);
    text-align: center;
}
.journal-stream .opencall-item {
    background-color: transparent;
}
.item-card--person img {
    aspect-ratio: 1 / 1;
}


/* Breadcrumb */

.breadcrumb li {
    display: inline-block;
    font-size: var(--fontsize-s);
    margin-bottom: var(--spacing-s);
}

.breadcrumb li::before {
  content: '←';
}

.breadcrumb a {
    text-decoration: none;
}

.breadcrumb li:hover a {
    text-decoration: underline;
}

/* Journal-stream */

.journal-stream {
    margin: 0 calc(-1 * var(--outer-margin));
    cursor: pointer;
}

.journal-stream__items {
    display: flex;
    flex-direction: row;
    column-gap: var(--spacing-l);
    overflow-x: scroll;
    padding: 0 var(--outer-margin);
}
.journal-stream__items .opencall {
    height: auto;
}

.journal-stream__item {
    flex: 0 0 auto;
    width: 400px;
}
@media only screen and (max-width: 400px) {
    .journal-stream__item {
        width: var(--width-full);
    }
}


.journal-stream__item h3 {
    font-size: var(--fontsize-m);
}

.load-more {
    width: 100%;
    
}
.load-more-item {
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.item-card-load {

    border: 1px dashed black;
    display: flex;
    align-items: center;
    height: 200px;
}

.item-card-load p {
    margin: 0 auto;
}

.item-card-load:hover {
    background-color: white;
}

/* JOURNAL */


.item--journal-entry {
    padding: 20px;
    background-color: white;
    text-align: left;
    height: fit-content;
}
.opencall {
    background-color: var(--mountain-heather);
    border-radius: 100%;
    display: flex;
    color: white;
    height: 500px;
}

.item--journal-entry .item-card__title {
    margin-bottom: 20px;
}



.journal .river,
.journal-entry .river {
    padding-top: var(--spacing-m);
}

.journal-entry-cover {
    margin: 0 auto 40px auto;
}

.journal-entry-cover img {
    max-height: 50vh;
    width: auto;
}
.journal-meta {
    margin: 0 auto;
    font-size: var(--fontsize-s);
    text-align: center;
    margin-bottom: 30px;
}
.meta__journal-date {
    display: inline-block;
}
.meta__journal-authors {

}

/* Footer  */

.footer {
    width: 100%;
    background-color: white;
    padding: 20px;
    font-size: 12px;
    display: flex;
    border-top: 1px dashed black;
}
/* .footer-item {
    width: 33%;
} */
.footer-info {
    max-width: 30%;
}
.footer-links {
    margin-bottom: 20px;
    color: var(--night-sky);
}
.footer-num {
    font-weight: bold;
}
.footer-logos {
    text-align: right;
    width: 100%;
}
.footer-logos figure {
    display: inline-block;
}
.footer-logos img {
    height: 75px;
}


/* CONTENT LAYOUT/BLOCKS */

.content-layout {
    max-width: var(--width-wide);
    margin: 0 auto;
    padding-bottom: var(--spacing-l);
}

.content-layout__row {
    display: flex;
    column-gap: var(--spacing-m);
    justify-content: center;
}
@media only screen and (max-width: 800px) {
  .content-layout__row {
        flex-direction: column;
    }
}
.content-layout__column {
    flex: 1;
}

.block {
    margin: 0 auto;
}

.block-text,
.block-heading,
.block-list,
.block-quote {
    max-width: var(--width-text);
}

.block-image,
.block-gallery,
.block-video {
    margin: var(--spacing-l) 0;
}

.block-heading {
    text-align: center;
}

.block-text p {
    line-height: 1.2;
}

.block-gallery__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-s);
}
.media-gallery .block-gallery__list {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-s);
}
.block-gallery figcaption {
    margin-top: var(--spacing-s);
    text-align: center;
}

.block-quote blockquote {
    margin: var(--spacing-xl) 0;
}
.block-quote div {
    font-style: italic;
}
.block-quote footer {
    font-size: var(--fontsize-s);
    /* margin-top: var(--spacing-l); */
}
.block-pdf__embed {
  width: var(--col-w-6);
  height: 80vh;
  border: 1px solid var(--color-border, #ddd);
}
.block-pdf {
    text-align: center;
}

/* Fader */
.fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    pointer-events: none;
    background: white;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
}
.fader--far {
    animation-duration: 1s;
}
@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

@keyframes fade-in {
    from { opacity: 0 }
      to { opacity: 1 }
}

.fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

.fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}

/* Layout */
.layout-2-col {
    padding-top: var(--spacing-m);
}
@media only screen and (min-width: 900px) {
    .layout-2-col {
        display: flex;
        flex-direction: row;
        align-items: stretch; 
        height: calc(100vh - 2rem);  
        column-gap: var(--outer-margin);
        padding: 0;
        margin-bottom: calc(-1 * var(--spacing-m));
    }

    .layout-2-col__column {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        height: 100%;
    }

    .layout-2-col__column-inner {
        padding: var(--outer-margin) 0;
    }
}




.media-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--outer-margin);
}

.content {
    max-width: var(--width-text);
}




/* META SECTION */

.meta {
    display: flex;
    column-gap: var(--spacing-m);
    justify-content: space-between;
    margin-bottom: var(--spacing-m);
    font-size: var(--fontsize-s);
}
.meta * {
    flex: 1;
}

.meta__authors {
    text-align: center;
}
.meta__author::after {
    content: ", ";
}
.meta__author:last-child:after {
    content: none;
}
.meta__tags {
    text-align: right;
}
.meta__tag {
    display: inline;
}
.meta__tag:hover {
    text-decoration: underline;
}
/* .meta__tag::after {
    content: ", ";
} */
.meta__tag:last-child:after {
    content: none;
}
.meta__tag::before {
    content: "#";
}

.meta__sites {
    text-align: right;
}


/* PEOPLE */

.people-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
}

.people-list__section-title {
    margin-top: 0;
    font-size: var(--fontsize-m);
    text-decoration: none;
}

/* PERSON */

.person-contact {
    display: flex;
    flex-direction: column;
}