@font-face {
    font-family: "Lato";
    src: url("fonts/lato-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

/* Prod draws the heading in Lato Thin with a synthesized bold (font-weight 600
   on a single-weight face); the separate family keeps that rendering. */
@font-face {
    font-family: "Lato Thin";
    src: url("fonts/lato-thin.woff2") format("woff2");
    font-display: swap;
}

:root {
    --ink: #190c47;
    --navy: #1a0d47;
    --orange: #ff5200;
    --brand-gradient: linear-gradient(90deg, #ba28dd 0, #ff5300 100%);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font: 16px/1.42857 "Lato", sans-serif;
}

img { display: block; max-width: 100%; height: auto; }

.container {
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* Header */
.site-header { padding: 10px 0 18px; }
.site-header a { display: block; width: fit-content; }
.logo { width: 175px; }

@media (min-width: 768px) {
    .site-header { padding: 25px 0 18px; }
    .logo { width: 158px; }
}
@media (min-width: 992px) { .logo { width: 213px; } }
@media (min-width: 1200px) { .logo { width: 262px; } }

/* Banner */
.banner {
    position: relative;
    height: 50vh;
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 33%;
}

.banner::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: var(--brand-gradient);
}

/* Content */
.content { padding-top: 20px; padding-bottom: 65px; }

@media (min-width: 769px) {
    .content { padding-top: 45px; padding-bottom: 59px; }
}

h1 {
    position: relative;
    display: inline-block;
    margin: 0 0 43px;
    padding-bottom: 25px;
    font-family: "Lato Thin", "Lato", sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

h1::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--brand-gradient);
}

@media (min-width: 768px) {
    h1 { font-size: 40pt; line-height: 40pt; }
}

p { margin: 0 0 10px; }
.content p:last-child { margin-bottom: 0; }

a { color: var(--orange); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* Footer */
.site-footer {
    background: var(--navy);
    color: #fff;
    text-align: center;
}

.site-footer p { margin: 0; padding: 10px 0; }