:root {
    --gutter-x: 2em;
    --gutter-y: 0.75em;
    --color-1: #fffffe;
    --color-2: #2c1300;
    --color-3: #B44002;
}
html { scroll-behavior: smooth; }
body {
    margin:0;
    padding:0;
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    background-color: var( --color-1 );
    color: var( --color-2 );
    box-sizing: border-box;
    overflow-anchor: none;
}
body *,
body *:after,
body *:before { box-sizing: inherit; }
h1, h2 {
    font-family: "Source Serif 4", serif;
    font-optical-sizing: none;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-feature-settings: "ss01" off;
}
h1 { 
    font-size:clamp( 3em, 2.5vw, 3.5em );
    line-height:1.2;
    font-weight: 450;
}
h2 { 
    font-size:clamp( 2em, 2.5vw, 2.5em );
    line-height:1.2;
    font-weight: 450;
}
header { padding:var( --gutter-x ); }
header > img {
    margin:0;
    padding:0;
    border:0;
    display:block;
    width:100%;
    max-width:200px;
}
main {
    color:var( --color-1 );
    background-color:var( --color-2 );
    background-image:url( 'crescero-home-hero.jpg' );
    background-repeat:no-repeat;
    background-size:cover;
    background-position:50% 100%;
}
main a,
main a:visited {
    color:var( --color-3 );
    display: inline-block;
    align-items: center;
    font-weight: 400;
    font-size:1em;
    padding:18px 36px 16px 36px;
    border: 1px solid var( --color-3 );
    border-radius: 36px;
    background-color: var( --color-1 );
    transition: all .5s ease;
    text-decoration:none;
    margin:1.5em 0 1em 0;
    font-weight:500;
}
main a:hover,
main a:focus,
main a:active {
    color:var( --color-1 );
    background-color: var( --color-3 );
}
main .content {
    padding:0;
}
main .content > .outer {
    padding:15em 0 0 0;
    background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, var( --color-2 ) 60% );
}
@media screen and ( min-width: 768px ) {
    main .content > .outer { padding:25em 0 0 0; }
}
main .content > .outer > .inner {
    margin: 0 auto;
    max-width:1320px;
    padding:0 var( --gutter-x ) 4em var( --gutter-x );
}
main .content p { font-size:1.5em; }
main .content hr {
    margin:3em 0;
    border:0;
    border-top:1px solid var( --color-1 );
}
footer {
    padding:6em var( --gutter-x ) var( --gutter-x ) var( --gutter-x );
    margin: 0 auto;
    max-width:1320px;
}
footer > img {
    margin:0;
    padding:0;
    border:0;
    display:block;
    width:100%;
    max-width:150px;
}
footer > .content { padding:var( --gutter-x ) 0; }
footer > .content p { font-size:1.5em; }
footer > .content a,
footer > .content a:visited {
    color:var( --color-2 );
    text-decoration:underline;
}
footer > .content a:hover,
footer > .content a:focus,
footer > .content a:active {
    text-decoration:none;
    color:var( --color-3 );
}