@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');


/* -------------------------
   BASIC PAGE SETUP
------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    min-height: 100vh;

    background-image: url("../images/tree.jpg");
    background-repeat: no-repeat;

    color: #3f3a32;

    font-family: "Poiret One", sans-serif;

    letter-spacing: 1.5px;
}


/* -------------------------
   TOP NAVIGATION
------------------------- */

.topbar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding: 30px 5%;

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

    z-index: 10;

    opacity: 0;

    animation: fadeIn 2s ease forwards;
}


.site-name {
    font-size: 1rem;

    letter-spacing: 4px;
}


nav {
    display: flex;

    gap: 35px;
}


nav a {
    color: white;

    text-decoration: none;

    font-size: 0.85rem;

    letter-spacing: 3px;

    transition: opacity 0.3s ease;
}


nav a:hover {
    opacity: 0.6;
}


/* -------------------------
   HOME PAGE
------------------------- */

.hero {
    min-height: 100vh;

    display: flex;

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

    padding: 8%;

    padding-bottom: 18%;
}


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

    text-align: center;

    opacity: 0;

    transform: translateY(15px);

    animation: fadeInUp 3s ease 0.5s forwards;
}


.hero-text h1 {
    font-size: clamp(3.5rem, 7vw, 6.5rem);

    font-weight: 400;

    letter-spacing: 12px;

    line-height: 1.1;
}


.hero-text p {
    margin-top: 22px;

    font-size: clamp(1rem, 1.7vw, 1.4rem);

    letter-spacing: 8px;

    text-transform: uppercase;
}


/* -------------------------
   ABOUT PAGE
------------------------- */

.about-page {
    min-height: 100vh;

    display: flex;

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

    padding: 8%;

    padding-bottom: 18%;
}


.about-content {
    max-width: 800px;

    text-align: center;

    opacity: 0;

    transform: translateY(15px);

    animation: fadeInUp 3s ease 0.5s forwards;
}


.about-content h1 {
    font-size: clamp(3rem, 6vw, 5rem);

    font-weight: 400;

    letter-spacing: 10px;

    margin-bottom: 35px;
}


.about-content p {
    font-size: clamp(1rem, 1.5vw, 1.2rem);

    line-height: 1.9;

    margin-bottom: 20px;

    letter-spacing: 2px;
}


/* -------------------------
   BIO PAGE
------------------------- */

.bio-page {
    min-height: 100vh;

    display: flex;

    justify-content: center;

    padding: 26vh 8% 80px;
}


.bio-content {
    width: 100%;

    max-width: 800px;

    text-align: center;

    opacity: 0;

    transform: translateY(15px);

    animation: fadeInUp 3s ease 0.5s forwards;
}


.bio-content h1 {
    font-size: clamp(3rem, 6vw, 5rem);

    font-weight: 400;

    letter-spacing: 10px;

    margin-bottom: 40px;
}


.bio-content p {
    font-size: clamp(1rem, 1.4vw, 1.15rem);

    line-height: 1.9;

    margin-bottom: 25px;

    letter-spacing: 2px;
}


/* -------------------------
   LISTEN PAGE
------------------------- */

.listen-page {
    min-height: 100vh;

    padding: 26vh 8% 80px;

    display: flex;

    justify-content: center;
}


.listen-content {
    width: 100%;

    max-width: 1100px;

    text-align: center;

    opacity: 0;

    transform: translateY(15px);

    animation: fadeInUp 3s ease 0.5s forwards;
}


.listen-content > h1 {
    font-size: clamp(3rem, 6vw, 5rem);

    font-weight: 400;

    letter-spacing: 10px;
}


.listen-intro {
    margin-top: 18px;

    margin-bottom: 60px;

    font-size: 1rem;

    letter-spacing: 4px;
}


/* -------------------------
   LISTEN SECTIONS
------------------------- */

.recordings-section,
.performances-section {
    margin-top: 60px;
}


.recordings-section > h2,
.performances-section > h2 {
    margin-bottom: 30px;

    font-size: 1.3rem;

    font-weight: 400;

    letter-spacing: 6px;

    text-transform: uppercase;
}


/* -------------------------
   SOUNDCLOUD
------------------------- */

