/* Ranch-site header. Loaded only by the ranch pages. */

.site-header .wordmark {
    font-size: clamp(1.45rem, 2.6vw, 2.05rem);
}

#the-ranch,
#photos,
#getting-here,
#good-to-know,
#hosts {
    scroll-margin-top: 88px;
}

.site-header nav a.btn {
    display: inline-block;
    background: var(--dark);
    color: #fff;
    border: 1px solid var(--dark);
    border-bottom-color: var(--dark);
    padding: 8px 14px;
    margin: 2px 0 2px 6px;
    letter-spacing: 0.12em;
}

.site-header nav a.btn:hover {
    background: #fff;
    color: var(--dark);
}

@media (max-width: 860px) {
    .site-header nav a.btn {
        display: block;
        margin: 10px 0 4px;
        text-align: center;
    }
}