:root {
    --app-bg: #faf5ee;
    --dark: #5b3c5c;
    --light: #faf5ee;
    --action-color: #8180c3;
    --action-text: #94647c;
    --title-text: #daa4b6;
    --gr: 1.61803398875;
    --gr-rem: calc(1rem * var(--gr));
}

html,
body {
    background-color: var(--app-bg);
    margin: 0;
    font-family: "Averia Serif Libre", cursive;
    margin: 0 auto;
    scroll-behavior: smooth;
}

address,
aside,
main,
.site-footer,
.site-header {
    margin-block-start: var(--gr-rem);
    margin-block-end: var(--gr-rem);
    padding: 0 var(--gr-rem);
    box-sizing: border-box;
}

address {
    padding-left: 0;
}

.site-header strong {
    font-size: calc(1rem * var(--gr));
    text-decoration: underline;
}

.site-header p {
    max-width: 60ch;
    text-align: justify;
    -webkit-hyphens: auto;
            hyphens: auto;
}

.site-footer {
    border-top: 1px solid black;
}

.feeds section + section {
    margin-top: calc(var(--gr-rem) * 2);
}

.feeds section h1 {
    text-align: center;
    text-decoration: underline;
    margin-bottom: calc(var(--gr-rem) * 2);
}

.feed-columns {
    -moz-column-count: auto;
         column-count: auto;
    -moz-column-width: 40ch;
         column-width: 40ch;
    gap: 1rem;
}

.feed-columns article {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    margin-block-start: var(--gr-rem);
    margin-block-end: var(--gr-rem);

    &:first-child {
        margin-block-start: 0;
    }
}

.feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
    gap: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
}

.windy-webcam-timelapse-player-iframe {
    max-width: 500px;
    margin: 0 auto;
    filter: sepia(100%);
}

.figure figure {
    margin: 0 auto;
    display: block;
    padding: 0;
}

article figure figcaption {
    font-size: 0.8rem;
    margin-top: 1rem;
    display: block;
}

.dead,
.out-of-stock {
    filter: grayscale(100%);
    opacity: 0.8;
}

.out-of-stock .info span {
    text-decoration: line-through;
}

.plant-archive picture {
    mix-blend-mode: multiply;
}

.plant-archive article > img {
    display: none;
}