:root {
    color-scheme: light;
    --ink: #30231f;
    --muted: #67554e;
    --accent: #88422e;
    --line: rgba(123, 83, 63, .19);
    --rim: rgba(255, 249, 242, .60);
    --glass-light: linear-gradient(145deg, #fff9f05c 0%, #fff8ed0b 36%, #fff3e005 66%, #ffe6c442 100%);
    --glass-edge: inset 0 1px 0 #fffdf2d4, inset 2px 1px 4px #fff8ed52, inset -2px -2px 5px #8d4c2829, inset 0 -1px 0 #fff1da67;
    --shine: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .3);
    --shadow: 0 15px 42px -24px rgba(86, 47, 32, .48), 0 1px 4px rgba(86, 47, 32, .06);
    --page-width: 76rem;
    --gutter: clamp(1rem, 4vw, 3.5rem);
}

body.autumn {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f3ebe3;
}

body.autumn::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(ellipse at 8% 8%, #faeedc 0%, transparent 50%),
        radial-gradient(ellipse at 89% 6%, #edc8af 0%, transparent 48%),
        radial-gradient(ellipse at 98% 93%, #e4dce7 0%, transparent 49%),
        radial-gradient(ellipse at 4% 91%, #e6cebc 0%, transparent 55%),
        #f4eee8;
}

.hero-maple {
    /* Leave two-thirds of the 1076px tree silhouette in view, accounting for its transparent bottom margin. */
    --tree-size: 174.82dvh;
    position: fixed;
    z-index: 0;
    bottom: -12.96dvh;
    left: calc(var(--tree-size) / -3);
    width: var(--tree-size);
    max-width: none;
    height: auto;
    user-select: none;
    pointer-events: none;
}

#leaf-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.site-main, .site-footer, .flash-messages {
    position: relative;
    z-index: 1;
}

.site-main {
    width: min(calc(100% - var(--gutter) * 2), var(--page-width));
    margin-inline: auto;
    padding-block: clamp(1.6rem, 4vw, 3.4rem) 0;
    flex: 1;
    min-width: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: .8rem var(--gutter) 0;
}

.glass-surface {
    background: var(--glass-light), rgba(253, 245, 237, .24);
    border: 1px solid var(--rim);
    border-radius: 1.55rem;
    box-shadow: var(--glass-edge), var(--shadow);
}

.site-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .65rem;
    align-items: center;
    width: min(100%, var(--page-width));
    margin-inline: auto;
    padding: .42rem .55rem .42rem .68rem;
    border-radius: 999px;
    background: rgba(253, 247, 241, .84);
}

.site-brand, .nav-link, .glass-button, .nav-links, .nav-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-brand-group {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: .8rem;
}

.nav-journal {
    padding-left: .8rem;
    border-left: 1px solid rgba(255, 251, 247, .66);
    color: var(--ink);
    font-size: .7rem;
    line-height: 1.35;
}

.nav-journal h1 {
    margin: 0 0 .14rem;
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .04em;
}

.nav-journal h1 span {
    margin-left: .3rem;
    letter-spacing: .095em;
}

.nav-journal p { margin: 0; }

.site-brand {
    gap: .55rem;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.28rem;
    height: 2.28rem;
    flex: none;
    border-radius: 50%;
    color: var(--accent);
    border: 1px solid var(--rim);
    background: var(--glass-light), rgba(255, 245, 235, .32);
    box-shadow: var(--glass-edge), 0 3px 10px #8e4c3321;
}

.nav-links {
    gap: .2rem;
    padding: .18rem;
    border: 1px solid rgba(255, 255, 255, .56);
    border-radius: 999px;
    background: rgba(106, 63, 42, .065);
}

.nav-actions {
    justify-self: end;
    gap: .28rem;
}

.nav-link, .glass-button {
    gap: .3rem;
    min-height: 2.45rem;
    padding: .36rem .85rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.nav-link { color: var(--muted); }
.feedback-short { display: none; }

.nav-link:hover, .nav-link[aria-current="page"], .glass-button {
    background: var(--glass-light), rgba(255, 245, 234, .25);
    color: var(--accent);
    box-shadow: var(--glass-edge), 0 3px 9px rgba(89, 48, 33, .12);
}

.glass-button {
    border: 1px solid var(--rim);
    cursor: pointer;
}

.glass-button:hover, .glass-button[aria-current="page"] {
    background: var(--glass-light), rgba(252, 213, 186, .38);
    color: #69311f;
}

.nav-account { position: relative; }

.nav-account summary {
    list-style: none;
    user-select: none;
}
.nav-account summary::-webkit-details-marker { display: none; }

.account-menu {
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    width: min(13rem, calc(100vw - 2rem));
    padding: .45rem;
    background: rgba(253, 247, 241, .96);
    border-radius: 1.2rem;
}

.account-name {
    padding: .52rem .65rem;
    color: var(--muted);
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.account-menu a {
    display: block;
    padding: .58rem .65rem;
    border-radius: .75rem;
    font-size: .88rem;
}
.account-menu a:hover { background: rgba(141, 70, 44, .1); }
.account-menu .account-upload { display: none; }

.gallery-heading-label {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--glass-light), rgba(253, 244, 232, .72);
    border: 1px solid var(--rim);
    box-shadow: var(--glass-edge), var(--shadow);
}

.section-kicker {
    display: flex;
    gap: .58rem;
    align-items: center;
    margin: 0 0 .9rem;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .14em;
    color: var(--accent);
}
.section-kicker span:first-child {
    width: .44rem;
    height: .44rem;
    border-radius: 50%;
    background: #ab5738;
    box-shadow: 0 0 0 4px #c0724d26;
}
.gallery-heading {
    display: flex;
    align-items: center;
    gap: .95rem;
    margin: 0 0 1rem;
}
.gallery-heading h2 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
}
.gallery-heading::after {
    flex: 1;
    height: 1px;
    background: var(--line);
    content: "";
}
.gallery-count {
    color: var(--muted);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.75rem, 1.65vw, 1.4rem);
}

