/* --------------------------------------------------
   BASIC
-------------------------------------------------- */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


/* Makes anchor links stop below the fixed header */

section[id] {
    scroll-margin-top: 90px;
}


body {
    margin: 0;
    padding: 0;

    background: #f7f7f5;
    color: #111;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    line-height: 1.4;
}



/* --------------------------------------------------
   LINKS
-------------------------------------------------- */

a {
    color: #111;

    text-decoration: none;
}


a:hover {
    text-decoration: underline;
}



/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 18px 22px;

    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    z-index: 100;

    background: rgba(247, 247, 245, 0.92);
}


.artist-name {
    font-size: 14px;

    font-weight: normal;
}


nav {
    display: flex;

    gap: 18px;
}


nav a {
    font-size: 13px;
}



/* --------------------------------------------------
   MAIN
-------------------------------------------------- */

main {
    padding: 90px 22px 80px;
}



/* --------------------------------------------------
   WORKS
-------------------------------------------------- */

.works {
    width: 100%;
}



/* --------------------------------------------------
   INTRO
-------------------------------------------------- */

.intro {
    width: 100%;

    margin: 0 0 45px 0;

    font-size: 13px;
}


.intro p {
    margin: 0;

    line-height: 1.3;
}



/* --------------------------------------------------
   WORK ROWS
-------------------------------------------------- */

.work-row {
    display: grid;

    width: 100%;

    gap: 18px;

    margin-bottom: 80px;
}


/* Three images */

.three-columns {
    grid-template-columns: repeat(3, 1fr);
}


/* Four images */

.four-columns {
    grid-template-columns: repeat(4, 1fr);
}



/* --------------------------------------------------
   INDIVIDUAL WORK
-------------------------------------------------- */

.work {
    min-width: 0;

    margin: 0;
}


.work img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


.work-info {
    margin-top: 8px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px 20px;

    font-size: 11px;
}



/* --------------------------------------------------
   TEXT SECTIONS
-------------------------------------------------- */

.text-section {
    max-width: 900px;

    margin-top: 200px;

    display: grid;

    grid-template-columns: 160px 1fr;

    column-gap: 40px;
}


.text-section h2 {
    margin: 0;

    font-size: 13px;

    font-weight: normal;
}


.text-content {
    max-width: 500px;
}


.text-content p {
    margin-top: 0;

    margin-bottom: 20px;
}



/* --------------------------------------------------
   CV
-------------------------------------------------- */

.cv-content {
    max-width: 650px;
}


/* Category headings */

.cv-category {
    margin-top: 45px;

    margin-bottom: 20px;

    font-size: 13px;
}


/* First category */

.cv-category:first-child {
    margin-top: 0;
}


/* CV lists */

.cv-list {
    display: grid;

    grid-template-columns: 80px 1fr;

    row-gap: 20px;
}


.cv-item {
    display: contents;
}