@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650;9..144,750&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --site-paper: #f7f9fc;
    --site-ink: #182235;
    --site-muted: #52617a;
    --site-sage: #c5e5db;
    --site-blue: #74b1cf;
    --site-indigo: #5968a2;
    --site-red: #b45755;
    --site-yellow: #d0a445;
    --site-line: rgba(24, 34, 53, .16);
    --site-white: rgba(255, 255, 255, .78);
}

html {
    background: var(--site-paper);
}

body {
    background-color: var(--site-paper);
    background-image:
        radial-gradient(circle at 8% 18%, rgba(197, 229, 219, .62), transparent 25%),
        radial-gradient(circle at 92% 68%, rgba(116, 177, 207, .3), transparent 28%);
    background-attachment: fixed;
    color: var(--site-ink);
    font-family: "Manrope", Arial, sans-serif;
}

header {
    background: rgba(247, 249, 252, .9);
    border-bottom: 1px solid var(--site-line);
    box-shadow: 0 8px 28px rgba(24, 34, 53, .06);
}

.logo,
.logo a {
    color: var(--site-ink);
    font-family: "Fraunces", Georgia, serif;
    text-shadow: none;
}

.logo-punc {
    color: var(--site-red);
    text-shadow: none;
}

.tagline,
.tagline-sub,
.time-card span,
.time-card small {
    color: var(--site-muted);
}

.datetime {
    background: rgba(255, 255, 255, .74);
    border-color: var(--site-line);
}

.date-card span {
    background: var(--site-ink);
}

.time-card strong {
    color: var(--site-ink);
}

.site-nav {
    border-top-color: var(--site-line);
}

.site-nav a {
    color: var(--site-ink);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

.site-nav a.nav-start-here,
.site-nav a.nav-start-here:hover,
.site-nav a.nav-start-here:focus,
.site-nav a.nav-start-here.active,
.site-nav a.nav-start-here[aria-current="page"] {
    background-image: none;
    color: var(--site-indigo);
    -webkit-text-fill-color: initial;
    text-shadow: none;
}

.site-nav a:hover,
.site-nav a:focus {
    background: rgba(116, 177, 207, .18);
    border-color: rgba(89, 104, 162, .38);
    box-shadow: 0 6px 16px rgba(89, 104, 162, .12);
    color: var(--site-ink);
    text-shadow: none;
    transform: translateY(-2px);
}

.site-nav a.active,
.site-nav a[aria-current="page"] {
    background: var(--site-sage);
    border-color: var(--site-line);
    box-shadow: none;
    color: var(--site-ink);
    text-shadow: none;
}

.nav-star {
    color: var(--site-yellow);
}

.nav-submenu {
    border-color: var(--site-line);
    background: var(--site-paper);
    box-shadow: 0 12px 28px rgba(24, 34, 53, .12);
}

.hero {
    padding: 86px 40px 58px;
}

.hero h1,
.section h2,
.card h2,
.card h3 {
    color: var(--site-ink);
    font-family: "Fraunces", Georgia, serif;
}

.hero h1 {
    font-weight: 750;
    letter-spacing: 0;
}

.hero p,
.card p,
.intro {
    color: var(--site-muted);
}

.hero .subtitle {
    color: var(--site-indigo);
    font-family: "Fraunces", Georgia, serif;
}

.section {
    padding: 70px 40px;
}

.card {
    background: var(--site-white);
    border: 1px solid var(--site-line);
    border-radius: 18px;
    box-shadow: 12px 14px 0 rgba(197, 229, 219, .72);
}

.button {
    border: 1px solid var(--site-ink);
    border-radius: 4px;
    background: var(--site-ink);
    color: var(--site-paper);
}

.button:hover {
    box-shadow: 6px 6px 0 var(--site-yellow);
}

.button-large {
    background: var(--site-red);
    color: white;
    -webkit-text-fill-color: initial;
    text-shadow: none;
}

.button2 {
    background: var(--site-sage);
    border-color: var(--site-ink);
    color: var(--site-ink);
}

footer {
    color: var(--site-muted);
    border-top-color: var(--site-line);
}

.contact-form {
    border-color: var(--site-line);
    background: rgba(197, 229, 219, .28);
}

.contact-form h2 {
    color: var(--site-indigo);
}

.contact-form label {
    color: var(--site-ink);
}

.contact-form input,
.contact-form textarea {
    border-color: rgba(89, 104, 162, .42);
    background: rgba(255, 255, 255, .9);
    color: var(--site-ink);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline-color: var(--site-blue);
    border-color: var(--site-blue);
}

.contact-form button {
    border-color: var(--site-yellow);
    background: var(--site-yellow);
    color: var(--site-ink);
}

.contact-form button:hover,
.contact-form button:focus {
    background: #dfbf61;
}

.contact-links a,
.radio-highlights li,
.project-block,
.listen-popout,
.floating-video-frame {
    border-color: var(--site-line);
}

.contact-links a,
.radio-highlights li,
.project-block {
    background: rgba(255, 255, 255, .64);
    color: var(--site-ink);
}

.contact-links a {
    color: var(--site-indigo);
}

.contact-links a:hover,
.contact-links a:focus {
    background: rgba(197, 229, 219, .58);
    border-color: var(--site-blue);
}

.radio-link,
.project-link,
.card a {
    color: var(--site-indigo);
}

.radio-highlights strong,
.status,
.project-title {
    color: var(--site-red);
}

.status,
.status-completed {
    border-color: rgba(180, 87, 85, .42);
    background: rgba(180, 87, 85, .12);
}

@media (max-width: 700px) {
    .hero,
    .section {
        padding-right: 24px;
        padding-left: 24px;
    }

    .card {
        box-shadow: 8px 10px 0 rgba(197, 229, 219, .72);
    }
}