:root {
    color-scheme: light;
    --bg: #fffdfb;
    --surface: #ffffff;
    --text: #3f343a;
    --muted: #8c7d84;
    --line: #e7ddd8;
    --accent: #b8874a;       /* gold of the wreath frame */
    --accent-strong: #7d2f42; /* deep burgundy of the blossoms */
    --error: #b23a48;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Login page */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 1rem;
    /* The wreath is drawn on white, so it blends into the page background and
       the whole frame stays visible at any window shape. */
    background-image: url("/assets/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.login-card {
    /* Sits in the empty middle of the wreath. The halo keeps the text readable
       when a narrow window pushes the card over the gold lines. */
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.96) 62%, rgba(255, 255, 255, 0));
    padding: 2rem 2.25rem 2.5rem;
    width: min(86vw, 320px);
    text-align: center;
}

.login-card h1 {
    margin: 0 0 1.25rem;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-weight: 500;
    font-size: 1.9rem;
    letter-spacing: 0.04em;
    color: var(--accent-strong);
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Off-screen for the eye, still read aloud and still the field's accessible
   name. Not display:none or visibility:hidden — those take it out of the
   accessibility tree along with the layout. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.login-card input[type="password"] {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text);
    font-size: 1rem;
}

.login-card input[type="password"]::placeholder {
    color: var(--muted);
    letter-spacing: 0.03em;
    /* Firefox dims placeholders on its own; match the other browsers. */
    opacity: 1;
}

.login-card input[type="password"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.login-card button {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: white;
    font-size: 1rem;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.login-card button:hover {
    background: var(--accent-strong);
}

.error {
    color: var(--error);
    font-size: 0.9rem;
    margin: 0;
}

/* A portrait window would shrink a contained wreath to a sliver, so zoom in
   and let the flowers bleed off the sides instead. */
@media (max-aspect-ratio: 1 / 1) {
    .login-page {
        background-size: 155% auto;
    }
}

/* Gallery page */

/* The same wreath as the login, faded back to a texture so it reads as one
   site without competing with the photos. A fixed layer behind the content,
   rather than a body background, because only a pseudo-element can be both
   blurred and dimmed; the grid covers most of it, so what shows through is
   the topbar strip, the page edges and whatever the last row leaves empty.
   The file is already in cache from the login page.

   Sized to about two thirds of the window: the second term caps the width by
   the window's height (1.41 is the image's own ratio), so the whole wreath
   stays in view instead of being cropped on a short window. */
.gallery-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("/assets/background.png") no-repeat center;
    background-size: min(66vw, calc(66vh * 1.41)) auto;
    opacity: 0.1;
    filter: blur(3px);
}

.topbar {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.topbar h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--accent-strong);
}

.empty-state {
    text-align: center;
    color: var(--muted);
    margin-top: 3rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px;
    padding: 4px 4px 2rem;
}

.grid button {
    padding: 0;
    border: none;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    /* Holds the tile's shape while the thumbnail is still being generated,
       so the grid settles immediately and only the picture fades in. */
    background: #f2ece9;
}

.grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.15s ease;
}

/* Added by gallery.js once the image has actually decoded. */
.grid img.is-loaded {
    opacity: 1;
}

.grid button:hover img {
    transform: scale(1.04);
}

/* A fade is decoration; honour a request for less movement. */
@media (prefers-reduced-motion: reduce) {
    .grid img {
        transition: none;
    }
}

/* Lightbox */

.lightbox {
    position: fixed;
    inset: 0;
    /* gallery.js reads horizontal drags as paging gestures, so the browser
       must not also treat them as panning. Vertical panning and pinch-zoom
       stay with the browser. */
    touch-action: pan-y pinch-zoom;
    background: rgba(255, 253, 251, 0.94);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.lightbox[hidden] {
    display: none;
}

.lightbox img {
    max-width: min(92vw, 1400px);
    max-height: 82vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(63, 52, 58, 0.18);
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 2rem;
    line-height: 1;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    line-height: 1;
    padding: 0.5rem 1rem;
}

.lightbox-prev {
    left: 0.5rem;
}

.lightbox-next {
    right: 0.5rem;
}

.lightbox-close,
.lightbox-nav {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    opacity: 0.6;
}

.lightbox-close:hover,
.lightbox-nav:hover {
    opacity: 1;
}

@media (max-width: 600px) {
    .lightbox-nav {
        font-size: 2rem;
        padding: 0.4rem 0.6rem;
    }
}