:root {
    --julius-black: #111111;
    --julius-dark: #181818;
    --julius-grey: #777777;
    --julius-light: #f4f4f1;
    --julius-border: #d8d8d3;
}


/* ============================================================
   HERO
   ============================================================ */

.juliusHero {
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0 55px 0;
}

.heroNumber {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--julius-grey);
    margin-bottom: 20px;
}

.heroTitle {
    margin: 0;
    font-size: clamp(4rem, 11vw, 9rem);
    line-height: 0.85;
    font-weight: 700;
    letter-spacing: -0.06em;
    color: var(--julius-black);
}

.heroBottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid var(--julius-border);
}

.heroStatement {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.heroIntro {
    max-width: 520px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #555555;
}


/* ============================================================
   PROFILE SECTIONS
   ============================================================ */

.profileSection {
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
}

.profileDetails {
    border-top: 1px solid var(--julius-border);
}

.profileSection:last-of-type .profileDetails {
    border-bottom: 1px solid var(--julius-border);
}


/* ============================================================
   CLICKABLE SECTION HEADER
   ============================================================ */

.profileSummary {
    display: grid;
    grid-template-columns: 75px 1fr 50px;
    align-items: center;

    min-height: 100px;

    cursor: pointer;
    list-style: none;

    transition:
        padding 0.25s ease,
        background-color 0.25s ease;
}

.profileSummary::-webkit-details-marker {
    display: none;
}

.profileSummary::marker {
    display: none;
}

.profileSummary:hover {
    padding-left: 12px;
    padding-right: 12px;
    background-color: #f7f7f5;
}


.summaryNumber {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--julius-grey);
}


.summaryTitle {
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--julius-black);
}


.summaryArrow {
    justify-self: end;

    width: 36px;
    height: 36px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid #bbbbbb;
    border-radius: 50%;

    font-size: 1.25rem;
    font-weight: 300;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}


/* ============================================================
   OPEN STATE
   ============================================================ */

.profileDetails[open] .profileSummary {
    padding-bottom: 20px;
}

.profileDetails[open] .summaryArrow {
    transform: rotate(45deg);
    background-color: var(--julius-black);
    color: white;
    border-color: var(--julius-black);
}


/* ============================================================
   EXPANDED CONTENT
   ============================================================ */

.detailsContent {
    padding:
        15px
        45px
        65px
        75px;

    animation: detailsOpen 0.35s ease;
}

@keyframes detailsOpen {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   EXPERIENCE / EDUCATION ITEMS
   ============================================================ */

.experienceItem {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 45px;

    padding: 28px 0;

    border-top: 1px solid #e4e4df;
}

.experienceItem:first-child {
    border-top: none;
}

.experienceMeta {
    padding-top: 4px;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--julius-grey);
}

.experienceMain {
    max-width: 680px;
}

.experienceMain h3 {
    margin: 0 0 6px 0;

    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 600;

    color: var(--julius-black);
}

.experienceMain p {
    margin: 10px 0;

    font-size: 0.92rem;
    line-height: 1.65;
    color: #555555;
}

.experienceMain .role {
    margin-top: 0;

    font-size: 0.82rem;
    font-weight: 600;

    color: var(--julius-black);
}


/* ============================================================
   TAGS
   ============================================================ */

.tagList {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 20px;
}

.tagList span {
    padding: 6px 10px;

    border: 1px solid #ccccca;
    border-radius: 100px;

    font-size: 0.7rem;
    line-height: 1;

    color: #444444;
}


/* ============================================================
   SKILLS
   ============================================================ */

.skillsContent {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.skillGroup {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 40px;

    padding: 28px 0;

    border-top: 1px solid #e4e4df;
}

.skillGroup:first-child {
    border-top: none;
}

.skillGroup h3 {
    margin: 0;

    font-size: 1.1rem;
    font-weight: 600;

    color: var(--julius-black);
}

.skillGroup p {
    grid-column: 2;

    max-width: 650px;

    margin: -10px 0 0 0;

    font-size: 0.92rem;
    line-height: 1.65;
    color: #555555;
}

.largeTags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.largeTags span {
    padding: 8px 12px;

    border: 1px solid #cfcfca;
    border-radius: 100px;

    font-size: 0.72rem;

    color: #333333;
}


/* ============================================================
   THESIS
   ============================================================ */

.thesisContent {
    max-width: 850px;
}

.thesisLabel {
    margin-bottom: 18px;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: var(--julius-grey);
}

.thesisContent h2 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(2rem, 4.5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 600;

    color: var(--julius-black);
}

.thesisSubtitle {
    margin: 18px 0 35px 0;

    font-size: 0.95rem;
    font-style: italic;

    color: var(--julius-grey);
}

.thesisContent > p:not(.thesisSubtitle) {
    max-width: 680px;

    font-size: 0.95rem;
    line-height: 1.7;

    color: #555555;
}

.thesisTags {
    margin-top: 25px;
}


/* ============================================================
   MUSIC
   ============================================================ */

.musicIntro {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 45px;

    padding-bottom: 45px;
}

.musicBigNumber {
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.8;
    font-weight: 700;
    letter-spacing: -0.06em;

    color: #ddddda;
}

.musicIntro h2 {
    margin: 0 0 15px 0;

    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: -0.04em;

    color: var(--julius-black);
}

.musicIntro p {
    max-width: 600px;

    margin: 0;

    font-size: 0.95rem;
    line-height: 1.65;

    color: #555555;
}


/* ============================================================
   INTERESTS
   ============================================================ */

.interestsContent {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 25px;
}

.interestsContent span {
    padding: 11px 17px;

    border: 1px solid #cfcfca;
    border-radius: 100px;

    font-size: 0.8rem;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.interestsContent span:hover {
    background-color: var(--julius-black);
    color: white;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer.colorJulius {
    margin-top: 70px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media only screen and (max-width: 800px) {

    .juliusHero {
        width: 90%;
        padding: 50px 0 45px 0;
    }

    .heroTitle {
        font-size: clamp(4rem, 20vw, 7rem);
    }

    .heroBottom {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }

    .profileSection {
        width: 90%;
    }

    .profileSummary {
        grid-template-columns: 50px 1fr 42px;
        min-height: 85px;
    }

    .summaryTitle {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    .summaryArrow {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }

    .detailsContent {
        padding:
            8px
            8px
            50px
            50px;
    }

    .experienceItem {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 25px 0;
    }

    .experienceMeta {
        padding-top: 0;
    }

    .skillGroup {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .skillGroup p {
        grid-column: 1;
        margin-top: 0;
    }

    .musicIntro {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .musicBigNumber {
        font-size: 4rem;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media only screen and (max-width: 500px) {

    .juliusHero {
        width: 88%;
        padding-top: 40px;
    }

    .heroNumber {
        margin-bottom: 20px;
    }

    .heroTitle {
        font-size: 28vw;
    }

    .heroStatement {
        font-size: 0.9rem;
    }

    .heroIntro {
        font-size: 0.9rem;
    }

    .profileSection {
        width: 88%;
    }

    .profileSummary {
        grid-template-columns: 35px 1fr 36px;
        min-height: 78px;
    }

    .summaryNumber {
        font-size: 0.62rem;
    }

    .summaryTitle {
        font-size: 1.5rem;
    }

    .summaryArrow {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .detailsContent {
        padding-left: 30px;
        padding-right: 0;
    }

    .experienceMain h3 {
        font-size: 1.25rem;
    }

    .experienceMain p {
        font-size: 0.9rem;
    }

    .thesisContent h2 {
        font-size: 2.2rem;
    }

    .musicIntro h2 {
        font-size: 2.1rem;
    }
}