:root {
    --green: #006341;
    --gold: #7D5E34;
    --white: #fff;
    --alt: #efefec;
    --sift: #f7f7f6;

    --serif: eb-garamond;
    --sans: proxima-nova;

    /* horizontal spacing from the window edge; shrinks on smaller screens */
    --edge: 8rem;
}

/* ---------- Base ---------- */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

p,
li {
    font-family: var(--sans);
    font-size: 1rem;
}

ul li {
    list-style: none;
    position: relative;
    line-height: 1.5;
}

/* custom bullet, centered on the first line of the item */
ul li::before {
    content: "";
    position: absolute;
    left: -30px;
    top: calc(0.75em - 10px);
    width: 20px;
    height: 20px;
    background: url(https://touchmark.com/wp-content/uploads/Bullet.svg) no-repeat center / contain;
}

h1 {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
}

h2,
h3 {
    font-family: var(--serif);
    font-weight: 500;
}

h2 {
    font-size: 2.5rem;
}

a {
    font-family: var(--sans);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
}

button {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    background-color: var(--green);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

/* ---------- Utilities ---------- */

.logo {
    width: 200px;
}

.alt {
    background-color: var(--alt);
}

.sift {
    background-color: var(--sift);
}

.emphasize {
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 2rem;
}

.sub {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 500;
    font-style: italic;
    color: var(--gold);
}

/* ---------- Layout ---------- */

.twoCol {
    display: flex;
}

.oneCol {
    padding: 2.5rem var(--edge);
}

.colOne,
.colTwo {
    padding: var(--edge);
    flex: 0 0 50%;
    box-sizing: border-box;
}

.imgCol {
    flex: 0 0 50%;
}

.imgCol img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Hero ---------- */

#hero {
    height: 100vh;
    /* black overlay: 60% at the bottom, fading out halfway up */
    background-image:
        linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%),
        url(../images/Touchmark\ Anchorage\ rendering\ 3\ rev2\ Topaz\ Gigapixel\ 2x\ scale.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#nav {
    padding: 2.5rem var(--edge);
    display: flex;
    justify-content: space-between;
}

/* shrink-wrap the link to its button instead of stretching to the logo's height */
#nav > a {
    display: flex;
    align-self: center;
}

#hero-text {
    margin: 2.5rem var(--edge);
}

#hero-text p {
    font-family: var(--serif);
    font-size: 4rem;
    font-weight: 500;
    color: var(--white);
    margin: 0;
}

/* ---------- Introduction ---------- */

#introduction {
    background-image: url(https://touchmark.com/wp-content/uploads/TM-Flower-Accent-Gold-5per.svg);
    background-repeat: no-repeat;
    background-position: top 40px right 40px;
}

/* ---------- Image background section ---------- */

.imgBackground {
    background-image: url(../images/TM-Lifestyle-1-580-web.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    height: 100vh;
    padding: 0 0 4rem var(--edge);
    position: relative;
    z-index: 0;
    overflow: clip;
}

.overlayCol {
    background-color: var(--white);
    padding: 19px;
}

.overlayColContent {
    padding: 20px;
    border: var(--gold) solid 2px;
}

.imgBackground .colTwo {
    padding-top: 0;
    padding-bottom: 0;
}

.imgBackground .overlayCol,
.imgBackground .colTwo {
    position: relative;
}

/* two full-width bands running to the bottom of .imgBackground: one from
   halfway up .overlayCol, one from 2.5rem above .colTwo. Together they
   show whichever reaches higher. */
.imgBackground .overlayCol::before,
.imgBackground .colTwo::before {
    content: "";
    position: absolute;
    bottom: -100vh;
    left: -100vw;
    right: -100vw;
    background-color: var(--sift);
    z-index: -1;
}

.imgBackground .overlayCol::before {
    top: 50%;
}

.imgBackground .colTwo::before {
    top: -2.5rem;
}

/* ---------- Site map ---------- */

#map {
    background-image: url(../images/Touchmark\ Anchorage\ rendered\ site\ plan\ rev1\ Topaz\ Gigapixel\ 2x\ scale.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* scale with screen width, keeping the site plan's aspect ratio (3508 x 1792) */
    aspect-ratio: 3508 / 1792;
    display: flex;
    align-items: flex-end;
    padding: 2.5rem var(--edge);
}

#siteKey {
    padding: 1rem;
    background-color: var(--sift);
    border: #006341 solid 1px;
}

#map ol {
    padding-left: 20px;
}

/* ---------- Stay updated / form ---------- */

#stayUpdated {
    text-align: center;
    padding: 2.5rem;
}

/* contain the injected form's floated fields */
.activedemand-replace {
    display: flow-root;
}

/* always start below the form */
#moreInfo {
    clear: both;
}

#moreInfo .colOne {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------- Footer ---------- */

footer {
    background-color: var(--green);
    padding: 2.5rem var(--edge);
}

footer .logo {
    padding-right: 2.5rem;
}

footer p {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--white);
}

.footerLogo {
    display: flex;
}

/* ---------- Medium screens and below ---------- */

@media (max-width: 1024px) {
    :root {
        --edge: 2.5rem;
    }

    /* show the whole site plan at full width, with the key below it */
    #map {
        display: block;
        aspect-ratio: auto;
        padding: 0;
        background-size: 100% auto;
        background-position: top;
    }

    /* spacer with the site plan's aspect ratio (3508 x 1792) */
    #map::before {
        content: "";
        display: block;
        aspect-ratio: 3508 / 1792;
    }

    #siteKey {
        margin: 2.5rem;
    }
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
    .twoCol {
        display: block;
    }

    .imgBackground {
        display: block;
        height: auto;
        background: var(--white);
        padding: 2.5rem 2.5rem 0;
    }

    /* .imgBackground already supplies the edge spacing */
    .imgBackground .colTwo {
        padding-left: 0;
        padding-right: 0;
    }

    .imgBackground .overlayCol::before,
    .imgBackground .colTwo::before {
        display: none;
    }
}