@layer reset,theme,layout;@layer reset{*, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
        margin-block-end: 0;
    }

    body {
        min-height: 100vh;
        color: var(--font-color);
        font-family: sans-serif;
        -webkit-font-smoothing: antialiased;
        line-height: 1.5;
        margin: 0;
    }

    h1, h2, h3, h4, button, input, label {
        line-height: 1.1;
    }

    h1, h2, h3, h4 {
        text-wrap: balance;
    }

    ul {
        padding-left: 1rem;
    }

    ul[role='list'], ol[role='list'] {
        list-style: none;
    }

    a:not([class]) {
        text-decoration-skip-ink: auto;
        text-decoration-thickness: max(0.06em, 1px);
        text-underline-offset: 0.15em;
    }

    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    input, button, textarea, select {
        font-family: inherit;
        font-size: inherit;
    }

    textarea:not([rows]) {
        min-height: 10em;
    }

}@layer theme{:root {
        --primary-color-light: 74, 75%, 92%;
        --primary-color-medium: 106, 43%, 71%;
        --primary-color-dark: 120, 40%, 17%;
        --accent-color-dark: 323, 100%, 70%;
    }

    .visually-hidden:not(:focus):not(:active) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        width: 1px;
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    @font-face {
        font-display: swap;
        font-family: 'Material Symbols Outlined';
        font-style: normal;
        font-weight: 700;
        src: url('/fonts/material-symbols-outlined-v230-latin-700.woff2') format('woff2');
    }

    @font-face {
        font-display: swap;
        font-family: 'Playfair Display';
        font-style: normal;
        font-weight: 600;
        src: url('/fonts/playfair-display-v37-latin_latin-ext-600.woff2') format('woff2');
    }

    h1, h2 {
        font-family: "Playfair Display", serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        font-size: 1.8rem;
        color: hsla(var(--primary-color-dark), 1.0);
        margin-block-start: 1.5rem;
    }

    h1 + p {
        margin-block-start: 0.5rem;
    }

    main > h1 + * {
        margin-block-start: 1.5rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    p {
        margin-block-end: 1rem;
    }

    th, td {
        vertical-align: top;
        padding-block: 0.25rem;
        padding-inline-end: 1rem;
    }

    .light {
        color: hsla(var(--primary-color-medium), 1);
    }

}@layer layout{:root {
        --max-body-width: 64rem;
        --min-main-width: 18rem;
        --max-main-width: 72ch;
        --min-aside-width: 18rem;
        --max-aside-width: 72ch;
    }

    body {
        display: grid;
        grid-template-columns: 1fr 39rem 25rem 1fr;
        grid-auto-rows: min-content 1fr min-content;
    }
    body:has(> section) {
        grid-auto-rows: min-content min-content 1fr min-content;
    }
    body > header {
        grid-column: 2 / 4;
    }
    body > section {
        grid-column: 2 / 4;
    }
    body > main {
        grid-column: 2 / 4;
    }
    body:has(aside) > main {
        grid-column: 2 / 3;
        padding-right: 5rem;
    }
    body > aside {
        grid-column: 3 / 4;
    }
    body > footer {
        grid-column: 2 / 4;
    }

    header nav {
        background-color: hsla(var(--primary-color-medium), 1);
    }

    header {
        border-bottom: 1px solid hsla(var(--primary-color-dark), 1);
    }

    header > nav, footer {
        padding: 0.5rem;
    }

    nav {
        display: grid;
        place-items: center;
    }

    nav ul {
        display: grid;
        column-gap: 5rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav > ul {
        grid-auto-flow: column;
    }

    header nav > ul > li {
        position: relative;
        padding: 0.25rem;
    }

    nav > ul > li a,
    header nav > ul > li > button {
        display: inline-block;
        text-decoration: none;
        text-shadow: 1px 1px 1px rgba(128, 128, 128, 0.1);
        font-weight: bold;
        color: hsla(var(--primary-color-dark), 1);
        cursor: pointer;
    }

    header nav > ul > li > button {
        background-color: transparent;
        border: none;
        padding: 0;
        font-family: inherit;
        line-height: inherit;
    }

    header nav > ul > li:has(button) {
        position: relative;
    }

    header nav > ul > li > ul {
        position: absolute;
        z-index: 10;
        transition: opacity 180ms ease-in;
        transform: translateX(-1rem);
        opacity: 0.1;
        visibility: hidden;
        min-width: 28ch;
        border: 1px solid hsla(var(--primary-color-dark), 0.5);
        padding: 0.5rem calc(1rem - 1px);
        background-color: hsla(var(--primary-color-light), 0.95);
    }

    header nav > ul > li:has(button):focus-within > ul,
    header nav > ul > li:has(button):hover > ul {
        opacity: 1;
        visibility: visible;
    }

    header nav ul ul > li {
        margin: 0.25rem 0;
    }

    .carousel {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 256px;
    }

    #logo {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        z-index: 4;
        place-self: center;
    }

    #logo a {
        display: block;
        width: 180px;
        height: 180px;
        padding: 15px;
        background: hsla(var(--accent-color-dark), 0.8);
    }

    #logo a:hover,
    #logo a:focus,
    #logo a:focus-visible {
        background: hsla(var(--accent-color-dark), 0.5);
    }
    #logo a:focus-visible {
        outline: 2px solid hsla(var(--accent-color-dark), 0.75);
    }

    *[data-carousel-img] {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        z-index: 1;
    }

    *[data-carousel-direction="previous"] {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        z-index: 2;
        place-self: center start;
        margin-left: 1rem;
    }

    *[data-carousel-direction="next"] {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        z-index: 3;
        place-self: center end;
        margin-right: 1rem;
    }

    .carousel form button {
        padding: 0;
        border: 5px solid hsla(var(--primary-color-dark), 0.8);
        border-radius: 50%;
        background: hsla(var(--primary-color-light), 0.6);
        height: 3rem;
        width: 3rem;
        overflow: hidden;
        color: hsla(var(--primary-color-dark), 0.75);
        font-family: 'Material Symbols Outlined';
        font-size: 2rem;
    }
    .carousel form button span {
        margin: 0 0 0 4px;
    }
    .carousel [data-carousel-direction="previous"] button span {
        margin: 0 0 0 -2px;
    }
    .carousel form button:hover,
    .carousel form button:focus,
    .carousel form button:focus-visible {
        cursor: pointer;
        border-color: 5px solid hsla(var(--primary-color-dark), 0.8);
        background-color: hsla(var(--primary-color-light), 0.9);
    }

    .carousel form button:focus-visible {
        outline: 3px dotted hsla(var(--primary-color-light), 0.9);
    }

    main {
        max-width: var(--max-column-width);
        padding: 0 1rem;
    }

    p > img {
        max-width: 10rem;
    }

    .row {
        display: flex;
    }

    .row figure {
        display: flex;
        flex-direction: column;
        max-width: 13rem;
    }
    .row figure figcaption,
    .row figure img {
        display: block;
    }
    .row figure a:first-child,
    .row figure img:first-child {
        align-self: center;
        max-height: 10rem;
        max-width: 10rem;
    }
    .row figure figcaption {
        margin-block-start: 0.5rem;
        text-align: center;
    }

    .col {
        flex: 1;
    }
    .col:first-child {
        margin-inline-end: 2rem;
    }
    .col.wide {
        flex: 2;
    }

    .banners {
        display: grid;
        grid-template-columns: repeat(2, minmax(min-content, max-content));
        justify-content: space-between;
        margin: 2em 0;
    }

    .banners a {
        display: grid;
        justify-items: center;
        max-width: 220px;
    }

    .banners img {
        border: 1px solid hsla(var(--primary-color-dark), 1);
        filter: opacity(50%) saturate(10%);
    }

    .banners span {
        display: block;
        font-weight: 600;
        color: hsla(var(--primary-color-dark), 1)
    }

    .banners a:hover img {
        filter: opacity(100%) saturate(100%);
    }

    .events-list {
        list-style: none;
        margin: 1.5rem 0 0 0;
        padding: 0;
    }

    .events-list li {
        display: grid;
        grid-template-columns: 1fr 100%;
        column-gap: 2rem;
        margin: 0 0 2.2rem 0;
    }

    .events-list time {
        grid-column: 1;
        display: block;
        font-size: 0.8rem;
        text-transform: uppercase;
        color: hsla(var(--primary-color-dark), 1);
    }

    .events-list time .day,
    .events-list time .days {
        display: block;
        font-weight: bold;
        font-size: 1.75rem;
        line-height: 0.9;
    }

    .events-list time .days {
        font-size: 1.5rem;
    }

    .events-list h3 {
        grid-column: 2;
        margin-block-start: 0;
        margin-block-end: 0.25rem;
        font-size: 1rem;
        text-wrap: initial;
    }

    .events-list h3 .presenter {
        margin-block: 0.125rem 0.5rem;
        font-weight: normal;
        font-size: 1rem;
        display: block;
    }

    .events-list .location {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
        font-size: 0.875rem;
        line-height: 1.25;
    }

    .events-list .location > span:first-child {
        font-family: 'Material Symbols Outlined';
        font-size: 1rem;
        color: hsla(var(--accent-color-dark), 0.8);
    }

    footer {
        display: grid;
        place-items: center;
        border-top: 1px solid hsla(var(--primary-color-dark), 1);
        margin-top: 1rem;
    }

    footer > p {
        margin-top: 0.5rem;
    }

}