:root {
    --background: #3d3935;
    --gold: #8f876f;
    --gold-light: #9a937d;
    --gold-dark: #736a59;
    --footer-link: #504d49;
    --white: #fff;
}

* { box-sizing: border-box; }

html {
    background: var(--background);
    line-height: 1.3;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--white);
    background: var(--background) url('../images/bg-pattern.png') repeat-y center 33vh;
    background-size: 50vw;
    font-family: canada-type-gibson, avenir-next, avenir, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; }
a:hover, a:focus { color: #d2cfc5; }

h1, h2 {
    margin: .5rem 0 1.5rem;
    color: inherit;
    font-family: gravesend-sans, sans-serif;
    font-weight: 300;
    line-height: 1.5;
    text-wrap: pretty;
}

h1 { font-size: 3.375rem; line-height: 1; }
h2 { font-size: 2rem; }
p { margin: 0 0 1rem; }

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    z-index: 20;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: .75rem 1rem;
    color: #333;
    background: #fff;
}

.site-header { padding: 3rem 0; text-align: center; }
.site-logo { display: inline-block; }
.site-logo img { width: 400px; height: 226px; }

.site-main { margin-top: 1.5rem; }
.intro { width: min(50vw, 570px); margin: 0 auto; text-align: center; }
.intro p { line-height: 1.3; }
.specs { font-family: gravesend-sans, sans-serif; }
.availability {
    color: var(--gold-light);
    font-family: gravesend-sans, sans-serif;
    font-size: 2.25rem;
}

.gallery {
    display: grid;
    width: min(1140px, calc(100% - 40px));
    margin: 2rem auto;
    gap: 2.5rem;
}
.gallery-home { grid-template-columns: repeat(3, 1fr); }
.gallery-retail { grid-template-columns: repeat(2, 1fr); }
.gallery img {
    width: 100%;
    box-shadow: 0 .375rem .375rem rgb(0 0 0 / 25%);
}
.gallery-home img { aspect-ratio: 1; object-fit: cover; }
.gallery-retail img { aspect-ratio: 5 / 3; object-fit: cover; }

.content-panel {
    width: min(600px, calc(100% - 40px));
    margin: 0 auto 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #504d49;
    text-align: center;
}
.button {
    display: inline-block;
    margin-top: .5rem;
    padding: 1.3rem 1.75rem;
    border-bottom: 3px solid var(--gold-dark);
    color: #fff;
    background: var(--gold);
    font-family: gravesend-sans, sans-serif;
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1;
    transition: background-color .25s ease;
}
.button::after { content: " \2192"; }
.button:hover, .button:focus { color: #fff; background: var(--gold-light); }

.retail-contact h2 { line-height: 1.3; }
.forge-logo { display: inline-block; margin: .5rem auto 1rem; }
.forge-logo img { width: 10rem; }
.contact-phone { font-family: gravesend-sans, sans-serif; font-size: 1.5rem; }

.site-footer {
    padding: 2rem 20px 1rem;
    background: var(--gold);
    box-shadow: 0 .375rem .375rem rgb(0 0 0 / 12.5%) inset;
    text-align: center;
}
.footer-logo { display: inline-block; }
.footer-logo img { height: 9rem; width: auto; }
.footer-phone { margin-bottom: 0; font-family: gravesend-sans, sans-serif; font-size: 2rem; }
.footer-address { font-family: gravesend-sans, sans-serif; }
.footer-links, .footer-legal { font-size: .875rem; }
.footer-links { margin-bottom: .5rem; }
.footer-links a { color: var(--footer-link); }
.footer-links span { padding: 0 .5rem; color: var(--gold-dark); }
.footer-legal p { margin: 0; color: rgb(255 255 255 / 50%); }

.error-page {
    /*width: min(1140px, calc(100% - 40px));*/
    width: min(50vw, 570px); 
    min-height: 20vh;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.error-page a { text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
    .intro > * { animation: slide-in .75s both; }
    .intro > :nth-child(2) { animation-delay: .15s; }
    .intro > :nth-child(3) { animation-delay: .35s; }
    .gallery img { animation: fade-in 1s both; }
    .gallery img:nth-child(2) { animation-delay: .2s; }
    .gallery img:nth-child(3) { animation-delay: .4s; }
    @keyframes slide-in { from { opacity: 0; transform: translateY(-16px); } }
    @keyframes fade-in { from { opacity: 0; } }
}

@media (max-width: 767px) {
    .intro { width: min(85vw, 570px); }
    .gallery { gap: .25rem; }
}

@media (max-width: 575px) {
    body { background-size: cover; }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    .site-header { padding: 2rem 0 0; }
    .site-logo { width: 70%; }
    .site-logo img { width: 100%; height: auto; }
    .site-main { margin-top: .5rem; }
    .availability { font-size: 1.75rem; }
    .gallery { width: calc(100% - 20px); }
    .content-panel { width: calc(100% - 20px); }
    .footer-logo img { height: 6rem; }
    .footer-links, .footer-legal { font-size: 1rem; }
}