*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
:root {
    --indigo: #352a60;
    --mint: #d3e6d8;
    --white: #ffffff;
    --black: #000000;
    --purple: #534399;
    --almond: #c4926a;
    --steel: #888fa1;
    /* Spacing scale */
    --space-xs:  5px;
    --space-sm:  10px;
    --space-md:  15px;
    --space-lg:  20px;
    --space-xl:  30px;
    --space-2xl: 50px;
    --space-3xl: 60px;
    /* Aliases */
    --desktop-spacing: var(--space-2xl);
    --mobile-spacing:  calc(var(--space-2xl) / 2);
}
*:focus-visible {
    outline: 3px solid orange;
}
@font-face {
    font-display: swap;
}
html, body {
    height: 100%;
}
body {
    line-height: 1.5;
    background: var(--white);
    font-family: "elza", "Tahoma", sans-serif;
    font-weight: 400;
    font-size: 100%;
    background: #fff;
}
a {
    color: var(--indigo);
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1578em;
    &:hover {
        color: var(--black);
        text-decoration: underline;
        text-decoration-thickness: max(3px, .1875rem, .12em);
        text-underline-offset: .1578em;
    }
}
a.external:after,
a[target="_blank"]:after {
    content: '';
    display: inline-block;
    background: url('../images/box-arrow-up-right.svg');
    width: 16px;
    height: 16px;
    margin-left: 5px;
}
a.button.external:hover:after,
a.button[target="_blank"]:hover:after {
    background: url('../images/box-arrow-up-right-white.svg');
}
ul {
    list-style-type: square;
}
main b, main strong {
    font-weight: 500;
}
p,
main ul li,
main ol li {
    font-size: 1.2rem;
    line-height: 1.65;
}
p,
main ul,
main ol {
    margin-bottom: var(--space-lg);
}
main ul,
main ol {
    padding: 0 0 0 var(--space-lg);
}
hr {
    border: 0;
    height: 1px;
    background-color: var(--indigo);
    margin: var(--space-xl) 0;
}
.lead {
    margin-bottom: var(--space-xl);
    p {
        font-size: 1.4rem;
        &:last-of-type {
            margin-bottom: 0;
        }
    }
}
h1, h2, h3, h4, h5 {
    font-family: "elza", "Tahoma", sans-serif;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: var(--space-lg);
    hyphens: auto;
}
h1 {
    font-weight: 500;
    font-size: 2.4rem;
    @media screen and (min-width: 768px) {
        font-size: 2.8rem;
    }
}
h2 {
    font-weight: 500;
    font-size: 1.8rem;
    @media screen and (min-width: 768px) {
        font-size: 2rem;
    }
}
h3 {
    font-weight: 500;
    font-size: 1.5rem;
    @media screen and (min-width: 768px) {
        font-size: 1.7rem;
    }
}
h4 {
    font-size: 1.35rem;
}
h5 {
    font-size: 1.2rem;
}
.skip-link {
    display: block;
    padding: var(--space-md);
    text-align: center;
    display: block;
    font-size: 1.2rem;
    overflow: hidden;
    position: absolute;
    left: -9999px;
    background: var(--purple);
    color: #fff;
    &:focus {
        position: relative;
        left: 0;
    }
    &:hover {
        color: var(--mint);
    }
}
header {
    background-color: #fff;
    border-bottom: 1px solid var(--indigo);
    a {
        padding: var(--space-xs) 0;
        display: block;

        &:hover {

        }
    }
}
.head {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md) 0;
    .logo-container {
        @media screen and (min-width: 768px) {
            flex: 1;
        }
        a {
            display: inline-block;
        }
        img {
            max-width: 90px;
        }
    }
    a.logo {
        @media screen and (max-width: 767px) {
            padding: var(--space-sm) 0px;
        }
    }
}
main,
section {
    background: #fff;
    padding: var(--mobile-spacing) 0px;
    @media screen and (min-width: 768px) {
        padding: var(--desktop-spacing) 0;
    }
}
section + section {
    padding: 0 0 var(--mobile-spacing) 0;
    @media screen and (min-width: 768px) {
        padding: 0 0 var(--desktop-spacing) 0;
    }
}
main + section.related {
    padding-top: 0;
}
.wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: block;
    padding: 0px var(--space-lg);
    &.narrow {
        max-width: 768px;
    }
    &.medium {
        max-width: 1100px;
    }
}
.languages {
    ul {
        list-style-type: none;
        padding: 0;
        @media screen and (min-width: 768px) {
            margin-right: var(--space-xl);
        }
        li {
            display: block;
            text-transform: uppercase;
            font-weight: 500;
            font-size: 1.1rem;
            @media screen and (min-width: 768px) {
                display: inline-block;
            }
        }
        li + li {
            @media screen and (min-width: 768px) {
                margin-left: var(--space-sm);
            }
        }
    }
}
#menu-toggle {
    background: #fff;
    color: var(--indigo);
    border: 2px solid var(--purple);
    padding: var(--space-sm) var(--space-md);
    font-weight: 700;
    font-family: "elza", "Tahoma", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    flex: 0 0 auto;
    .toggle-label {
        display: none;
        @media screen and (min-width: 768px) {
            display: inline-block;
        }
    }
    span.burger-icon {
        font-size: 1.5rem;
        line-height: 0.5;
    }
    &:hover {
        background: var(--indigo);
        color: #fff;
        border-color: var(--indigo);
    }
    &[aria-expanded="true"] {
        background: var(--indigo);
        color: #fff;
        border-color: var(--indigo);
        &:hover {
            background: var(--purple);
            color: #fff;
            border-color: var(--purple);
        }
    }
}
.no-js .menu ul {
    display: grid;
}
.js .menu {
    display: none;
}
.js .menu.is-active {
    display: block;
}
.menu {
    background: var(--mint);
    border-top: 1px solid var(--indigo);
    ul {
        list-style-type: none;
        padding: 0;
    }
    ul#top-menu {
        display: grid;
        padding: var(--space-lg) 0;
        @media screen and (min-width: 768px) {
            grid-template-columns: repeat(5, auto);
            grid-gap: var(--space-xl);
            padding: var(--space-xl) 0;
        }
        > li {
            font-size: 1.4rem;
            font-weight: 500;
        }
    }
    ul.sub-menu {
        padding-left: 0px;
        li {
            color: var(--mint);
            font-size: 1.1rem;
            font-weight: 400;
        }
    }
    a {

    }
    a.active {
        color: var(--black);
    }
}
.titlebar {
    margin-bottom: var(--mobile-spacing);
    @media screen and (min-width: 768px) {
        margin-bottom: var(--desktop-spacing);
    }
}
.byline {
    margin: 0;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
figure {
    margin: 0 0 var(--mobile-spacing) 0;
    @media screen and (min-width: 768px) {
        margin-bottom: var(--desktop-spacing);
    }
}
figcaption {
    margin: var(--space-md) 0 0 0;
    font-size: 1rem;
}
.breadcrumb {
    padding: 0;
}
.breadcrumb nav {
    border-bottom: 1px solid var(--indigo);
    padding: var(--space-md) 0px;
    font-size: 1.1rem;
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: end;
}
.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    margin: 0 0.25rem;
    content: "/";
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
footer {
    padding: var(--mobile-spacing) 0;
    border-top: 1px solid var(--indigo);
    @media screen and (min-width: 768px) {
        padding: var(--desktop-spacing) 0;
    }
    p {
        margin: 0;
    }
    .bottom {
        margin: var(--mobile-spacing) 0 0 0;
        @media screen and (min-width: 768px) {
            margin: var(--desktop-spacing) 0 0 0;
        }
    }
    .siteby {
        @media screen and (min-width: 768px) {
            text-align: right;
        }
    }
    .footer-nav {
        margin-top: var(--space-xl);
    }
    h3 {
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0;
    }
    ul {
        padding: 0;
        list-style-type: none;
        li {
            font-size: 1.2rem;
            line-height: 1.7;
        }
    }
}
.grid {
    display: grid;
    grid-gap: var(--space-xl);
    @media screen and (min-width: 768px) {
        grid-gap: var(--space-2xl);
    }
}
.grid-2 {
    @media screen and (min-width: 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.grid-3 {
    @media screen and (min-width: 768px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.grid-4 {
    @media screen and (min-width: 768px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.grid-event {
    @media screen and (min-width: 768px) {
        /*grid-template-columns: 5fr 8fr 2fr;*/
        grid-template-columns: 2fr 1fr;
    }
}
.grid-home {
    @media screen and (min-width: 1024px) {
        grid-template-columns: 3fr 2fr;
    }
}
.grid-two-one {
    .content {
        @media screen and (min-width: 768px) {
            grid-column: span 2;
        }
    }
    .sidebar {
        .item + .item {
            margin-top: var(--space-xl);
        }
    }
}
.item {
    position: relative;
    a {
        display: block;
        text-decoration: none;
        &:after {
            content: '';
            position: absolute;
            inset: 0;
        }
        &:hover {
            color: var(--black);
            text-decoration: underline;
            text-decoration-thickness: max(3px, .1875rem, .12em);
            text-underline-offset: .1578em;
        }
    }
    h2, h3, h4 {
        margin: 0;
    }
    h2, h3 {
        font-size: 1.45rem;
        color: var(--indigo);
        text-decoration: underline;
        text-decoration-thickness: max(1px, .0625rem);
        text-underline-offset: .1578em;
    }
    img {
        margin-bottom: var(--space-md);
    }
    p {
        margin: var(--space-lg) 0 0 0;
    }
    .item-meta {
        display: block;
        font-size: 1.05rem;
        margin: 0 0 var(--space-xs) 0;
    }
    time, span {
        display: inline-block;
    }
}
.home main {
    @media screen and (min-width: 768px) {
        padding-top: var(--desktop-spacing);
        padding-bottom: 0;
    }
    h1 {
        margin-bottom: var(--space-xl);
        span {
            font-weight: 300;
            font-style: italic;
        }
    }
}
@supports not (text-box-trim: trim-both) {
    .home main h1 {
        margin-bottom: var(--space-md);
    }
}
.home main .home-box {
    @media screen and (min-width: 768px) {
        padding-bottom: var(--desktop-spacing);
        border-bottom: 1px solid var(--indigo);
    }
}
.home-img {
    display: none;
    @media screen and (min-width: 768px) {
        display: block;
        margin-bottom: var(--desktop-spacing);
    }
    figure {
        margin: 0;
    }
}
.home-text {
    p {
        margin: 0;
        @media screen and (min-width: 768px) {
            font-size: 1.4rem;
        }
    }
}
.quicklinks {
    align-self: center;
    ul {
        padding: 0;
        margin: 0;
        padding: 0px;
        list-style-type: none;
    }
    li + li {
        margin-top: var(--space-md);
    }
    a.button {
        display: block;
    }
}
.event-desc {
    @media screen and (min-width: 768px) {
        order: 1;
    }
}
.event-meta {
    @media screen and (min-width: 768px) {
        order: 2;
    }
    h2 {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 1.2rem;
        margin-top: var(--space-xl);
        margin-bottom: var(--space-xs);
        &:first-of-type {
            margin-top: 0;
        }
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
}
.btn-links a {
    background: var(--purple);
    color: #fff;
    padding: var(--space-xs) var(--space-md);
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    border: 0;
    font-family: "elza", "Tahoma", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    display: block;
    @media screen and (min-width: 768px) {
        padding: var(--space-sm) var(--space-md);
        display: inline-block;
    }
    &:hover {
        background: var(--indigo);
        color: var(--mint);
    }
    &.button-white {
        background: #fff;
        color: var(--indigo);
        border: 2px solid var(--purple);
        &:hover {
            text-decoration: none;
            background: var(--indigo);
            color: #fff;
            border-color: var(--indigo);
        }
    }
}
.aligncenter {
    text-align: center;
}
.form-wrapper {
    align-self: start;
}
.event .form-wrapper {
    margin-top: var(--space-xl);
}
.button {
    background: var(--purple);
    color: #fff;
    padding: var(--space-xs) var(--space-md);
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    border: 0;
    font-family: "elza", "Tahoma", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    display: block;
    @media screen and (min-width: 768px) {
        padding: var(--space-sm) var(--space-md);
        display: inline-block;
    }
    &:hover {
        background: var(--indigo);
        color: var(--mint);
    }
    &.button-white {
        background: #fff;
        color: var(--indigo);
        border: 2px solid var(--purple);
        &:hover {
            text-decoration: none;
            background: var(--indigo);
            color: #fff;
            border-color: var(--indigo);
        }
    }
}
.button.label {
    margin-bottom: var(--space-md);
}
.button-wrapper {
    margin: var(--space-lg) 0;
    @media screen and (min-width: 768px) {
        margin: var(--space-xl) 0 0 0;
    }
}
.label + .label {
    margin-left: var(--space-sm);
}
.title-wrapper {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: var(--mobile-spacing);
    h2 {
        margin: 0;
    }
    a {
        font-size: 1.2rem;
        line-height: 1;
    }
}
.sep {
    color: var(--purple);
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 400;
    margin: 0 var(--space-sm);
}
.hub-title, .page-title {
    margin-bottom: var(--space-lg);
    @media screen and (min-width: 768px) {
        margin-bottom: var(--space-xl);
    }
    span {
        font-weight: 300;
    }
}
.title-wrapper h2,
h1.hub-title,
.page-title,
.home h1 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
@supports not (text-box-trim: trim-both) {
    .title-wrapper h2,
    h1.hub-title,
    .page-title,
    .home h1 {
        margin-top: -0.25em;
    }
}
main .hub-title + p {
    margin-top: var(--space-md);
    margin-bottom: var(--space-xl);
}
.hub-content {
    margin-bottom: var(--mobile-spacing);
    @media screen and (min-width: 768px) {
        margin-bottom: var(--space-2xl);
    }
    .lead {
        margin-bottom: var(--space-md);
    }
    p:last-of-type {
        margin-bottom: 0;
    }
}
form {
    label {
        display: block;
        font-size: 1.2rem;
    }
    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea {
        width: 100%;
        display: block;
        padding: var(--space-sm);
        border: 1px solid var(--steel);
        border-radius: 0;
        font-size: 1.1rem;
        font-family: "elza", "Tahoma", sans-serif;
    }
    input[type="checkbox"],
    input[type="radio"] {
        border: 1px solid var(--steel);
        flex-shrink: 0;
        margin-top: 0.5em;
    }
    input[type="checkbox"] + label,
    input[type="radio"] + label {
        margin-left: 6px;
    }
    :has(> input[type="checkbox"]),
    :has(> input[type="radio"]) {
        display: flex;
        align-items: flex-start;
    }
    select {
        font-size: 1.1rem;
        font-family: "elza", "Tahoma", sans-serif;
        padding: var(--space-xs);
        border: 1px solid var(--steel);
    }
    .form-row {
        margin-bottom: var(--space-lg);
        grid-gap: var(--space-lg);
        &:last-of-type {
            margin-bottom: 0;
        }
    }
    .button {
        line-height: 1.65;
    }
    div[data-has-error] {
        input {
            border-color: red;
        }
    }
    input[type="file"] {
        font-size: 1.1rem;
        font-family: "elza", "Tahoma", sans-serif;
    }
    fieldset {
        padding: 0;
        border: 0;
        legend {
            padding: 0;
            font-size: 1.2rem;
            font-family: "elza", "Tahoma", sans-serif;
        }
    }
    .form-help {
        font-size: 1.1rem;
    }
}
.form-status-msg {
    font-size: 1.2rem;
    line-height: 1.65;
}
div.form-status-msg {
    margin-bottom: var(--space-md);
}
.form-status-msg.form-error {
    color: red;
}
.form-status-msg.form-success {
    padding: var(--space-xs) var(--space-md);
    background-color: var(--mint);
}
.cards-wrapper {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--steel);
}
.card {
    img {
        margin-bottom: var(--space-md);
    }
    h2, h3 {
        font-size: 1.4rem;
        margin-bottom: 0;
    }
}
.related {
    h2 {
        margin: 0;
    }
    .grid {
        border-top: 1px solid var(--indigo);
        padding-top: var(--mobile-spacing);
        @media screen and (min-width: 768px) {
            padding-top: var(--desktop-spacing);
        }
    }
}
.pagination {
    padding-bottom: 0;
    nav {
        border-top: 1px solid var(--indigo);
        padding: var(--space-md) 0px;
        display: flex;
        flex-flow: row wrap;
        font-size: 1.1rem;
        span {
            flex: 1 1 auto;
            text-align: center;
        }
    }
    &.festival {
        ol {
            flex: 1 1 auto;
            li {
                line-height: 1.65;
            }
        }
    }
    p {
        font-size: 1.1rem;
        margin: 0;
    }
}
.inline-listing {
    list-style-type: none;
    padding: 0;
    margin: 0;
    li {
        display: inline-block;
    }
    li + li {
        margin-left: var(--space-md);
    }
}
main .status {
    p {
        margin-bottom: var(--space-xl);
    }
}