.soundcloud-card {
    max-width: 700px;

    margin: 0 auto;

    padding: 25px 30px;

    display: flex;

    align-items: center;

    border: 1px solid rgba(255, 255, 255, 0.6);

    background-color: rgba(0, 0, 0, 0.25);

    color: white;

    text-decoration: none;

    text-align: left;

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


.soundcloud-card:hover {
    background-color: rgba(0, 0, 0, 0.45);

    transform: translateY(-3px);
}


.soundcloud-icon {
    width: 60px;
    height: 60px;

    flex-shrink: 0;

    display: flex;

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

    margin-right: 25px;

    border: 1px solid white;

    border-radius: 50%;

    font-size: 28px;
}


.soundcloud-info h3 {
    font-size: 1.2rem;

    font-weight: 400;

    letter-spacing: 3px;
}


.soundcloud-info p {
    margin-top: 6px;

    font-size: 0.9rem;

    opacity: 0.7;
}


/* -------------------------
   VIDEO GRID
------------------------- */

.video-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 45px;
}


.video-card {
    color: white;

    text-decoration: none;

    text-align: left;
}


.thumbnail {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background-color: rgba(0, 0, 0, 0.5);

    overflow: hidden;

    cursor: pointer;

    transition: transform 0.4s ease;
}


.video-card:hover .thumbnail {
    transform: scale(1.02);
}


.play-button {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 65px;
    height: 65px;

    border: 1px solid white;

    border-radius: 50%;

    display: flex;

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

    font-size: 22px;

    padding-left: 4px;
}


.video-info {
    margin-top: 18px;
}


.video-info h2 {
    font-size: 1.2rem;

    font-weight: 400;

    letter-spacing: 3px;
}


.video-info p {
    margin-top: 7px;

    font-size: 0.9rem;

    opacity: 0.7;
}


/* -------------------------
   CONTACT PAGE
------------------------- */

.contact-page {
    min-height: 100vh;

    display: flex;

    justify-content: center;

    padding: 26vh 8% 80px;
}


.contact-content {
    width: 100%;

    max-width: 700px;

    opacity: 0;

    transform: translateY(15px);

    animation: fadeInUp 3s ease 0.5s forwards;
}


.contact-content h1 {
    text-align: center;

    font-size: clamp(3rem, 6vw, 5rem);

    font-weight: 400;

    letter-spacing: 10px;

    margin-bottom: 45px;
}


/* -------------------------
   CONTACT FORM
------------------------- */

.contact-form {
    display: flex;

    flex-direction: column;
}


.contact-form label {
    margin-bottom: 8px;

    font-size: 0.95rem;

    letter-spacing: 3px;
}


.contact-form input,
.contact-form textarea {
    width: 100%;

    margin-bottom: 25px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.7);

    background-color: rgba(0, 0, 0, 0.25);

    color: white;

    font-family: "Poiret One", sans-serif;

    font-size: 1rem;

    letter-spacing: 2px;

    outline: none;
}


.contact-form textarea {
    resize: vertical;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: white;

    background-color: rgba(0, 0, 0, 0.4);
}


.contact-form button {
    align-self: center;

    padding: 12px 35px;

    border: 1px solid white;

    background: transparent;

    color: white;

    font-family: "Poiret One", sans-serif;

    font-size: 1rem;

    letter-spacing: 4px;

    cursor: pointer;

    transition: all 0.3s ease;
}


.contact-form button:hover {
    background-color: white;

    color: black;
}


/* -------------------------
   WORKLIST PAGE
------------------------- */

.worklist-page {
    min-height: 100vh;

    display: flex;

    justify-content: center;

    padding: 26vh 8% 80px;
}


.worklist-content {
    width: 100%;

    max-width: 1100px;

    opacity: 0;

    transform: translateY(15px);

    animation: fadeInUp 3s ease 0.5s forwards;
}


.worklist-content h1 {
    text-align: center;

    font-size: clamp(3rem, 6vw, 5rem);

    font-weight: 400;

    letter-spacing: 10px;

    margin-bottom: 50px;
}


/* -------------------------
   WORKLIST FILTERS
------------------------- */

.work-filters {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 60px;
}


.filter-button {
    border: none;

    background: transparent;

    color: white;

    font-family: "Poiret One", sans-serif;

    font-size: 0.95rem;

    letter-spacing: 3px;

    padding: 8px 12px;

    cursor: pointer;

    opacity: 0.65;

    transition: opacity 0.3s ease;
}


.filter-button:hover {
    opacity: 1;
}


.filter-button.active {
    opacity: 1;

    border-bottom: 1px solid white;
}


/* -------------------------
   WORK LIST
------------------------- */

.works-list {
    width: 100%;
}