.photo-card {
    background: var(--glass-light), linear-gradient(to bottom, transparent 70%, #fff3e6a8), rgba(253, 245, 237, .21);
    min-width: 0;
    padding: .38rem;
    border-radius: 1.45rem;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.photo-card .aspect-square {
    aspect-ratio: 1;
    border-radius: 1.05rem;
    background: #e9ddd5;
}
.photo-card img { transition: transform 450ms ease; }
.photo-card .text-xs { font-size: .76rem; }
.photo-card h3 { color: var(--ink); }
.autumn .photo-card a.text-nature-600 { color: #633123; }

@media (hover: hover) {
    .photo-card:hover {
        transform: translateY(-3px);
        background-color: rgba(255, 248, 242, .45);
        box-shadow: var(--shine), 0 18px 36px -20px #6c3e32a0;
    }
    .photo-card:hover img { transform: scale(1.025); }
}

.form-panel { padding: clamp(1.2rem, 4vw, 2.25rem); }

.site-main :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), textarea, select) {
    min-width: 0;
    color: var(--ink);
    background: rgba(255, 252, 247, .45);
    border: 1px solid var(--line);
    box-shadow: var(--glass-edge);
}
.site-main :is(input, textarea)::placeholder { color: #78665e; }
.site-main input[type="file"] { max-width: 100%; }

.autumn :is(button, a).bg-nature-500 {
    color: #592d23;
    border: 1px solid #b677535c;
    background: var(--glass-light), rgba(237, 171, 125, .33);
    box-shadow: var(--glass-edge), 0 5px 13px #8c3d2a24;
}
.autumn :is(button, a).bg-nature-500:hover {
    background: var(--glass-light), rgba(232, 151, 106, .48);
}

.autumn :is(.text-gray-300, .text-gray-400) { color: #6c5b53; }
.autumn :is(.text-gray-500, .text-gray-600) { color: var(--muted); }
.autumn :is(.text-gray-700, .text-gray-800, .text-nature-800) { color: var(--ink); }
.autumn :is(.text-nature-600, .text-nature-700) { color: var(--accent); }
.autumn .bg-gray-50 { background-color: rgba(93, 56, 37, .065); }
.autumn .border-gray-50 { border-color: var(--line); }

.table-shell { overflow-x: auto; }
.table-shell table { min-width: 40rem; }
.table-shell th, .table-shell .rounded-full, .table-shell form button { white-space: nowrap; }
.table-shell td { word-break: normal; }
.table-shell:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.table-shell thead { border-bottom: 1px solid var(--line); }

.site-footer {
    margin: clamp(2.5rem, 6vw, 5rem) var(--gutter) 0;
    padding: 1.5rem 0 1.7rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.site-footer p { flex-wrap: wrap; }

.flash-error { border-color: #c77b6c; background-color: #fbe7e2; }
.flash-success { border-color: #8d9f70; background-color: #edf1e4; }
.announcement-dialog { background-color: #f8eee5; }
.announcement-header {
    color: var(--accent);
    border-bottom: 1px solid var(--line);
    background: rgba(236, 205, 180, .28);
}

.skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 110;
    padding: .6rem 1rem;
    transform: translateY(-150%);
    border-radius: .8rem;
    color: var(--accent);
    background: #fff9f1;
}
.skip-link:focus { transform: translateY(0); }
.autumn :is(a, button, summary, input, textarea, select):focus-visible {
    outline: 2px solid #91472e;
    outline-offset: 3px;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-nav, .gallery-heading-label, .form-panel, .announcement-dialog, .account-menu {
        -webkit-backdrop-filter: blur(4px) saturate(128%) brightness(1.12);
        backdrop-filter: blur(4px) saturate(128%) brightness(1.12);
        backdrop-filter: var(--glass-lens, blur(0)) blur(4px) saturate(128%) brightness(1.12);
    }

    .site-nav {
        background: var(--glass-light), rgba(255, 248, 240, .28);
    }
    .gallery-heading-label {
        background: var(--glass-light), rgba(253, 244, 232, .32);
    }
    .account-menu {
        background: var(--glass-light), rgba(255, 248, 241, .62);
    }
    .announcement-dialog {
        background: var(--glass-light), rgba(255, 246, 237, .67);
    }

    .site-nav, .gallery-heading-label {
        text-shadow: 0 1px 1px #fff8, 0 0 9px #fff9;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-nav, .glass-surface, .gallery-heading-label, .photo-card {
        background: #fbefe4;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        text-shadow: none;
    }
}

@media (max-width: 62rem) {
    .site-nav-journal {
        grid-template-areas: "brand links actions" "journal journal journal";
        border-radius: 1.5rem;
    }
    .site-nav-journal .nav-brand-group { display: contents; }
    .site-nav-journal .site-brand { grid-area: brand; justify-self: start; }
    .site-nav-journal .nav-links { grid-area: links; }
    .site-nav-journal .nav-actions { grid-area: actions; }
    .nav-journal {
        grid-area: journal;
        padding: .34rem .25rem .2rem;
        text-align: center;
        border-left: 0;
        border-top: 1px solid rgba(255, 251, 247, .5);
    }
    .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 42rem) {
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-nav { gap: .3rem; padding: .36rem; }
    .site-brand { gap: .35rem; font-size: .87rem; }
    .brand-mark { width: 1.8rem; height: 1.8rem; }
    .brand-mark svg { width: 1.1rem; height: 1.1rem; }
    .nav-link, .glass-button { padding-inline: .5rem; font-size: .79rem; }
    .nav-link svg, .feedback-label { display: none; }
    .feedback-short { display: inline; }
    .nav-actions { gap: .12rem; }
    .nav-upload { display: none; }
    .account-menu .account-upload { display: block; }
    .photo-card { padding: .28rem; border-radius: 1.16rem; }
    .photo-card .aspect-square { border-radius: .88rem; }
}

@media (max-width: 23rem) {
    .site-header { padding-inline: .5rem; }
    .site-brand { padding-inline: .15rem; }
    .site-nav { gap: .15rem; }
}

@media (prefers-reduced-motion: reduce) {
    #leaf-canvas { display: none; }
    .autumn *, .autumn *::before, .autumn *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}