:root {
    --background: #EEEAD6;
    --primary: #31572E;
    --secondary: #664821;
    --accent: #1A347F;
    --text: #000000;
}

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

html {
    background-color: var(--background);
    color: var(--text);
    padding: 0px;
    margin: 0px;
    font-family: "Crimson Text", serif;
}

html::before {
    content: '';
    position: fixed;
    inset: 0px;
    z-index: -10;
    background-color: var(--background);
    transition: filter 0.6s ease;
}

html.menu-open::before {
    filter: blur(5px) brightness(55%);
}

html::-webkit-scrollbar {
    display: none;
}

body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100dvh;
}

h1 {
    font-size: clamp(1rem, 10dvw, 8rem);
    margin: 0px;
    padding: 0px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

menu {
    position: fixed;
    z-index: 10;
    top: 0px;
    right: 0px;
    margin: 0px;
    padding: 0px;
}

menu > img {
    box-sizing: content-box;
    width: 28px;
    height: 28px;
    padding: 20px;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;

    /* Artwork is white; pages sit on cream, so invert by default. */
    filter: invert(1);
}

p {
    padding: 0% 10dvw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text);
    text-align: center;
}

blurb {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    height: var(--vh, 100dvh);
    justify-content: center;
    align-items: center;
}

a {
    color: var(--background);
    font-size: clamp(1rem, 10dvw, 5rem);
}

/* Menu overlay - shared by prints, gallery and the legal pages. index.html has
   no menupanel (its menu scrolls to a section), so those rules are inert there;
   it opts out of the icon colour switch in home.css. */
html.menu-open menu > img {
    filter: none;
}

#close-img {
    position: absolute;
    top: 0px;
    right: 0px;
    opacity: 0;
    transform: rotate(-180deg);
}

html.menu-open #menu-img {
    opacity: 0;
    transform: rotate(180deg);
}

html.menu-open #close-img {
    opacity: 1;
    transform: rotate(0deg);
}

menupanel {
    position: fixed;
    inset: 0px;
    height: 100dvh;
    overflow: hidden;
    z-index: 9;
    pointer-events: none;
}

menupanel > blurb {
    position: absolute;
    inset: 0px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    gap: clamp(8px, 3dvh, 24px);
}

html.menu-open menupanel > blurb {
    transform: translateY(0%);
    pointer-events: auto;
}

/* The global `a` size is 10dvw, which ignores height entirely - so a short
   landscape window still gets huge text and the legal pages' four links
   overflow the centred column and get clipped by menupanel's overflow.
   Taking the smaller of the two lets height govern when height is what's
   scarce, and leaves the tall-screen appearance untouched. */
menupanel > blurb > a {
    font-size: clamp(1rem, min(10dvw, 11dvh), 5rem);
    opacity: 0;
    transform: translateY(16px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

html.menu-open menupanel > blurb > a {
    opacity: 1;
    transform: translateY(0px);
}

/* More delays than any page currently has links; extras are simply unused. */
menupanel > blurb > a:nth-child(1) { transition-delay: 0s; }
menupanel > blurb > a:nth-child(2) { transition-delay: 0.2s; }
menupanel > blurb > a:nth-child(3) { transition-delay: 0.4s; }
menupanel > blurb > a:nth-child(4) { transition-delay: 0.6s; }