:root {
    color-scheme: light;
    background: #f4f3ef;
}

* {
    box-sizing: border-box;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    display: grid;
    height: 100svh;
    height: 100dvh;
    place-items: center;
    background:
        radial-gradient(circle at 15% 10%, #fffdf8 0%, #e9e2d6 42%, #c8bdae 100%);
    color: #2f2a24;
    isolation: isolate;
}

body::after {
    position: fixed;
    z-index: 0;
    inset: -3rem;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(20, 17, 13, 0.08), rgba(20, 17, 13, 0.2)),
        radial-gradient(circle at center, transparent 40%, rgba(12, 10, 8, 0.28) 100%);
}

.ambient {
    position: fixed;
    z-index: 0;
    inset: -2rem;
    overflow: hidden;
    pointer-events: none;
}

.ambient img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(24px) brightness(0.72) saturate(1.15);
    transform: scale(1.08);
}

main {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding:
        max(clamp(0.75rem, 2.2vw, 1.5rem), env(safe-area-inset-top))
        max(clamp(0.75rem, 2.2vw, 1.5rem), env(safe-area-inset-right))
        max(clamp(0.75rem, 2.2vw, 1.5rem), env(safe-area-inset-bottom))
        max(clamp(0.75rem, 2.2vw, 1.5rem), env(safe-area-inset-left));
    place-items: center;
}

.image-shell {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    place-items: center;
}

.image-shell > img {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: min(100%, 1100px);
    max-height: min(100%, 800px);
    object-fit: contain;
    object-position: center;
}

@media (max-width: 640px) {
    main {
        padding:
            max(0.5rem, env(safe-area-inset-top))
            max(0.5rem, env(safe-area-inset-right))
            max(0.5rem, env(safe-area-inset-bottom))
            max(0.5rem, env(safe-area-inset-left));
    }

    .ambient img {
        filter: blur(18px) brightness(0.7) saturate(1.15);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .ambient img {
        filter: blur(12px) brightness(0.62);
    }
}