/* =========================================================
   ARTS 3353 — HORIZONTAL CLASS ARCHIVE

   The major idea:
   .semester is one long horizontal strip.
   Each .panel is a column/card inside that strip.
   ========================================================= */



:root {
    --edge-gap: 22px;
    --topbar-height: 44px;
    --panel-gap: 20px;
    --course-width: clamp(430px, 29vw, 520px);
}

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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 15% 75%, rgba(210, 225, 215, 0.75), transparent 26rem),
        radial-gradient(circle at 85% 20%, rgba(225, 220, 210, 0.8), transparent 32rem),
        #eeeee9;

    color: #171717;

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

    overflow-y: hidden;
}


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

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   TOP INFORMATION BAR
   ========================================================= */

.topbar {
    position: fixed;
    z-index: 100;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--topbar-height);

    display: grid;
    grid-template-columns: 1.3fr 1fr 0.7fr auto;
    align-items: center;

    gap: 20px;

    /* Slightly tighter than the first version. */
    padding: 0 28px;

    background: rgba(238, 238, 233, 0.94);
    backdrop-filter: blur(10px);

    border-bottom: 1px solid #777;

    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.topbar > div:last-child {
    text-align: right;
}

.topbar a:hover {
    opacity: 0.5;
}


/* =========================================================
   HORIZONTAL SEMESTER
   ========================================================= */

.semester {
    height: 100vh;

    display: grid;

    /*
       Week cards form ONE horizontal strip.
       The fixed course card is no longer part of this grid.
    */
    grid-auto-flow: column;
    grid-auto-columns: minmax(410px, 31vw);

    gap: var(--panel-gap);

    overflow-x: auto;
    overflow-y: hidden;

    /*
       At the initial scroll position, Week 01 begins just to the
       right of the fixed course card.

       As you scroll horizontally, this left padding scrolls away too,
       allowing all week cards to pass OVER the fixed course panel.
    */
    padding-top: calc(var(--topbar-height) + var(--edge-gap));
    padding-right: var(--edge-gap);
    padding-bottom: var(--edge-gap);
    padding-left: calc(
        var(--edge-gap) +
        var(--course-width) +
        var(--panel-gap)
    );

    scrollbar-width: thin;
    scrollbar-color: #777 transparent;
}


/* Chrome / Safari scrollbar */

.semester::-webkit-scrollbar {
    height: 10px;
}

.semester::-webkit-scrollbar-track {
    background: transparent;
}

.semester::-webkit-scrollbar-thumb {
    background: #777;
}


/* =========================================================
   SHARED PANEL / CARD
   ========================================================= */

.panel {
    height: calc(
        100vh -
        var(--topbar-height) -
        (var(--edge-gap) * 2)
    );

    position: relative;

    overflow-y: auto;

    background: rgba(250, 250, 247, 0.94);
    backdrop-filter: blur(10px);

    border: 1px solid #8a8a84;
    border-radius: 16px;

}


/* =========================================================
   COURSE INTRO CARD

   Fixed in the viewport. Week cards have a higher z-index and
   scroll over this card after the user moves horizontally.
   ========================================================= */

.course-card {
    position: fixed;

    z-index: 8;

    top: calc(var(--topbar-height) + var(--edge-gap));
    left: var(--edge-gap);

    width: var(--course-width);

    height: calc(
        100vh -
        var(--topbar-height) -
        (var(--edge-gap) * 2)
    );

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 28px;

    /* Opaque foreground so scrolling cards never show through. */
    background: #fafaf7;
}


/* Weekly cards scroll BEHIND the fixed course card. */

.week-card,
.end-card {
    position: relative;
    z-index: 3;
}


/*
   This fixed mask covers the entire left foreground zone,
   including the small margin to the left of the course card.

   Result:
   weekly cards disappear cleanly as they scroll left instead
   of appearing behind the card or peeking out at the page edge.
*/

.course-mask {
    position: fixed;

    z-index: 6;

    top: var(--topbar-height);
    bottom: 0;
    left: 0;

    width: calc(
        var(--edge-gap) +
        var(--course-width)
    );

    background: #eeeee9;

    pointer-events: none;
}


.kicker {
    margin: 0 0 18px;

    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.14em;
}

.course-title h1 {
    margin: 0;

    font-size: clamp(5rem, 9vw, 9rem);
    line-height: 0.75;
    letter-spacing: -0.08em;
}

.course-subtitle {
    max-width: 390px;

    margin-top: 35px;

    font-size: 1rem;
    line-height: 1.4;
}

.course-info {
    margin-top: 100px;

    border-top: 1px solid #777;
}

.info-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;

    gap: 20px;

    padding: 12px 0;

    border-bottom: 1px solid #aaa;

    font-size: 0.8rem;
}

.info-row span:first-child {
    color: #666;
}


/* =========================================================
   WEEK CARD
   ========================================================= */

.week-card {
    display: flex;
    flex-direction: column;

    padding: 24px;
}


/* Week title */

.week-heading {
    display: grid;
    grid-template-columns: 92px 1fr;

    gap: 20px;

    align-items: start;

    padding-bottom: 23px;

    border-bottom: 1px solid #777;
}

.week-number {
    margin: -10px 0 0;

    font-size: 4.8rem;
    line-height: 1;
    letter-spacing: -0.06em;
}