.work-item {
    display: grid;

    grid-template-columns: 2fr 2fr 0.7fr 0.5fr;

    gap: 25px;

    align-items: center;

    padding: 18px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


.work-title {
    font-size: 1.05rem;

    letter-spacing: 2px;
}


.work-ensemble,
.work-year,
.work-duration {
    letter-spacing: 2px;

    opacity: 0.8;
}


.work-year,
.work-duration {
    text-align: right;
}


/* -------------------------
   ANIMATIONS
------------------------- */

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes fadeInUp {

    from {
        opacity: 0;

        transform: translateY(15px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* -------------------------
   MOBILE
------------------------- */

@media (max-width: 700px) {

    .topbar {
        padding: 22px 6%;
    }


    .site-name {
        font-size: 0.8rem;

        letter-spacing: 2px;
    }


    nav {
        gap: 15px;
    }


    nav a {
        font-size: 0.7rem;

        letter-spacing: 1.5px;
    }


    .hero {
        padding: 8%;

        padding-bottom: 25%;
    }


    .hero-text h1 {
        letter-spacing: 7px;
    }


    .hero-text p {
        letter-spacing: 4px;
    }


    .about-page {
        padding: 8%;

        padding-bottom: 25%;
    }


    .bio-page,
    .listen-page,
    .contact-page,
    .worklist-page {
        padding-top: 25vh;
    }


    .bio-content {
        text-align: left;
    }


    .bio-content h1 {
        text-align: center;
    }


    .listen-intro {
        margin-bottom: 40px;
    }


    .video-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .play-button {
        width: 55px;
        height: 55px;
    }


    .work-filters {
        gap: 8px;

        margin-bottom: 40px;
    }


    .filter-button {
        font-size: 0.8rem;

        letter-spacing: 1.5px;
    }


    .work-item {
        grid-template-columns: 1fr;

        gap: 5px;

        padding: 20px 0;
    }


    .work-year,
    .work-duration {
        text-align: left;
    }

}}
/* -------------------------
   AUDIO CARD
------------------------- */

.audio-card {
    max-width: 800px;

    margin: 30px auto;

    display: flex;
    align-items: center;

    gap: 30px;

    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.35);

    background-color: rgba(0, 0, 0, 0.18);
}


.audio-thumbnail {
    width: 150px;
    height: 150px;

    object-fit: cover;

    flex-shrink: 0;
}


.audio-details {
    flex: 1;

    text-align: left;
}


.audio-details h3 {
    font-size: 1.3rem;

    font-weight: 400;

    letter-spacing: 4px;

    margin-bottom: 8px;
}


.audio-details p {
    margin-bottom: 20px;

    opacity: 0.75;

    letter-spacing: 2px;
}


.audio-details audio {
    width: 100%;
}


/* MOBILE */

@media (max-width: 700px) {

    .audio-card {
        flex-direction: column;

        text-align: center;
    }


    .audio-thumbnail {
        width: 180px;
        height: 180px;
    }


    .audio-details {
        width: 100%;

        text-align: center;
    }

}
/* -------------------------
   EAM WORK DETAILS
------------------------- */

.work-extra {
    margin-top: 10px;

    font-size: 0.8rem;

    line-height: 1.7;

    letter-spacing: 1px;

    opacity: 0.65;
}
/* =========================================================
   NEW CLEAN LISTEN PAGE
   ========================================================= */


.listen-content {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}


/* SECTIONS */

.listen-section {
    margin-top: 65px;
}


.listen-section > h2 {
    text-align: center;

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

    letter-spacing: 6px;

    text-transform: uppercase;

    margin-bottom: 30px;
}


/* TWO COLUMN GRID */

.listen-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 45px;
}


/* CARD */

.listen-card {
    min-width: 0;

    color: inherit;

    text-decoration: none;
}


/* IMAGES */

.listen-thumbnail,
.listen-placeholder {
    width: 100%;
    height: 190px;

    display: block;

    object-fit: cover;
}


/* EMPTY / LINK THUMBNAILS */

.listen-placeholder {
    display: flex;

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

    background: rgba(30, 20, 30, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.25);

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


.listen-link-card:hover .listen-placeholder {
    background: rgba(30, 20, 30, 0.38);

    transform: translateY(-3px);
}


/* SYMBOLS */

.music-symbol {
    font-size: 2.5rem;

    opacity: 0.9;
}


.small-play {
    width: 50px;
    height: 50px;

    display: flex;

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

    border: 1px solid currentColor;
    border-radius: 50%;

    padding-left: 3px;

    font-size: 16px;
}


/* INFORMATION */

.listen-card-info {
    margin-top: 16px;

    text-align: left;
}


.listen-card-info h3 {
    font-size: 1.05rem;

    font-weight: 400;

    letter-spacing: 3px;
}


.listen-card-info p {
    margin-top: 6px;

    font-size: 0.8rem;

    letter-spacing: 2px;

    opacity: 0.65;
}


/* AUDIO PLAYER */

.listen-card audio {
    display: block;

    width: 100%;

    height: 34px;

    margin-top: 15px;
}


/* MOBILE */

@media (max-width: 700px) {

    .listen-content {
        max-width: 430px;
    }


    .listen-section {
        margin-top: 50px;
    }


    .listen-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .listen-thumbnail,
    .listen-placeholder {
        height: 210px;
    }

}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #b5b5b5;
    opacity: 0.8;
}
/* -------------------------
   TOP NAVIGATION SIZE
------------------------- */

.site-name a {
    color: inherit;
    text-decoration: none;

    font-size: 1.7rem;
    letter-spacing: 4px;

    transition: opacity 0.3s ease;
}

.site-name a:hover {
    opacity: 0.6;
}


nav a {
    font-size: 1.5rem;
    letter-spacing: 3px;
}
/* =========================================================
   PROJECTS PAGE
   ========================================================= */

.projects-page {
    min-height: 100vh;

    display: flex;
    justify-content: center;

    padding: 26vh 8% 100px;
}


.projects-content {
    width: 100%;
    max-width: 900px;

    opacity: 0;
    transform: translateY(15px);

    animation: fadeInUp 3s ease 0.5s forwards;
}


/* MAIN TITLE */

.projects-content > h1 {
    text-align: center;

    font-size: clamp(3rem, 6vw, 5rem);

    font-weight: 400;

    letter-spacing: 10px;

    margin-bottom: 80px;
}


/* SECTIONS */

.projects-section {
    margin-bottom: 90px;
}


.projects-section > h2 {
    text-align: center;

    margin-bottom: 45px;

    font-size: 1.2rem;

    font-weight: 400;

    letter-spacing: 7px;

    text-transform: uppercase;
}


/* PROJECT */

.project-item {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 45px;

    padding: 30px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}


/* DATE */

.project-date {
    font-size: 0.9rem;

    letter-spacing: 2px;

    opacity: 0.65;
}


/* PROJECT INFORMATION */

.project-details h3 {
    margin-bottom: 8px;

    font-size: 1.2rem;

    font-weight: 400;

    letter-spacing: 3px;
}


.project-location {
    margin-bottom: 15px;

    font-size: 0.85rem;

    letter-spacing: 2px;

    opacity: 0.65;
}


.project-details p {
    line-height: 1.8;

    letter-spacing: 1.5px;
}


/* MOBILE */

@media (max-width: 700px) {

    .projects-page {
        padding: 25vh 8% 70px;
    }


    .projects-content > h1 {
        margin-bottom: 60px;
    }


    .projects-section {
        margin-bottom: 65px;
    }


    .project-item {
        grid-template-columns: 1fr;

        gap: 10px;

        padding: 25px 0;
    }

}
/* Smaller Listen cards */

.listen-grid {
    display: grid;
    grid-template-columns: repeat(2, 260px);
    gap: 35px;
    justify-content: center;
}

.listen-card {
    width: 260px;
}

.listen-thumbnail,
.listen-placeholder {
    width: 260px;
    height: 140px;
    object-fit: cover;
}
/* Centre a final card when it is alone on a row */

.listen-grid .listen-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
}
.listen-content,
.bio-content,
.projects-content,
.contact-content,
.worklist-content {
    background: rgba(245, 238, 220, 0.72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    padding: 45px 55px;

    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
/* =========================================
   NEW PAINTING COLOUR SCHEME
   Delete this section to return to old colours
   ========================================= */

body {
    color: #3f3a50;
}

/* Lotta Alvin top-left */
.site-name,
.site-name a {
    color: #3f3a32;
}

/* Navigation: Home, Bio, Worklist, etc. */
nav a {
    color: #3f3a50;
}

/* Main page headings */
h1,
h2,
h3 {
    color: #3f3a50;
}

/* Normal text */
p {
    color: #3f3a32;
}

/* Worklist filters */
.filter-button {
    color: #3f3a32;
}

/* Links within content */
.listen-card,
.listen-card a,
.project-item a {
    color: #3f3a32;
}