:root {
    color-scheme: light dark;

    --taxonomy-width: 260px;
    --footer-height: 50px;

    --background-color: light-dark(#E0E2DB, #46494C);
    --secondary-background-color: light-dark(#D2D4C8, #585C5F);
    --text-color: light-dark(#404F4C, #EAEAEB);
    --secondary-text-color: light-dark(#697777, #C5C3C6);

    --match-background-color: light-dark(#929213, #a8a25e);
    --match-text-color: light-dark(#EAEAEB, #000);

    --outline-color: light-dark(#D2D4C8, #585C5F);

    --link-color: light-dark(#345f93, #A7E2F1);


    /* Larger spacing for larger app areas, panels, etc */
    --section-vertical-space: 30px;
    --section-vertical-space-mobile: 18px;

    /* Standard spacing for individual elements and lists */
    --control-vertical-space: 20px;
    --control-horizontal-space: 25px;

    --control-vertical-space-mobile: 16px;
    --control-horizontal-space-mobile: 18px;

    --content-padding: 15px;
    --content-padding-mobile: 8px;

    /* Font colors */
    --success-font-color: light-dark(#82da5f, #82da5f);
    --success-background-color: light-dark(#377a1c, #377a1c);

    --warning-font-color: light-dark(#dca051, #dca051);
    --warning-background-color: light-dark(#7c4802, #7c4802);

    --error-font-color: light-dark(#fc1e1e, #fc1e1e);
    --error-background-color: light-dark(#a80404, #a80404);
    --error-color: light-dark(#fc1e1e, #fc1e1e);

    --box-shadow: 2px 2px 3px 1px rgba(55, 54, 54, 0.63);

    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    display: grid;
    justify-content: center;
    min-height: 100dvh;

    grid-template-columns: var(--taxonomy-width) minmax(0, 1200px);
    grid-template-rows: [header] 70px
                        [content] 1fr
                        [footer] var(--footer-height);

    grid-template-areas:
            "header  header"
            "taxonomy main"
            "footer  footer";

    gap: 0;

    background-color: var(--background-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
    text-underline-offset: 4px;

    &:hover {
        text-decoration: underline;
    }
}

main  {
    display: flex;
    flex-direction: column;
    grid-area: main;
    gap: var(--section-vertical-space);
    border-top: 2px solid var(--secondary-background-color);
    border-bottom: 2px solid var(--secondary-background-color);
    border-right: 2px solid var(--secondary-background-color);
    border-radius: 0 14px 0 0;
    background-color: var(--background-color);
    padding: var(--content-padding);
}

header {
    grid-area: header;
    display: grid;
    grid-template-columns: var(--taxonomy-width) 1fr;
    padding: var(--content-padding);
    background-color: var(--background-color);

    .search {
        display: grid;
        place-content: center;

        input[type="search"] {
            width: 400px;
            padding: 8px 12px;
            font-size: 1.1em;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    }

    form {
        margin: 0;
    }

    .logo {
        display: grid;
        place-content: center;
        text-transform: uppercase;
        font-size: 1.2em;
        letter-spacing: 2px;

        a {
            text-decoration: none;
            color: var(--secondary-text-color);
        }
    }
}

nav.taxonomy {
    padding-top: var(--section-vertical-space);
    grid-area: taxonomy;
    background-color: var(--secondary-background-color);
    display: flex;
    border-radius: 14px 0 0 14px;
    flex-direction: column;
    align-items: center;
    gap: var(--control-vertical-space);
    border: 1px solid var(--outline-color);
    border-top: none;

    .year-selector-button {
        display: none; /* Hidden on desktop */
    }

    .year-list-desktop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--control-vertical-space);
    }

    a.year {
        background-color: light-dark(#faf8f8, #252424);
        color: var(--text-color);
        padding: 12px 40px;
        text-decoration: none;
        border-radius: 6px;
        border: 1px solid var(--background-color);
        box-shadow: var(--box-shadow);

        &:hover {
            background-color: var(--link-color);
            color: var(--background-color);
        }
    }

    .current-year {
        margin-top: calc(var(--section-vertical-space) * 3);
        font-size: 4em;
        color: var(--secondary-text-color);
        font-weight: bold;
    }
}

article {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-areas:
    "image  metadata"
    "date   metadata";
    gap: var(--control-vertical-space);
    font-size: .9em;
    padding-bottom: var(--control-vertical-space);
    line-height: 1.3em;
    border-bottom: 2px solid rgba(94, 93, 93, 0.51);

    &:last-of-type {
        border-bottom: none;
    }

    .image {
        display: flex;                 /* flex for centering image */
        grid-area: image;
        justify-content: center;
        align-items: center;
    }

    &.result .image img {
        border-radius: 12px;
        box-shadow: var(--box-shadow);
    }

    .date    {
        grid-area: date;
        display: grid;
        place-content: center;

        div {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;

            span {
                font-size: 1.1em;
            }

        }
    }

    .tape-label {
        display: inline-block;
        /* A softer, slightly transparent cherry red */
        color: #fff;
        padding: 6px 20px;
        font-family: "Segoe UI", Roboto, sans-serif;
        font-weight: bold;
        letter-spacing: 1px;

        /* Minimal rotation for a natural but clean look */
        transform: rotate(-0.8deg);

        /* Very subtle shadow to show the tape has slight thickness */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

        /* A cleaner, straighter "torn" edge on the ends only */
        clip-path: polygon(
                2px 0%, 100% 0%,
                calc(100% - 2px) 50%, 100% 100%,
                2px 100%, 0% 50%
        );

        /* Optional: adds a very faint plastic-like sheen */
        background-image: linear-gradient(
                170deg,
                rgba(255,255,255,0.1) 0%,
                rgba(255,255,255,0) 50%
        );
    }

    .y-2015 { background-color: #1a5c1a; }
    .y-2016 { background-color: #267326; }
    .y-2017 { background-color: #2d7a2d; }
    .y-2018 { background-color: #3d8a2d; }
    .y-2019 { background-color: #4d9a2d; }
    .y-2020 { background-color: #5a9d28; }
    .y-2021 { background-color: #6b9d1f; }
    .y-2022 { background-color: #7d9c15; }
    .y-2023 { background-color: #8f9910; }
    .y-2024 { background-color: #9d8c0d; }
    .y-2025 { background-color: #a67c0a; }
    .y-2026 { background-color: #ad6c08; }
    .y-2027 { background-color: #b45c06; }
    .y-2028 { background-color: #b84c08; }
    .y-2029 { background-color: #bb3c0a; }
    .y-2030 { background-color: #bd2c0c; }
    .y-2031 { background-color: #b82413; }
    .y-2032 { background-color: #b01c16; }
    .y-2033 { background-color: #a81515; }
    .y-2034 { background-color: #9d1010; }
    .y-2035 { background-color: #8b0d0d; }

    .metadata {
        grid-area: metadata;
        display: flex;
        flex-direction: column;
        gap: var(--control-vertical-space);

        .date-mobile, .image-mobile {
            display: none;
        }

        .summary {
            line-height: 1.4em;
        }
    }

    .source  {
        letter-spacing: 1px;
        span.name {
            font-size: 1.1em;
            color: var(--secondary-text-color);
        }
    }

    .matched {
        border: 1px dashed var(--outline-color);
        color: var(--secondary-text-color);
        padding: 5px;
        span {
            background-color: var(--match-background-color);
            color: var(--match-text-color);
            border-radius: 8px;
            padding: 1px 5px;
        }

    }

    .title   {
        font-size: 1.2em;
    }

    .archived a {
        color: var(--text-color);
    }
}

#breadcrumb {
    display: flex;
    flex-direction: row;
    gap: var(--control-horizontal-space);
    padding: 7px;
    align-items: center;
    border-radius: 6px;

    span {
        display: flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 6px;
        box-shadow: var(--box-shadow);
    }

    a {
        color: var(--secondary-text-color);
        font-size: 1.4em;
        margin-left: 10px;
        text-decoration: none;
    }
}

.pager {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--control-horizontal-space);

    .active {
        color: var(--text-color);
        font-weight: bold;
        text-decoration: none;
    }
}

footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-area: footer;
    align-items: center;
    height: var(--footer-height);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);

    a {
        color: var(--secondary-text-color);
        display: flex;
        align-items: center;
        gap: .5em;
        font-size: 1em;
    }

    img {
        vertical-align: middle;
    }

    .about {
        display: flex;

        align-content: center;
        justify-content: right;
        gap: 5em;

        a {
            color: var(--text-color);
        }
    }
}

@media (max-width: 920px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: [header] auto
                            [taxonomy] auto
                            [content] 1fr
                            [footer] var(--footer-height);
        grid-template-areas:
      "header"
      "taxonomy"
      "main"
      "footer";
    }

    main {
        gap: var(--section-vertical-space-mobile);
        padding-left: var(--content-padding-mobile);
        padding-right: var(--content-padding-mobile);
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    header {
        display: flex;
        flex-direction: column;
        gap: var(--control-vertical-space);
        padding: var(--content-padding-mobile);
        padding-top: var(--section-vertical-space-mobile);

        .search {
            padding-right: 0;

            input[type="search"] {
                width: 300px;
                font-size: 1em;
            }
        }

        .logo {
            padding-left: 0;
            font-size: 1.3em;
            letter-spacing: 1px;
        }
    }

    nav.taxonomy {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: var(--content-padding-mobile);
        border-radius: 0;
        gap: var(--control-vertical-space-mobile);

        .year-selector-button {
            display: flex;
        }

        .year-list-desktop {
            display: none;
        }

        a.year {
            padding: 6px 20px;
            border-radius: 4px;
       }

        .current-year {
            margin-top: 0;
            font-size: 2.5em;
        }

        .year-popover {
            background-color: var(--secondary-background-color);
            color: var(--text-color);
            border: 1px solid var(--outline-color);
            border-radius: 8px;
            padding: 12px;
            box-shadow: var(--box-shadow);
            margin: 0;
            min-width: 120px;
            position-area: bottom;

            &::backdrop {
                background-color: transparent;
            }

            .year-popover-item {
                display: block;
                background-color: light-dark(#faf8f8, #252424);
                color: var(--text-color);
                padding: 10px 30px;
                text-decoration: none;
                border-radius: 4px;
                border: 1px solid var(--background-color);
                margin-bottom: 8px;
                text-align: center;

                &:last-child {
                    margin-bottom: 0;
                }

                &:hover {
                    background-color: var(--link-color);
                    color: var(--background-color);
                }
            }
        }

        .year-selector-button {
            background-color: light-dark(#faf8f8, #252424);
            color: var(--text-color);
            padding: 10px 20px;
            border: 1px solid var(--outline-color);
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: var(--box-shadow);

            &:hover {
                background-color: var(--link-color);
                color: var(--background-color);
            }

            .selected-year {
                font-weight: bold;
            }
        }
    }

    article {
        display: flex;
        padding-bottom: var(--control-vertical-space-mobile);
        padding-top: 0;

        .date, .image {
            display: none;
        }

        .metadata {
            gap: var(--control-vertical-space-mobile);

            .title a {
                text-decoration: none;
            }

            .image-mobile {
                display: flex;
                place-self: center;
            }

            .date-mobile    {
                grid-area: date;
                display: grid;
                place-content: center;

                div {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 10px;

                    span {
                        font-size: 1.1em;
                    }

                }
            }


            .image-mobile img {
                box-shadow: var(--box-shadow);
                border-radius: 8px;
            }
        }
    }

    footer {
        padding-left: var(--content-padding-mobile);
    }
}

@media (max-width: 920px) {
    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: [header] auto
                            [taxonomy] auto
                            [content] 1fr
                            [footer] var(--footer-height);
        grid-template-areas:
      "header"
      "taxonomy"
      "main"
      "footer";
    }
}

@media (max-width: 500px) {
    header {
        .search {
            input[type="search"] {
                width: 300px;
                font-size: 1em;
            }
        }

        form {
            margin: 0;
        }

        .logo {
            font-size: 1.1em;
            letter-spacing: 1px;
        }
    }

    article {
        .metadata {
            .image-mobile img {
                width: 280px;
            }
        }
   }
}