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

html, body {
    width: 100%;
    background: #cdfcec;
    background-image: url(../images/bg-desktop-end.png?v=6) !important;
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: top left;
}

.container {
    display: block;
    width: 100%;
}

.picture-wrapper {
    position: relative;
    line-height: 0;
}

.bg-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Email Link */
.email-link {
    position: absolute;
    display: block;
    left: 20%;
    top: 70.5%;
    width: 13%;
    height: 7%;
}

.email-link:hover,
.email-link:focus,
.email-link:active {
    outline: none;
    text-decoration: none;
}

/* SOIL exhibition links */
.soil-link {
    position: absolute;
    display: block;
}

.soil-link:hover,
.soil-link:focus,
.soil-link:active {
    outline: none;
    text-decoration: none;
}

/* The anchors are empty, so the underline can't be text-decoration: it is a
   pseudo-element anchored to the bottom of the box. On mobile the box is
   taller than the text (tap target), so the breakpoint lifts the line back up
   under the glyphs. Colour sampled from the text baked into the artwork. */
.soil-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid rgba(68, 138, 122, 0.45);
    transition: border-color 0.15s ease;
}

.soil-link:hover::after,
.soil-link:focus-visible::after {
    border-bottom-width: 2px;
    border-bottom-color: #448a7a;
}

/* "SOIL: The World at Our Feet" - single line on desktop */
.soil-title-a {
    left: 22.34%;
    top: 35.66%;
    width: 14.45%;
    height: 1.46%;
}

/* second line of the phrase, only needed where the text wraps */
.soil-title-b {
    display: none;
}

/* standalone "SOIL" further down */
.soil-word {
    left: 25.90%;
    top: 48.93%;
    width: 2.50%;
    height: 1.46%;
}

@media (min-width: 768px) and (max-height: 1279px) {
    html, body {
        height: 100%;
    }
    .container {
        display: flex;
        align-items: center;
        height: 100vh;
        min-height: 600px;
    }
}

@media (max-width: 767px) {
    
    html, body {
        background-image: url(../images/bg-mobile-end.png?v=6) !important;
    }
    .email-link {
        right: 0;
        top: 4%;
        width: 38%;
        height: 6%;
        left: initial;
    }

    /* the boxes fill the whole line slot, so lift the underline off the
       bottom edge and back under the glyphs (12.5% of 56px = 7px) */
    .soil-link::after {
        bottom: 12.5%;
    }

    /* the phrase wraps onto two lines: "SOIL: The World at Our" / "Feet".
       heights fill the whole line slot (2.92% = the 56px line pitch of the
       mobile artwork) to keep the tap targets as large as the layout allows */
    .soil-title-a {
        left: 44.07%;
        top: 42.03%;
        width: 37.78%;
        height: 2.92%;
    }

    .soil-title-b {
        display: block;
        left: 40.09%;
        top: 44.95%;
        width: 7.41%;
        height: 2.92%;
    }

    .soil-word {
        left: 57.41%;
        top: 62.50%;
        width: 8.70%;
        height: 2.92%;
    }

    /* this box is widened past the word for the tap target, so pull the
       underline back in to the glyphs (6px either side of 94px) */
    .soil-word::after {
        left: 6.4%;
        right: 6.4%;
    }
}