/* projects.css — index of disciplines + discipline pages.
   Loaded alongside case.css. Fail-open: rows are expanded by default;
   .pidx.interactive (added by projects.js) opts into collapse + hover. */

.pidx{margin-top:clamp(30px,5vw,60px);border-top:1px solid var(--line)}

.prow{display:block;text-decoration:none;color:inherit;border-bottom:1px solid var(--line);
  padding:clamp(22px,3vw,38px) 0;position:relative}
.prow-head{display:flex;align-items:baseline;gap:clamp(12px,2vw,26px)}
.pnum{font-size:.72rem;font-weight:500;letter-spacing:.14em;color:var(--mute);flex:none;width:2.4ch}
.ptitle{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(1.6rem,4.2vw,3.1rem);color:var(--ink);
  transition:color var(--t-short,260ms) var(--e-out,cubic-bezier(.16,1,.3,1))}
.pcount{margin-left:auto;flex:none;font-size:.74rem;letter-spacing:.06em;color:var(--mute);
  text-align:right;line-height:1.35}
.pcount b{display:block;font-weight:500;color:var(--ink)}
@media(max-width:720px){.pcount{display:none}}

.pbody{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);
  gap:clamp(16px,3vw,44px);align-items:start;padding-top:clamp(16px,2vw,26px)}
@media(max-width:820px){.pbody{grid-template-columns:1fr;gap:16px}}

.plist{display:flex;flex-direction:column;gap:7px;min-width:0}
.plist i{font-style:normal;font-size:clamp(.9rem,1.15vw,1.02rem);color:#2e3238;font-weight:300;
  line-height:1.4;display:flex;gap:10px}
.plist i::before{content:"";flex:none;width:5px;height:5px;margin-top:.62em;border-radius:50%;
  background:var(--line);}
.plist u{text-decoration:none;color:var(--mute);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;margin-top:12px}
.plist u:first-child{margin-top:0}

.pprev{display:block;position:relative;overflow:hidden;background:#0E0E0C;aspect-ratio:16/9}
.pprev video,.pprev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* --- interactive state: collapse, reveal on hover / active --- */
.pidx.interactive .pbody{display:grid;grid-template-rows:0fr;padding-top:0;opacity:0;
  transition:grid-template-rows var(--t-long,800ms) var(--e-out,cubic-bezier(.16,1,.3,1)),
             opacity var(--t-mid,480ms) var(--e-out,cubic-bezier(.16,1,.3,1)),
             padding-top var(--t-long,800ms) var(--e-out,cubic-bezier(.16,1,.3,1))}
.pidx.interactive .pbody>*{min-height:0;overflow:hidden}
.pidx.interactive .prow.on .pbody{grid-template-rows:1fr;opacity:1;padding-top:clamp(16px,2vw,26px)}
.pidx.interactive .prow.on .ptitle{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .pidx.interactive .pbody{transition:none}
}

/* --- discipline pages: project list in the editorial pattern --- */
.plede{border-top:1px solid var(--line);margin-top:clamp(30px,5vw,60px)}
.pitem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);
  align-items:center;padding:clamp(34px,5vw,72px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
.pitem.flip .pmedia{order:2}
@media(max-width:860px){.pitem{grid-template-columns:1fr;gap:20px}.pitem.flip .pmedia{order:0}}
.pmedia{position:relative;overflow:hidden;background:#0E0E0C;aspect-ratio:16/9}
.pmedia video,.pmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ptxt .pk{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500}
.ptxt h3{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;line-height:1.1;
  font-size:clamp(1.4rem,2.6vw,2.1rem);margin:12px 0 0;
  transition:color var(--t-short,260ms) var(--e-out,cubic-bezier(.16,1,.3,1))}
.pitem:hover .ptxt h3{color:var(--accent)}
.ptxt p{color:#2e3238;font-weight:300;line-height:1.6;font-size:clamp(.96rem,1.2vw,1.1rem);
  margin:12px 0 0;max-width:52ch}
.ptxt .pgo{display:inline-block;margin-top:16px;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink);
  padding-bottom:3px}
.pitem:hover .ptxt .pgo{color:var(--accent);border-color:var(--accent)}
.psub{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  font-weight:500;padding:clamp(34px,5vw,64px) 0 0}

/* --- item 9: cap runaway media height; whitespace is fine, a 900px-tall clip is not --- */
.msec .media.native video,
.msec .media.native img{max-height:72vh;width:auto;max-width:100%;margin:0 auto;display:block}
.msec .mediarow3 .media.native video,
.msec .mediarow3 .media.native img,
.msec .mediarow .media.native video,
.msec .mediarow .media.native img{max-height:60vh}

/* --- item 8: expand + sound --- */
.media.native{position:relative}
.vbtn{position:absolute;bottom:10px;border:0;border-radius:999px;cursor:pointer;
  width:34px;height:34px;display:grid;place-items:center;
  background:rgba(14,14,12,.62);color:#fff;font-size:15px;line-height:1;
  opacity:0;transition:opacity var(--t-short,260ms) var(--e-out,cubic-bezier(.16,1,.3,1))}
.vbtn:hover{background:rgba(14,14,12,.85)}
.vbtn:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:2px}
.media.native:hover .vbtn,.media.native:focus-within .vbtn{opacity:1}
.vexpand{right:10px}
.vsound{right:52px}
@media(hover:none){.vbtn{opacity:.85}}
video:fullscreen{width:100%;height:100%;object-fit:contain;background:#0E0E0C;max-height:none}