.hero {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:72px;
    padding-top:68px;
    padding-bottom:55px;
    align-items:center
}
.intro {
    max-width:615px;
    color:var(--muted);
    font-size:16px;
    line-height:1.85
}
.hero figure {
    margin:0;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.portrait {
    width:100%;
    height:390px;
    object-fit:cover;
    object-position:50% 22%;
    mix-blend-mode:multiply
}
.caption {
    border-top:1px solid var(--line);
    margin-top:15px;
    padding-top:15px;
    font-size:11px;
    line-height:1.7;
    color:var(--muted)
}
.caption strong {
    color:var(--ink);
    font-weight:600
}
.actions {
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:30px;
    font-size:12px;
    font-weight:600
}
.button {
    display:inline-block;
    background:var(--ink);
    padding:13px 20px;
    color:white
}
.meta {
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    padding-top:20px;
    padding-bottom:20px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    font-size:11px;
    color:var(--muted)
}
.meta a {
    color:var(--accent)
}
section.block {
    padding-top:64px;
    padding-bottom:64px
}
.heading {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px;
    margin-bottom:30px
}
.heading h2 {
    margin:0
}
.more {
    font-size:12px;
    color:var(--accent)
}
.lines {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:38px
}
.line {
    border-top:1px solid var(--line);
    padding-top:20px
}
.number {
    font-size:11px;
    color:var(--accent);
    margin-bottom:24px
}
.line p {
    font-size:14px;
    color:var(--muted);
    margin-bottom:0
}
.project {
    background:#eaf0eb;
    padding:40px;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:65px
}
.project h2 {
    font-size:31px
}
.project p {
    font-size:14px;
    color:var(--muted)
}
.project aside {
    border-left:1px solid #c5d3c9;
    padding-left:32px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.project aside strong {
    font:24px Georgia,serif;
    margin-bottom:14px
}
.tags {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:22px 0
}
.tags span {
    font-size:10px;
    border:1px solid #c5d3c9;
    padding:4px 8px
}
.paper {
    display:grid;
    grid-template-columns:90px 1fr 85px;
    gap:25px;
    padding:28px 0;
    border-top:1px solid var(--line)
}
.paper h3 {
    font-size:23px;
    margin-bottom:10px
}
.paper p {
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px
}
.year {
    font:24px Georgia,serif
}
.type {
    font-size:10px;
    color:var(--muted);
    display:block;
    margin-top:4px
}
.paper .more {
    align-self:center
}
.contact {
    border-top:1px solid var(--line);
    padding:48px 0 60px;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:60px
}
.contact h2 {
    font-size:30px
}
.contact p {
    font-size:14px;
    color:var(--muted)
}
footer {
    background:var(--ink);
    color:#e8efec;
    padding:23px 0;
    font-size:11px
}
footer .wrap {
    display:flex;
    justify-content:space-between;
    gap:20px
}
@media(max-width:850px) {
    .nav {
        padding-top:20px;
        padding-bottom:20px;
        flex-wrap:wrap
    }
    nav {
        flex-wrap:wrap;
        gap:16px
    }
    .hero {
        gap:30px;
        grid-template-columns:1.5fr 1fr
    }
    .portrait {
        height:330px
    }
    .lines {
        gap:24px
    }
    .project {
        gap:30px;
        padding:28px
    }
}
@media(max-width:600px) {
    h1 {
        font-size:34px;
        line-height:1.15
    }
    h1 br {
        display:none
    }
    h1 br::after {
        content:" "
    }
    .wrap {
        padding-left:23px;
        padding-right:23px
    }
    .hero {
        grid-template-columns:1fr;
        padding-top:40px;
        gap:30px
    }
    .hero figure {
        max-width:330px
    }
    .portrait {
        height:300px
    }
    .lines,.project,.contact {
        grid-template-columns:1fr
    }
    .project aside {
        border-left:0;
        border-top:1px solid #c5d3c9;
        padding:22px 0 0
    }
    .heading {
        align-items:start;
        flex-direction:column;
        gap:12px
    }
    .paper {
        grid-template-columns:50px 1fr;
        gap:16px
    }
    .paper .more {
        grid-column:2
    }
    .actions {
        gap:18px;
        flex-wrap:wrap
    }
    h2 {
        font-size:30px
    }
    section.block {
        padding-top:45px;
        padding-bottom:45px
    }
    .contact {
        gap:10px
    }
    footer .wrap {
        flex-direction:column;
        gap:6px
    }
}