/* Spadeyz Commissions — layout & theme */

:root {
    --ink: #3e2723;
    --ink-soft: #5d4037;
    --yellow: #fad054;
    --yellow-deep: #e5b840;
    --sky-top: #2b7da4;
    --sky-mid: #4a9ec4;
    --sky-bottom: #8ec5e8;
    --floral-tile: url("../assets/Flowerbackgroundhalfopacity.png");
    --header-border: 3px solid var(--ink-soft);
    --font-display: "Finger Paint", "Comic Sans MS", cursive;
    --tap-min: 44px;
    /* 1080p-preserving upscale.
       Below 1920×1080 it's pinned to 1 (so the existing responsive design is
       untouched). Above, it grows linearly with the smaller of the two
       viewport-to-1080p ratios, so on a 2560×1440 monitor everything is 1.33×
       bigger and on a 4K monitor everything is 2× bigger — preserving the
       exact ratios the page has at 1920×1080. Multiply any clamp() max (or
       negative-direction min) by var(--upscale) to opt that value into the
       scaling. */
    --upscale: max(1, min(calc(100vw / 1920px), calc(100vh / 1080px)));
    /* Larger tile = bigger motifs when repeating (header + nav) */
    --floral-bg-size: clamp(240px, 44vw, calc(1020px * var(--upscale)));
    /* Centered content column (nav only on this page); backgrounds stay full-bleed */
    --content-max-width: calc(1440px * var(--upscale));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    font-family: var(--font-display);
    color: var(--ink);
    background: #000;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

@supports (height: 100dvh) {
    body {
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
    }
}

/* ——— Top bar (home / title) — same as /gallery ——— */

.gallery-topbar {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--yellow);
    background-image: var(--floral-tile);
    background-repeat: repeat;
    background-size: var(--floral-bg-size) auto;
    border-bottom: var(--header-border);
    padding: clamp(0.55rem, 1.4vw, calc(1.05rem * var(--upscale)))
        clamp(0.85rem, 2.2vw, calc(1.65rem * var(--upscale)));
}

.home-link {
    position: absolute;
    left: clamp(0.85rem, 2.2vw, calc(1.65rem * var(--upscale)));
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
    border-radius: 6px;
    padding: 0.25em;
    font-size: clamp(1.85rem, 5.5vw, calc(2.85rem * var(--upscale)));
    line-height: 1;
    transition: transform 0.12s ease;
}

.home-link:hover {
    transform: translateY(calc(-50% - 1px));
}

.home-link:focus-visible {
    outline: 3px solid var(--sky-top);
    outline-offset: 2px;
}

.home-icon {
    width: 1.1em;
    height: 1.1em;
    display: block;
}

.gallery-title {
    margin: 0;
    text-align: center;
    font-size: clamp(1.85rem, 5.5vw, calc(2.85rem * var(--upscale)));
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    min-width: 0;
}

/* ——— Main scene ——— */

.site-main {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Sky + halftone */

.sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        var(--sky-top) 0%,
        var(--sky-mid) 42%,
        var(--sky-bottom) 100%
    );
}

.sky::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(
        circle at 1px 1px,
        rgba(12, 72, 98, 0.58) 0.65px,
        transparent 1.1px
    );
    background-size: 5px 5px;
    mix-blend-mode: multiply;
}

/* Clouds: the source PNG has its sky/halftone background pre-stripped so the
   asset is a transparent overlay of just the white cloud silhouettes. That
   means we can stretch one copy across the whole sky with object-fit cover —
   no seams, no mirroring tricks, and clouds end up scattered through the
   entire sky area (top AND bottom) rather than living in a thin band. */

.clouds {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    backface-visibility: hidden;
}

/* Hills (back → front) — layered PNGs.
   Sizing is width-driven by default (so the hills track the scene like before)
   but height is capped at 150vh to stop them from towering up the screen on
   ultra-wide monitors. When the cap kicks in, each hill PNG uses object-fit
   cover with the bottom anchored, so only the (mostly-transparent) top of the
   art gets cropped — the silhouette itself stays put. */

.hills {
    position: absolute;
    left: 50%;
    bottom: clamp(calc(-520px * var(--upscale)), -21vw, -140px);
    width: 100%;
    height: min(80vw, 150vh);
    z-index: 3;
    pointer-events: none;
    isolation: isolate;
    transform: translateX(-50%);
}

.hill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.hill-back {
    z-index: 1;
    filter: brightness(1.04) saturate(1.03);
}

.hill-mid {
    z-index: 2;
    filter: brightness(1.02);
}

.hill-front {
    z-index: 3;
}

/* Foreground: full-bleed layer; inner column max --content-max-width */

.foreground {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: clamp(0.5rem, 2vh, calc(1.25rem * var(--upscale)))
        clamp(0.65rem, 3vw, calc(1.25rem * var(--upscale))) 0;
    pointer-events: none;
}

.foreground-inner {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.foreground-inner > .site-nav {
    pointer-events: auto;
}

/* Nav buttons — single centered column on the contact page */

.site-nav {
    width: 100%;
    max-width: clamp(320px, 50vw, calc(720px * var(--upscale)));
    margin: 0 auto;
    padding-inline: 0;
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 0.38rem + 1.4vw, calc(1.75rem * var(--upscale)));
    align-items: stretch;
    width: 100%;
}

.site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(
        4rem,
        2.65rem + 5vw + 0.95vh,
        calc(7.5rem * var(--upscale))
    );
    padding: clamp(0.65rem, 0.42rem + 1.1vw, calc(1.35rem * var(--upscale)))
        clamp(1rem, 0.55rem + 2.4vw, calc(2.75rem * var(--upscale)));
    text-decoration: none;
    color: var(--ink);
    font-size: clamp(
        1.28rem,
        0.88rem + 1.85vw + 0.65vh,
        calc(3.25rem * var(--upscale))
    );
    font-weight: 700;
    background-color: var(--yellow);
    background-image: var(--floral-tile);
    background-repeat: repeat;
    background-size: clamp(304px, 100vw, calc(1040px * var(--upscale))) auto;
    border: 2px solid #c17a2d;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.site-nav a:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.site-nav a:focus-visible {
    outline: 3px solid var(--sky-top);
    outline-offset: 2px;
}

/* ——— Narrow screens ——— */

@media (max-width: 520px) {
    .foreground-inner {
        max-width: none;
    }

    .site-nav {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav a {
        transition: none;
    }

    .site-nav a:hover {
        transform: none;
    }
}