/* ================================================================
   Projects page — stacked long-read archive
   Each project is an <article class="chapter"> with sticky image +
   scrolling meta. Alternating chapters flip image ↔ meta for rhythm.
   ================================================================ */

#contentDiv {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: calc(var(--section-y) + 64px) var(--gutter) var(--section-y);
    box-sizing: border-box;
}

/* Intro header */
.projects-intro {
    display: grid;
    gap: var(--space-2);
    padding: 0 0 var(--space-5);
    border-bottom: 1px solid var(--line);
    max-width: 800px;
}
.projects-intro h1 {
    color: var(--yellow);
    font-size: clamp(40px, 6vw, 72px);
    margin: 0;
}
.projects-intro__copy {
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: var(--leading-body);
    color: var(--ink-soft);
    max-width: var(--measure);
    margin: 0;
}

/* ---- Chapter ---- */

.chapter {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
    .chapter {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "image meta";
        gap: var(--space-5);
        align-items: start;
    }
    .chapter--flip {
        grid-template-areas: "meta image";
    }
    .chapter__image { grid-area: image; }
    .chapter__meta  { grid-area: meta; }
}

.chapter__image {
    position: relative;
    min-width: 0;
}
@media (min-width: 900px) {
    .chapter__image {
        position: sticky;
        top: 12vh;
    }
}
.chapter__image figure { margin: 0; }
.chapter__image picture {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.chapter__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 1.2s var(--ease-warm);
}
.chapter__image:hover img { transform: scale(1.02); }
.chapter__image figcaption {
    padding: var(--space-1) 2px 0;
    font-size: 13px;
    color: var(--ink-faint);
}

.chapter__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: var(--measure);
}
.chapter__year {
    color: var(--rust);
    font-size: clamp(64px, 7vw, 120px);
    line-height: 1;
    margin: 0;
}
.chapter__title {
    color: var(--yellow);
    font-size: clamp(32px, 4vw, 52px);
    margin: 0 0 var(--space-2);
}
.chapter__copy {
    font-size: 17px;
    line-height: var(--leading-body);
    color: var(--ink-soft);
    margin: 0;
}
.chapter__outcomes-head {
    margin-top: var(--space-3);
}
.chapter__outcomes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-1);
}
.chapter__outcomes li {
    padding-left: 28px;
    position: relative;
    color: var(--yellow);
    line-height: var(--leading-body);
}
.chapter__outcomes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, var(--rust), var(--yellow));
    border-radius: 2px;
}

.chapter__error {
    padding: var(--space-4);
    border: 1px dashed var(--rust);
    border-radius: var(--radius);
    color: var(--rust);
    text-align: center;
}

/* ================================================================
   Archive section — past prototypes filed for the record.
   Visually separated by a top border + subdued sepia treatment.
   ================================================================ */

.projects-archive {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line-strong);
}
.projects-archive__head {
    max-width: 800px;
    margin: 0 auto var(--space-4);
    text-align: center;
}
.projects-archive__head h2 {
    color: var(--yellow);
    font-size: clamp(32px, 4vw, 48px);
    margin: var(--space-1) 0 var(--space-2);
}
.projects-archive__copy {
    color: var(--yellow);
    opacity: 0.8;
    line-height: var(--leading-body);
    max-width: var(--measure);
    margin: 0 auto;
    font-size: 16px;
}

/* Sepia-ish wash on archived chapters so they read as "older" */
.chapter[data-archived="true"] .chapter__image img {
    filter: sepia(0.22) saturate(0.85) brightness(0.95);
    transition: filter var(--dur-slow) var(--ease-warm);
}
.chapter[data-archived="true"]:hover .chapter__image img {
    filter: sepia(0) saturate(1) brightness(1);
}
.chapter[data-archived="true"] .chapter__year {
    opacity: 0.78;
}

/* ================================================================
   ANIMATION CHOREOGRAPHY — projects page
   ================================================================ */

/* Intro */
.projects-intro[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-warm), transform 800ms var(--ease-spring); }
.projects-intro[data-reveal].is-lit { opacity: 1; transform: none; }

/* Chapter slide-in: image and meta enter from opposite sides for rhythm.
   Standard chapters: image from left, meta from right.
   --flip chapters: image from right, meta from left. */
.chapter .chapter__image,
.chapter .chapter__meta {
    opacity: 0;
    transition: opacity 800ms var(--ease-warm), transform 900ms var(--ease-spring);
}
.chapter .chapter__image { transform: translateX(-32px); }
.chapter .chapter__meta  { transform: translateX(32px); }
.chapter--flip .chapter__image { transform: translateX(32px); }
.chapter--flip .chapter__meta  { transform: translateX(-32px); }
.chapter.is-lit .chapter__image,
.chapter.is-lit .chapter__meta,
.chapter[data-reveal].is-lit .chapter__image,
.chapter[data-reveal].is-lit .chapter__meta {
    opacity: 1; transform: none;
}
.chapter[data-reveal].is-lit .chapter__meta { transition-delay: 120ms; }

/* Year tile pops with spring */
.chapter__year { display: inline-block; transition: transform 600ms var(--ease-spring); }
.chapter[data-reveal].is-lit .chapter__year { animation: yearKick 600ms var(--ease-spring) 240ms; }
@keyframes yearKick {
    0%   { transform: scale(0.85); }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1);    }
}

/* Outcomes list cascade */
.chapter__outcomes li {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 500ms var(--ease-warm), transform 500ms var(--ease-spring);
}
.chapter[data-reveal].is-lit .chapter__outcomes li { opacity: 1; transform: none; }
.chapter[data-reveal].is-lit .chapter__outcomes li:nth-child(1) { transition-delay: 320ms; }
.chapter[data-reveal].is-lit .chapter__outcomes li:nth-child(2) { transition-delay: 400ms; }
.chapter[data-reveal].is-lit .chapter__outcomes li:nth-child(3) { transition-delay: 480ms; }
.chapter[data-reveal].is-lit .chapter__outcomes li:nth-child(4) { transition-delay: 560ms; }
.chapter[data-reveal].is-lit .chapter__outcomes li:nth-child(5) { transition-delay: 640ms; }

/* Archive header fade */
.projects-archive__head[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-warm), transform 800ms var(--ease-spring); }
.projects-archive__head[data-reveal].is-lit { opacity: 1; transform: none; }

/* Archive chapter entrance: warm to sepia after entering */
.projects-archive .chapter[data-archived="true"] .chapter__image img {
    filter: sepia(0) saturate(1) brightness(1);
    transition: filter 1100ms var(--ease-warm) 400ms;
}
.projects-archive .chapter[data-archived="true"][data-reveal].is-lit .chapter__image img {
    filter: sepia(0.22) saturate(0.85) brightness(0.95);
}

@media (prefers-reduced-motion: reduce) {
    .chapter .chapter__image,
    .chapter .chapter__meta,
    .chapter__outcomes li,
    .projects-intro[data-reveal],
    .projects-archive__head[data-reveal] { opacity: 1 !important; transform: none !important; }
    .chapter[data-reveal].is-lit .chapter__year { animation: none; }
}