/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* =========================
   Global
========================= */

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background-color: #171717;
    color: #d8d3c8;

    font-family: Georgia, "Times New Roman", serif;
}

/* =========================
   Project / Folder Titles
========================= */

.project-title {
    display: block;

    margin: 80px auto 60px;

    color: #d8d3c8;

    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: center;
    text-decoration: none;

    transition: color 0.35s ease;
}

a.project-title {
    cursor: pointer;
}

a.project-title:hover {
    color: #ffffff;
}

/* =========================
   Back Link
========================= */

.back-link {
    display: inline-block;

    margin: 38px 0 0 48px;

    color: #8f8a80;

    font-size: 1rem;
    letter-spacing: 0.03em;
    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.back-link:hover {
    color: #ffffff;
    transform: translateX(-4px);
}

/* =========================
   Folder Lists
========================= */

.folder-list {
    display: flex;
    flex-direction: column;
    gap: 18px;

    width: min(650px, 90%);

    margin: 0 auto 100px;
}

.folder-link {
    display: block;

    padding: 18px 0;

    border-bottom: 1px solid rgba(216, 211, 200, 0.18);

    color: #d8d3c8;

    font-size: 1.5rem;
    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.35s ease,
        padding-left 0.35s ease,
        border-color 0.35s ease;
}

.folder-link:hover {
    padding-left: 16px;

    border-color: rgba(255, 255, 255, 0.45);

    color: #ffffff;
}

/* =========================
   Poem Page
========================= */

.poem-page {
    width: min(860px, 88%);

    margin: 0 auto;
    padding-bottom: 100px;
}

/* =========================
   Poem Header
========================= */

.poem-header {
    margin-top: 70px;

    text-align: center;
}

.poem-title {
    margin: 0;

    color: #d8d3c8;

    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}

.poem-year {
    margin: 24px 0 0;

    color: #8f8a80;

    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.18em;
}

/* =========================
   Divider
========================= */

.poem-divider {
    width: 100%;

    margin: 58px auto 0;

    border: 0;
    border-top: 1px solid rgba(216, 211, 200, 0.28);
}

/* =========================
   Poem Text
========================= */

.poem {
    width: min(650px, 100%);

    margin: 72px auto 0;

    color: #d8d3c8;

    font-size: clamp(1.12rem, 2.1vw, 1.32rem);
    line-height: 1.85;
    letter-spacing: 0.005em;
}

.poem p {
    margin: 0 0 2.5rem;
}

.poem p:last-child {
    margin-bottom: 0;
}

/* =========================
   Closing Mark
========================= */

.poem-mark {
    margin-top: 85px;

    color: #8f8a80;

    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

/* =========================
   Optional Bottom Navigation
========================= */

.poem-navigation {
    display: flex;
    justify-content: space-between;
    gap: 30px;

    width: min(860px, 88%);

    margin: 0 auto 60px;
    padding-top: 26px;

    border-top: 1px solid rgba(216, 211, 200, 0.15);
}

.poem-navigation a {
    color: #8f8a80;

    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-decoration: none;

    cursor: pointer;

    transition: color 0.35s ease;
}

.poem-navigation a:hover {
    color: #ffffff;
}

/* =========================
   Mobile
========================= */

@media (max-width: 600px) {
    .back-link {
        margin: 28px 0 0 24px;
    }

    .project-title {
        margin-top: 60px;
    }

    .poem-page {
        width: 86%;
    }

    .poem-header {
        margin-top: 58px;
    }

    .poem-year {
        margin-top: 18px;
    }

    .poem-divider {
        margin-top: 44px;
    }

    .poem {
        margin-top: 52px;

        font-size: 1.08rem;
        line-height: 1.75;
    }

    .poem-mark {
        margin-top: 65px;
    }

    .poem-navigation {
        flex-direction: column;
        gap: 14px;

        width: 86%;
    }
}

.section-divider {
    width: 110px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        #666 15%,
        #888 50%,
        #666 85%,
        transparent
    );
    margin: 75px auto 60px auto;
}

.project-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
    margin-bottom: 90px;
}

.project-link {
    color: #d8d3c8;
    text-decoration: none;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    transition: color 0.25s ease;
}

.project-link:hover {
    color: white;
}