/* The Way Studio · /work/ pages. Loaded after site.css (the homepage stylesheet, copied
   verbatim at build time), so these rules only add page parts the homepage does not have. */
.wk-short{min-height:62svh}
.wk-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;margin-top:2.2rem;border-top:1px solid var(--line);max-width:58rem}
.wk-meta div{padding:1rem 1rem 0 0;font-size:.95rem;color:var(--ink)}
.wk-meta small{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.hero .ar{display:block;font-family:"Geeza Pro","Noto Naskh Arabic",serif;text-transform:none;font-size:.42em;line-height:1.2;color:var(--accent-soft);margin-top:.3em;letter-spacing:0}

/* section rhythm, same padding as the homepage sections */
.split,.wide,.player,.tiles{padding:clamp(3.5rem,8vw,7rem) clamp(1rem,5vw,5rem)}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,5rem)}
.split .copy p{color:var(--muted);font-size:1.05rem;margin-bottom:1.1rem;max-width:40rem}
.split .copy a{color:var(--accent-soft);border-bottom:1px solid rgba(214,185,138,.3)}
.split .copy h2{margin-bottom:1rem}
.note{margin-top:1rem;font-size:.8rem;color:var(--muted);letter-spacing:.04em}

.player video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:1rem}
.reel-big video{aspect-ratio:1920/816;object-fit:cover}

/* justified gallery: whole photos, never cropped, rows fill edge to edge */
.jg{display:flex;flex-wrap:wrap;gap:.7rem}
.jg::after{content:"";flex-grow:9999}
.jg .g{flex:var(--r) 1 calc(var(--r) * 15rem);display:block;overflow:hidden;border-radius:.7rem;background:var(--deep)}
.jg img{display:block;width:100%;height:auto;aspect-ratio:var(--r);transition:transform .8s ease}
.jg .g:hover img{transform:scale(1.03)}

.credits{display:grid;margin-top:1.4rem}
.credits div{display:grid;grid-template-columns:minmax(8rem,.8fr) 1.2fr;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.credits dt{color:var(--muted);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding-top:.2rem}
.credits dd{color:var(--ink)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.tile,.next{position:relative;display:block;overflow:hidden;border-radius:1rem;border:1px solid var(--line);background:var(--deep)}
.tile{aspect-ratio:4/5}
.tile img,.tile video,.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.tile::after,.next::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,3,7,.92))}
.tile:hover img,.tile:hover video,.next:hover img{transform:scale(1.05)}
.tile span{position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem;z-index:1;color:var(--muted);font-size:.9rem}
.tile strong{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);text-transform:uppercase;color:var(--ink-soft);line-height:1.05;margin-bottom:.3rem}
.next{min-height:22rem;margin:0 clamp(1rem,5vw,5rem) clamp(3rem,6vw,5rem)}
.next span{position:absolute;left:1.6rem;right:1.6rem;bottom:1.4rem;z-index:1;font-family:'Anton',sans-serif;font-size:clamp(1.6rem,3.4vw,2.8rem);text-transform:uppercase;color:var(--ink-soft)}
.next small{display:block;font-family:"Neue Haas Grotesk Text","Helvetica Neue",Arial,sans-serif;font-size:.7rem;letter-spacing:.28em;color:var(--accent-soft);margin-bottom:.4rem}

.lb{position:fixed;inset:0;z-index:120;background:rgba(4,3,8,.94);display:grid;place-items:center;padding:4vh 4vw}
.lb[hidden]{display:none}
.lb-in img,.lb-in video{max-width:92vw;max-height:88vh;border-radius:.4rem}
.lb-x{position:absolute;top:1rem;right:1.2rem;background:none;border:0;color:var(--ink);font-size:2.2rem;cursor:pointer;line-height:1}

@media (max-width:900px){.split,.tiles{grid-template-columns:1fr}.tile{aspect-ratio:16/11}}
@media (max-width:560px){.jg .g{flex-basis:calc(var(--r) * 9rem)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.jg.jg-fill::after{display:none}
.jg .g[hidden]{display:none}