/* 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.webp");
    --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 row (mascot + nav); backgrounds stay full-bleed */
    --content-max-width: calc(1440px * var(--upscale));
    /* Not 50/50: ~41% mascot / ~59% nav */
    --col-mascot-pct: 55;
    /* Nav uses full width of its grid column (no artificial narrow cap) */
    --mascot-width-pct: 119%;
}

*,
*::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;
    }
}

/* ——— Header ——— */

.site-header {
    flex-shrink: 0;
    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.65rem, 2.5vw, calc(1rem * var(--upscale)))
        clamp(0.75rem, 4vw, calc(1.5rem * var(--upscale)));
}

.site-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);
}

/* ——— 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: grid;
    grid-template-columns: calc(var(--col-mascot-pct) * 1%) minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: stretch;
    column-gap: clamp(0.35rem, 1.5vw, calc(1.25rem * var(--upscale)));
    pointer-events: none;
}

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

.mascot-wrap {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-inline: clamp(
        0.35rem,
        0.25rem + 0.8vw,
        calc(1.5rem * var(--upscale))
    );
    padding-bottom: 0;
    overflow: visible;
}

/*
 * Wider than column, centered with negative margin so the PNG’s bottom edge
 * stays on the flex baseline (no “floating”), and the art reads larger.
 */
.mascot {
    display: block;
    width: var(--mascot-width-pct);
    max-width: none;
    height: auto;
    flex-shrink: 0;
    margin-left: calc((100% - var(--mascot-width-pct)) / 2);
    margin-right: 0;
    margin-bottom: 0;
}

/* Speech bubble */

.speech-bubble {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    width: fit-content;
    max-width: min(100%, 12.75em);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(0.35rem, 0.22rem + 1vmin, calc(1.1rem * var(--upscale)));
    padding: 0.62em 0.92em 0.7em;
    background: #fff;
    border: clamp(2px, 0.11em, calc(4px * var(--upscale))) solid var(--ink);
    /* Slightly irregular comic oval (not a perfect ellipse) */
    border-radius: 52% 48% 50% 50% / 58% 58% 42% 42%;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.85),
        inset 0 -0.18em 0.55em rgba(0, 0, 0, 0.07),
        0 0.12em 0.55em rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.12;
    font-family: var(--font-display);
    font-size: clamp(
        1.2rem,
        0.78rem + 2.05vw + 0.75vh,
        calc(3.65rem * var(--upscale))
    );
    font-weight: 700;
    color: var(--ink);
}

.speech-bubble::after {
    content: "";
    position: absolute;
    left: 44%;
    bottom: -0.78em;
    transform: translateX(-50%) rotate(-4deg);
    width: 0;
    height: 0;
    border-left: 0.62em solid transparent;
    border-right: 0.72em solid transparent;
    border-top: 0.92em solid #fff;
    filter: drop-shadow(0 0.1em 0 var(--ink-soft));
}

.speech-line {
    display: block;
}

.speech-open {
    font-weight: 700;
    font-size: 1.05em;
    letter-spacing: 0.04em;
}

/* Nav buttons */

.site-nav {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-bottom: 0;
    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;
}

/* ——— Phones only — single-column layout; tablets/desktop unchanged ——— */

@media (max-width: 480px) {
    .site-header {
        padding: 0.5rem 0.75rem;
    }

    .site-title {
        font-size: clamp(1.45rem, 6.5vw, 1.85rem);
    }

    .hills {
        bottom: clamp(-90px, -14vw, -40px);
        height: min(62vw, 38vh);
    }

    .foreground {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 1rem calc(1.65rem + 0.75rem);
    }

    .foreground-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: min(100%, 22rem);
        max-width: none;
        height: auto;
        min-height: 0;
        flex: 0 1 auto;
        gap: clamp(0.55rem, 2.8vw, 0.85rem);
        margin-inline: auto;
        padding: 0;
    }

    .mascot-wrap {
        grid-column: unset;
        grid-row: unset;
        position: relative;
        flex: 0 0 auto;
        align-self: center;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-inline: 0;
        overflow: visible;
    }

    .speech-bubble {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        flex-shrink: 0;
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        margin: 0 auto -0.15rem;
        font-size: clamp(0.9rem, 3.8vw, 1.12rem);
        padding: 0.48em 0.72em;
        z-index: 2;
    }

    .speech-bubble::after {
        bottom: -0.72em;
    }

    .mascot {
        display: block;
        width: auto;
        max-width: min(82vw, 18rem);
        height: auto;
        max-height: clamp(7.5rem, 26vh, 11rem);
        margin-left: auto;
        margin-right: auto;
        object-fit: contain;
        object-position: bottom center;
        flex-shrink: 0;
    }

    .site-nav {
        grid-column: unset;
        grid-row: unset;
        flex: 0 0 auto;
        align-self: center;
        width: 100%;
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
    }

    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(0.45rem, 2vw, 0.65rem);
    }

    .site-nav li {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .site-nav a {
        min-height: clamp(3.25rem, 13vw, 3.85rem);
        font-size: clamp(1.2rem, 4.8vw, 1.45rem);
        padding: 0.65rem 1rem;
    }
}

/* Extra-compact for shorter phones */
@media (max-width: 480px) and (max-height: 740px) {
    .mascot {
        max-height: clamp(6.5rem, 22vh, 8.5rem);
        max-width: min(76vw, 16rem);
    }

    .speech-bubble {
        font-size: clamp(0.82rem, 3.4vw, 0.98rem);
        padding: 0.4em 0.6em;
        margin-bottom: -0.1rem;
    }

    .site-nav a {
        min-height: clamp(2.85rem, 11.5vw, 3.25rem);
        font-size: clamp(1.08rem, 4.3vw, 1.25rem);
        padding: 0.5rem 0.85rem;
    }

    .foreground-inner {
        gap: 0.4rem;
    }

    .hills {
        height: min(55vw, 32vh);
    }
}

/* Landscape phones — same single-column idea, just tighter */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 932px) {
    .site-header {
        padding: 0.35rem 0.75rem;
    }

    .site-title {
        font-size: clamp(1.2rem, 4.5vw, 1.5rem);
    }

    .hills {
        bottom: clamp(-70px, -12vw, -30px);
        height: min(50vw, 34vh);
    }

    .foreground {
        padding-bottom: calc(1.65rem + 0.25rem);
        justify-content: center;
    }

    .foreground-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        width: min(100%, 16rem);
        margin-inline: auto;
        padding-inline: 0;
    }

    .mascot-wrap {
        align-self: center;
        max-width: none;
    }

    .mascot {
        width: auto;
        max-width: min(40vw, 12rem);
        margin-left: auto;
        margin-right: auto;
    }

    .speech-bubble {
        margin-bottom: 0.2rem;
        font-size: clamp(0.75rem, 2.8vw, 0.9rem);
        padding: 0.35em 0.55em;
    }

    .site-nav {
        align-self: center;
        max-width: none;
        width: 100%;
        margin-inline: auto;
    }

    .site-nav ul {
        gap: 0.35rem;
    }

    .site-nav a {
        min-height: clamp(2.5rem, 13vh, 2.9rem);
        font-size: clamp(1rem, 3.5vw, 1.15rem);
        padding: 0.45rem 0.75rem;
    }
}

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

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