@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap');
:root {
    --red-lightest: #FDEEEE;
    --red-light: #F6BCB9;
    --red-pale: #ED7872;
    --red-pale-text: #CC918F;
    --red: #E52E3B;
    --red-dark: #A3313A;
    --blue-light: #AED3F2;
    --blue-pale: #66AFE2;
    --blue: #416EA3;
    --text: #303030;
    --carmine-pale: #FF9999;
    --carmine-light: #FF6666;
    --carmine: #E54545;
    --carmine-wet: #B23636;
    --carmine-dark: #802626;
    --carmine-text: #661F1F;
    --eggshell-light: #FCFBF7;
    --eggshell-light-muddy: #F1F0EB;
    --eggshell: #F2EEDA;
    --eggshell-muddy: #E5E4DF;
    --eggshell-wet: #E8DEB0;
    --eggshell-wet-muddy: #DBD9D1;
    --eggshell-dark: #CFC388;
    --eggshell-dark-muddy: #C6C3B6;
    --eggshell-text: #858171;
    --eggshell-shadow: #545245;
    --yellow: #ffb524;
    --blue: #2ec3e5;
    --purple: #AA60CC;
    --grape-light: #CEABD2;
    --grape: #A05AAD;
    --grape-wet: #8e5499;
    --grape-dusty: #7b4f84;
    --grape-dark: #604a66;
    --heather-light: #D0C0D2;
    --heather: #A484AC;
    --heather-dusty: #8b7194;
    --heather-dark: #5e5263;
    --heather-text: #5A1966;
}
* { 
    padding: 0; margin: 0;
    box-sizing: border-box;
}
body {
    min-width: 340px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans', sans-serif;
    color: var(--text);
    background-color: var(--eggshell-light);
}

h1, h2, h3, h4 { 
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: 10px;
}
h1 { 
    font-size: 42px;
}
h2 { 
    font-size: 36px;
}
h3 { font-size: 28px; }
h4 { font-size: 20px; }

p { 
    font-size: 18px; 
    line-height: 160%;
    margin: 0 0 16px; 
}
ul { margin: 0 0 16px; }
li {
    font-size: 18px; 
    line-height: 160%;
    margin: 0 0 16px 24px;
}
ul.compact, li.compact { margin-top: -8px; }
.compact li {
    margin-bottom: 8px;
}
.lead {
    font-family: 'Epilogue', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: 20px;
}
.text-large {
    font-size: 24px;
    line-height: 150%;
    margin-bottom: 16px;
}

a, a:visited {
    text-decoration: none;
    /* color: var(--eggshell-text); */
    color: var(--grape-dusty);
    border-bottom: 1px solid var(--grape);
}
a:hover { 
    color: var(--carmine);
    border-color: var(--carmine-light); 
}
a:active {
    color: var(--carmine-dark);
    border-color: var(--carmine-dark); 
}
sup { 
    vertical-align: top; 
    position: relative; 
    top: -0.5em; 
    font-size: 0.6em;
}

.width-full { margin-left: -25px; margin-right: -25px; }
.width-large { max-width: 1600px; }
.width-medium { max-width: 1000px; }
.width-small { max-width: 800px; }
.centered {
    margin-left: auto;
    margin-right: auto;
}
.hidden { display: none; }
.emphasized {
    display: inline-block;
    padding: 1px 3px 2px;
    /* color: var(--red-dark); */
    background-color: var(--eggshell); 
}
.note {
    font-size: 12px;
    font-style: italic;
    opacity: .8;
}
.flexbox { display: flex; }

.gridbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    grid-auto-rows: minmax(100px, auto);
}
@media (max-width: 760px) { .gridbox { gap: 10px; } }
@media (max-width: 460px) { .gridbox { gap: 5px; } }

section { 
    width: 100%;
    margin: 0;
    padding: 0 25px;
}
section.section-first { margin-top: 60px; }
section.section-last { margin-bottom: 60px; }
section.carmined {
    padding: 30px 25px 60px;
    background-color: var(--carmine);
    color: var(--carmine-text);
}
section.collection { margin-top: 30px; }
section.shadowed {
    padding: 60px 25px 70px;
    background-color: var(--eggshell-muddy);
    /* color: var(--carmine-text); */
}
section.middle { margin-bottom: 60px; }
section .width-full {
    margin-left: -25px;
    margin-right: -25px;
}
section img {
    width: 100%;
}
img.in-text { margin-bottom: 16px; }
img.rounded { border-radius: 100%; }
figure {
    margin: 30px 0 45px;
}
figcaption {
    margin-top: 8px;
    font-size: 14px;
    font-style: italic;
    color: var(--eggshell-text);
}

.shadow {
    box-shadow: 0 7px 10px -7px var(--eggshell-text),
                0 15px 35px -15px var(--eggshell-text);
}

.row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
.row.center-aligned {
    align-items: center;
}
.row.end-aligned {
    align-items: end;
}
.row .row-primary {
    width: 100%;
    max-width: 520px;
}
.row .row-secondary {
    width: 100%;
    max-width: 440px; 
}
.row figure { margin-top: 0; }

.btn {
    display: inline-block;
    padding: 8px 15px 10px;
    border-radius: 5px;
    transition: all .2s;
}
.btn-large {
    padding: 10px 25px 12px;
    font-size: 20px;
    margin-top: 10px;
}
.btn-filled, .btn-filled:visited { 
    background-color: var(--carmine);
    color: var(--eggshell-light);
    border-bottom: none;
}
.btn-filled:hover { 
    background-color: var(--carmine-wet); 
    color: var(--eggshell);
}
.btn-outlined, .btn-outlined:visited {
    color: var(--carmine-wet);
    border: 1px solid var(--carmine-wet);
}
.btn-outlined:hover {
    background-color: var(--carmine);
    color: var(--eggshell);
}
.btn-secondary, .btn-secondary:visited {
    color: var(--eggshell-text);
    border: none;
}
.btn-secondary:hover {
    color: var(--carmine-wet);
}

@media (max-width: 620px) {
    section { padding: 0 15px; }
    section.section-first { margin-top: 30px; }
    section.section-last { margin-bottom: 45px; }
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }
    p { 
        font-size: 16px; 
        line-height: 160%;
    }
    .lead {
        font-size: 28px;
        line-height: 130%;
    }
    .text-large {
        font-size: 20px;
        line-height: 140%;
    }
    figure {
        margin: 20px 0 25px;
    }
    .row {
        flex-direction: column;
        gap: 15px;
    }
    .row .row-secondary, .row .row-primary { max-width: unset; }
}

/* CARMINED THEME */
body.carmined { 
    background-color: var(--carmine);
    color: var(--carmine-text);
}
.carmined a, .carmined a:visited {
    text-decoration: none;
    color: var(--carmine-pale);
    border-bottom: 1px solid var(--carmine-pale);
}
.carmined a:hover { 
    color: var(--carmine-light);
    border-color: var(--carmine-light); 
}
.carmined a:active {
    color: var(--carmine-dark);
    border-color: var(--carmine-dark); 
}
.carmined .btn-outlined, .carmined .btn-outlined:visited {
    border-color: var(--carmine-text);
    color: var(--carmine-text);
}
.carmined .btn-outlined:hover {
    background-color: var(--carmine-text);
    color: var(--carmine);
}