:root{
    --bg: #F7F5F0;
    --surface: #FFFFFF;
    --text: #1A1A18;
    --muted: #6B6B67;
    --accent: #2A5C45;
    --accent-light: #E8F0EB;
    --border: #E0DDD6;
    --tag-bg: #ECEAE4;

    --padding-section-bottom: 1.5rem;

    --text-header-large: 2rem;
    --text-header-medium: 1.5rem;
    --text-header-small: 1rem;

    --text-body-large: 1.12rem;
    --text-body-medium: 1rem;
    --text-body-small: .82rem;

    --text-label-large: 1rem;
    --text-label-medium: .82rem;
    --text-label-small: .72rem;
}
body{
    background: var(--bg);
    color: var(--text);
    padding: 3rem 1.5rem;
    font-family: 'DM Sans', sans-serif;
}

.person{
    display: flex;
    align-items: center;
    margin-bottom: var(--padding-section-bottom);
}
.person-text{
    margin: 0;
}
.person-text h1{
    font-family: 'Playfair Display', serif;
    font-size: var(--text-header-large);
    line-height: 1.1;
    margin: 0;
    font-weight: 100;
}
.person-text p{
    color: var(--muted);
    font-size: var(--text-label-large);
    font-weight: 300;
    margin-top: 4px;
}
.section{
    margin-bottom: var(--padding-section-bottom);
}
.section-label{
    font-size: var(--text-header-small);
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.75rem;
    font-weight: 500;
}
#filter-bar{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    justify-content: flex-start;
}
.filter-btn{
    padding: 5px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--text-label-medium);
    color: var(--muted);
    background: var(--surface);
    cursor: pointer;
    font-family: inherit;
}
.filter-btn.active{
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.works{
    display: flex;
    flex-direction: column;
}
.works-item{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.5rem;
    flex-direction: column-reverse;
}
.works-item:hover{
    border-color: var(--accent);
}
.work-year{
    font-size: var(--text-body-large);
    color: var(--muted);
    min-width: 2rem;
    padding-top: 0.1rem;
}
.work-item-body-title{
    font-size: var(--text-body-large);
    font-weight: 500;
    margin: 0;
}
.work-item-body-desc{
    font-size: var(--text-body-small);
    color: var(--muted);
    font-weight: 300;
    margin-top: .5rem;
    margin-bottom: .5rem;
    text-align: justify;
}
.work-item-body-tags{
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.work-item-body-tag{
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: var(--text-label-small);
    text-align: center;
    min-height: 1.2rem;
    display: flex;
    align-items: center;
    margin: 0;
}
#no-results{
    display: none;
    font-size: var(--text-body-medium);
    color: var(--muted);
    font-weight: 300;
    padding: 1rem 0;
    margin: -1.2rem 0 0 0;
}

footer{
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: var(--text-label-medium);
    color: var(--muted);
    text-align: center;
    font-weight: 300;
}

/* Media-queries */
@media screen and (min-width: 319px){
    .page{
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}
@media screen and (min-width: 767px){
    .page{
        margin-left: 3rem;
        margin-right: 3rem;
    }
    .works-item{
        flex-direction: row;
    }
}
@media screen and (min-width: 1023px){
    .page{
        margin-left: 12rem;
        margin-right: 12rem;
    }
}