/* =========================================================================
   works.css — the All Works page: Previews (grid of tall tiles that play
   their video on hover) and Index (big names with a side preview).
   Driven by js/components/works/*.
   ========================================================================= */

.works-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}

/* Previews / Index toggle */
.wtoggle{display:flex;gap:4px;padding:6px;background:#fff;box-shadow:0 10px 30px -12px rgba(30,60,120,.35)}
.wtoggle button{font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;color:#8a8e95;transition:background .4s,color .4s}
.wtoggle button:hover{color:#111}
.wtoggle button[aria-pressed="true"]{background:#eceef1;color:#111}
.wtoggle :focus-visible{outline-color:#111;outline-offset:-2px}

/* ---------- Previews: the grid ---------- */
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:clamp(40px,7vh,80px)}
.w{position:relative;z-index:0;display:block;aspect-ratio:2/3;max-width:100%;overflow:hidden;background:var(--block-back)}
.w .pic{position:absolute;inset:0;background-size:cover;background-position:center}
.w video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.w.playing video{opacity:1}
/* white caption bar with black text at the bottom of each tile */
.w .meta{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:4px;padding:11px 13px 12px;background:#fff;color:#111;pointer-events:none}
.w .meta b{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(17px,1.4vw,21px);line-height:1}
.w .meta small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6b6f76}
/* coming-soon tile */
.w .soonface{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.w .soonface img{width:60%;height:auto}
.w .soonface em{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(16px,1.4vw,22px);color:#111;text-align:center}
/* the upcoming project's name under "Coming soon" — the same serif italic, a little smaller and softer */
.w .soonface em small{display:block;margin-top:4px;font-size:.78em;line-height:1.2;color:#55595f}

/* ---------- Index: big names, hovered one lights up, its poster/video at the side ---------- */
.windex{list-style:none;margin:clamp(40px,7vh,80px) 0 0;padding:0;max-width:calc(100% - min(300px,24vw) - 40px)}
.windex a{display:inline-flex;align-items:baseline;gap:14px;padding:2px 0;color:rgba(255,255,255,.42);transition:color .35s ease}
.windex b{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(40px,6.2vw,92px);line-height:1;letter-spacing:-.005em;min-width:0}
.windex small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.windex a:hover,.windex a:focus-visible{color:var(--ink)}
.windex a:hover small,.windex a:focus-visible small{opacity:1;transform:none}
.windex a:not([href]){color:rgba(255,255,255,.22)}
.wpeek{position:fixed;right:var(--gutter);top:50%;z-index:12;width:min(300px,24vw);aspect-ratio:2/3;transform:translateY(-38%) scale(.96);pointer-events:none;opacity:0;transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1);box-shadow:0 40px 80px -40px rgba(20,40,90,.55);overflow:hidden;background:var(--block)}
.wpeek.on{opacity:1;transform:translateY(-38%)}
.wpeek img,.wpeek video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* coming-soon slots are display only */
.w.soon,.windex a:not([href]){pointer-events:none}

@media (max-width:1100px){.works{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (hover:none),(pointer:coarse),(max-width:760px){.wpeek{display:none}.windex{max-width:none}.windex small{opacity:1;transform:none}}