/* ==================================================
   StarArchive
   Kim Yoon Sik Personal Website
   timeline.css — Timeline Page
   ================================================== */


/* ==================================================
   Timeline
   ================================================== */

.timeline {

    position: relative;

    margin-top: 90px;

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 100px;

}


/* ==================================================
   Timeline Vertical Line
   ================================================== */

.timeline::before {

    content: "";

    position: absolute;

    left: 210px;

    top: 0;

    bottom: 0;

    width: 1px;

    background: #c6dce9;

}


/* ==================================================
   Timeline Item
   ================================================== */

.timeline-item {

    position: relative;

    display: grid;

    grid-template-columns: 130px 1px minmax(0, 680px);

    column-gap: 40px;

    width: 100%;

}


/* ==================================================
   Date
   ================================================== */

.timeline-date {

    display: flex;

    flex-direction: column;

    padding-top: 0;

    text-align: left;

    transform: translateX(-30px);

}


.timeline-year {

    font-size: 42px;

    line-height: 1;

    color: #173f5f;

    font-weight: 500;

    letter-spacing: -2px;

}


.timeline-full-date {

    margin-top: 12px;

    font-size: 10px;

    color: #82a2b7;

    letter-spacing: 1px;

}


/* ==================================================
   Timeline Content
   ================================================== */

.timeline-content {

    grid-column: 3;

    max-width: 720px;

    min-width: 0;

    padding-left: 0;

    transform: translateX(-50px);

}


/* ==================================================
   Category
   ================================================== */

.timeline-category {

    margin-bottom: 16px;

    font-size: 10px;

    letter-spacing: 3px;

    color: #3f82b5;

    font-weight: 600;

    text-transform: uppercase;

}


.timeline-category span {

    margin-left: 9px;

    color: #82a2b7;

    font-size: 11px;

    letter-spacing: 1px;

    font-weight: 400;

    text-transform: none;

}


/* ==================================================
   Title
   ================================================== */

.timeline-content h2 {

    margin: 0;

    font-size: 36px;

    line-height: 1.25;

    color: #173f5f;

    font-weight: 500;

    letter-spacing: -1.5px;

}


.timeline-content h2 span {

    display: block;

    margin-top: 8px;

    font-size: 18px;

    font-weight: 400;

    letter-spacing: 1px;

    color: #7897aa;

}


/* ==================================================
   Meta Information
   ================================================== */

.timeline-meta {

    margin-top: 28px;

}


.timeline-meta-item {

    display: flex;

    align-items: baseline;

    gap: 25px;

}


.timeline-meta-label {

    flex: 0 0 75px;

    font-size: 9px;

    letter-spacing: 3px;

    color: #6d94ae;

}


.timeline-meta-value {

    font-size: 15px;

    line-height: 1.7;

    color: #42677e;

}


.timeline-meta-value > span {

    color: #7897aa;

}


.meta-divider {

    margin: 0 7px;

    color: #9db5c3;

}


/* ==================================================
   Description
   ================================================== */

.timeline-description {

    margin-top: 25px;

    max-width: 620px;

}


.timeline-description p {

    margin: 5px 0;

    font-size: 14px;

    line-height: 1.8;

    color: #6f8999;

}


.timeline-description p + p {

    color: #91a6b2;

    font-size: 13px;

}


/* ==================================================
   Timeline Image
   ================================================== */

.timeline-image {

    width: 100%;

    max-width: 680px;

    margin-top: 35px;

    overflow: hidden;

    background: #dcecf6;

}


.timeline-image img {

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    transition:
        transform 0.6s ease;

}


.timeline-image:hover img {

    transform: scale(1.025);

}


/* ==================================================
   About
   ================================================== */

.about-section {

    max-width: none;

    padding-left:
        max(40px, calc((100% - 970px) / 2));

    padding-right:
        max(40px, calc((100% - 970px) / 2));

    background: white;

}


.about-section > p {

    margin-top: 50px;

    line-height: 2;

    color: #52748b;

    font-size: 16px;

}


/* ==================================================
   Responsive
   ================================================== */

@media (max-width: 800px) {

    .timeline {

        padding-left: 20px;

        padding-right: 25px;

        gap: 80px;

    }


    .timeline::before {

        left: 125px;

    }


    .timeline-item {

        grid-template-columns: 90px 1px minmax(0, 1fr);

        column-gap: 30px;

    }


    .timeline-item::before {

        left: 120px;

    }


    .timeline-year {

        font-size: 34px;

    }


    .timeline-content h2 {

        font-size: 30px;

    }

}


@media (max-width: 600px) {

    .timeline {

        padding-left: 25px;

        padding-right: 20px;

        gap: 70px;

    }


    .timeline::before {

        left: 18px;

    }


    .timeline-item {

        display: block;

        padding-left: 35px;

    }


    .timeline-item::before {

        left: 13px;

        top: 5px;

    }


    .timeline-date {

        margin-bottom: 25px;

        text-align: left;

    }


    .timeline-year {

        display: inline-block;

        font-size: 36px;

    }


    .timeline-full-date {

        display: inline-block;

        margin-top: 0;

        margin-left: 12px;

    }


    .timeline-content {

        padding-left: 0;

    }


    .timeline-content h2 {

        font-size: 28px;

    }


    .timeline-content h2 span {

        font-size: 16px;

    }


    .timeline-meta-item {

        gap: 15px;

    }


    .timeline-meta-label {

        flex-basis: 65px;

    }


    .timeline-image {

        max-width: 100%;

    }

}