/* Projects: typography-first index. Rows expand on hover, focus or tap. */
#sec-projects .proj-stack-wide { width: min(820px, 58vw); }

.proj-index.glass.card { list-style: none; margin: 0; padding: 8px 28px; }
.proj-row + .proj-row { border-top: 1px solid rgba(255,255,255,.09); }

.proj-head {
    all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
    display: grid; grid-template-columns: 34px 1fr auto 96px; align-items: baseline; gap: 16px;
    padding: 22px 0; color: var(--heading);
}
.proj-head:focus-visible { outline: 1px solid var(--heading); outline-offset: 2px; }
.proj-no, .proj-date, .proj-metric { font: 400 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--reading-muted); }
.proj-date { text-align: right; }
.proj-title { font: 400 clamp(26px, 3vw, 38px)/1.1 'Libre Baskerville', Georgia, serif; letter-spacing: -.01em; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.proj-metric { transition: color .25s ease; }

/* Spotlight: the rest dims while one row is active. */
.proj-row { transition: opacity .3s ease; }
.proj-index:has(.proj-row:hover, .proj-row.is-open, .proj-row:focus-within) .proj-row:not(:hover):not(.is-open):not(:focus-within) { opacity: .38; }
.proj-row:hover .proj-title, .proj-row.is-open .proj-title, .proj-row:focus-within .proj-title { transform: translateX(8px); }
.proj-row:hover .proj-metric, .proj-row.is-open .proj-metric, .proj-row:focus-within .proj-metric,
.proj-row:hover .proj-no, .proj-row.is-open .proj-no { color: var(--heading); }

.proj-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.proj-detail-inner { overflow: hidden; display: flex; gap: 28px; padding-left: 50px; min-height: 0; }
.proj-row:hover .proj-detail, .proj-row.is-open .proj-detail, .proj-row:focus-within .proj-detail { grid-template-rows: 1fr; }
.proj-row:hover .proj-detail-inner, .proj-row.is-open .proj-detail-inner, .proj-row:focus-within .proj-detail-inner { padding-bottom: 26px; }

.proj-detail img { flex: 0 0 42%; width: 42%; align-self: flex-start; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); }
.proj-copy { flex: 1; min-width: 0; }
.proj-copy p { margin: 0; }
.proj-kicker { font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--reading-muted); }
.proj-dek { margin-top: 8px !important; font-size: 16px; line-height: 1.5; color: var(--heading); }
.proj-copy ul { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--reading-text); }
.proj-copy li + li { margin-top: 6px; }
.proj-stack-line { margin-top: 14px !important; font: 400 11px/1.5 var(--mono); color: var(--reading-muted); }
.proj-link { display: inline-block; margin-top: 14px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.proj-link:hover { text-decoration-color: var(--reading-accent); color: var(--reading-accent); }

@media (max-width: 1100px) { #sec-projects .proj-stack-wide { width: 100%; } }
@media (max-width: 720px) {
    .proj-index.glass.card { padding: 4px 18px; }
    .proj-head { grid-template-columns: 26px 1fr auto; row-gap: 4px; }
    .proj-metric { grid-column: 2 / 4; grid-row: 2; }
    .proj-detail-inner { flex-direction: column; padding-left: 0; gap: 16px; }
    .proj-detail img { width: 100%; flex: none; }
}
@media (hover: none) { .proj-row:hover .proj-detail { grid-template-rows: 0fr; } .proj-row:hover .proj-detail-inner { padding-bottom: 0; } .proj-row.is-open .proj-detail { grid-template-rows: 1fr; } .proj-row.is-open .proj-detail-inner { padding-bottom: 22px; } }
@media (prefers-reduced-motion: reduce) { .proj-detail, .proj-title, .proj-row { transition: none; } }

/* ── Scroll reveal (only when JS has tagged the section) ─────── */

.js-reveal .proj-index { opacity: 0; transform: translateY(24px); transition: opacity .8s ease .25s, transform 1s cubic-bezier(.16,1,.3,1) .25s; }
.js-reveal .proj-index.in { opacity: 1; transform: none; }

/* Rows draw their divider, then the title rises out of a mask. */
.js-reveal .proj-row { border-top-color: transparent; position: relative; }
.js-reveal .proj-row + .proj-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.09); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.js-reveal .proj-row.in::before { transform: none; }
.js-reveal .proj-title-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.js-reveal .proj-title-mask > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.js-reveal .proj-no, .js-reveal .proj-head .principle-mark, .js-reveal .proj-metric, .js-reveal .proj-date { opacity: 0; transform: translateY(8px); transition: opacity .6s ease .15s, transform .7s cubic-bezier(.16,1,.3,1) .15s; }
.js-reveal .proj-row.in .proj-title-mask > span { transform: none; }
.js-reveal .proj-row.in .proj-no, .js-reveal .proj-row.in .proj-head .principle-mark, .js-reveal .proj-row.in .proj-metric, .js-reveal .proj-row.in .proj-date { opacity: 1; transform: none; }
.proj-title-mask { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .js-reveal .proj-title-mask > span, .js-reveal .proj-no, .js-reveal .proj-metric, .js-reveal .proj-date { transition: none; transform: none; opacity: 1; }
}