.week-label {
    margin: 2px 0 8px;

    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.14em;
}

.week-heading h2 {
    margin: 0;

    max-width: 260px;

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

    font-weight: normal;
}


/* =========================================================
   MODULES
   ========================================================= */

.module {
    padding: 22px 0;

    border-bottom: 1px solid #aaa;
}

.module-label {
    margin: 0 0 12px;

    font-size: 0.67rem;
    font-weight: bold;
    letter-spacing: 0.12em;

    color: #666;
}


/* Main demo link */

.demo-link {
    display: flex;

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

    gap: 20px;

    padding: 4px 0 8px;

    font-size: clamp(1.65rem, 2.4vw, 2.6rem);
    line-height: 1.05;

    transition:
        opacity 0.25s,
        transform 0.25s;
}

.demo-link:hover {
    opacity: 0.45;
    transform: translateX(5px);
}

.module-description {
    max-width: 340px;

    margin: 12px 0 0;

    color: #555;

    font-size: 0.82rem;
    line-height: 1.45;
}


/* =========================================================
   STUDENT LIST
   ========================================================= */

.student-module {
    padding-bottom: 12px;
}

.student-list {
    list-style: none;

    margin: 0;
    padding: 0;
}

.student-list li {
    border-top: 1px solid #c8c8c1;
}

.student-list li:first-child {
    border-top: none;
}

.student-list a {
    display: flex;

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

    gap: 20px;

    padding: 9px 0;

    font-size: 0.83rem;

    transition:
        padding-left 0.2s,
        opacity 0.2s;
}

.student-list a:hover {
    padding-left: 8px;
    opacity: 0.5;
}


/* =========================================================
   OPTIONAL WEEK GRAPHICS

   These live at the bottom of each week card.
   They are entirely CSS, so there are no external files.
   Replace any of these with an image if you prefer:

   <img class="week-image" src="images/week01.jpg">
   ========================================================= */

.week-art {
    position: relative;

    min-height: 180px;

    margin-top: auto;

    overflow: hidden;

    border-radius: 10px;

    background: #e5e5df;
}


/* WEEK 01 */

.art-01 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.art-01 span {
    position: relative;
    z-index: 2;

    font-size: clamp(4rem, 7vw, 7rem);
    letter-spacing: -0.08em;
}

.art-01::before,
.art-01::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    border: 1px solid #555;
    border-radius: 50%;
}

.art-01::before {
    transform: translate(-50px, -25px);
}

.art-01::after {
    transform: translate(55px, 35px);
}


/* WEEK 02 */

.art-02 {
    display: grid;

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

    align-items: center;

    padding: 20px;
}

.art-02 span {
    font-size: 4.5rem;
    text-align: center;

    animation: drift-arrow 3s infinite alternate ease-in-out;
}

.art-02 span:nth-child(2) {
    animation-delay: 0.5s;
}

.art-02 span:nth-child(3) {
    animation-delay: 1s;
}

@keyframes drift-arrow {

    from {
        transform: translateY(-10px);
    }

    to {
        transform: translateY(15px);
    }

}


/* WEEK 03 */

.art-03,
.art-generic {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 15px 25px;
}

.art-03 span,
.art-generic span {
    font-size: 8rem;
    line-height: 1;

    letter-spacing: -0.08em;
}


/* If you use your own image */

.week-image {
    display: block;

    width: 100%;
    height: 210px;

    margin-top: auto;

    object-fit: cover;

    border-radius: 10px;
}


/* =========================================================
   END CARD
   ========================================================= */

.end-card {
    width: 360px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 28px;
}

.end-mark {
    margin: auto 0;

    font-size: 5rem;

    letter-spacing: -0.1em;
}

.end-card a {
    padding-top: 18px;

    border-top: 1px solid #777;

    font-size: 0.8rem;
}


/* =========================================================
   SCROLL CUE
   ========================================================= */

.scroll-cue {
    position: fixed;

    z-index: 20;

    /*
       Keep the cue in the fixed course-card zone so it never
       collides with the weekly cards.
    */
    left: calc(var(--edge-gap) + 20px);
    bottom: 7px;

    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 0.62rem;
    letter-spacing: 0.14em;

    pointer-events: none;
}

.scroll-line {
    display: block;

    width: 55px;
    height: 1px;

    background: #444;
}


/* =========================================================
   RESPONSIVE VERSION

   On a phone, everything returns to normal document flow.
   ========================================================= */

@media (max-width: 700px) {

    body {
        overflow-y: auto;
    }


    .topbar {
        position: relative;

        width: 100%;
        height: auto;

        grid-template-columns: 1fr 1fr;

        padding: 10px 18px;

        gap: 6px 15px;
    }


    .course-mask {
        display: none;
    }


    .course-card {
        position: relative;

        top: auto;
        left: auto;

        width: calc(100% - 36px);
        height: auto;
        min-height: 680px;

        margin: 18px;
    }


    .semester {
        height: auto;

        display: block;

        overflow: visible;

        padding: 0 18px 18px;
    }


    .panel,
    .end-card {
        width: 100%;
        height: auto;

        min-height: 680px;

        margin-bottom: 18px;
    }


    .course-card {
        padding: 24px;
    }


    .course-title h1 {
        font-size: 6.5rem;
    }


    .scroll-cue {
        display: none;
    }

}