/* Homepage previews keep projects and categories distinct. */
#projects .project-category{margin-bottom:128px;padding:40px}
#projects .category-projects{gap:96px}
#projects .category-heading{margin-bottom:40px}
.preview-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:38px}
.preview-cover{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--chapter-line);border-radius:5px;background:#0b0d0c}
.preview-cover img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s ease}
.preview-cover img.media-fill{object-fit:cover}
.preview-cover:hover img{transform:scale(1.025)}
.preview-copy h4{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(32px,3.5vw,52px);line-height:1.12;margin:0 0 22px;text-transform:uppercase}
.preview-copy h4 a{text-decoration:none;color:inherit}
.preview-copy .official-title{display:block;max-width:100%}
.preview-copy .official-title img{display:block;max-width:100%;width:auto;height:auto;max-height:135px;object-fit:contain}
.preview-copy p{color:var(--muted);line-height:1.8;font-size:16px}
.preview-copy .preview-role{font-size:13px;color:var(--accent);margin:22px 0}
.preview-copy .btn{margin-top:8px}
.preview-theatre{width:100%;margin:0 0 24px}
.preview-theatre .tm-stage{max-width:100%}
.detail-main{padding-top:40px;padding-bottom:70px}
.project-back{display:inline-flex;min-height:44px;align-items:center;margin:0 0 24px}
.detail-category{margin-bottom:32px}
.detail-category .project{margin:0}
.detail-category .project-heading h1,.detail-category .threaded-heading h1{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(38px,5vw,68px);line-height:1.08;margin:0;text-transform:uppercase;letter-spacing:normal}
.detail-category .threaded-heading{align-items:center}
.detail-end{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.detail-end .project-back{margin:0}
.scroll-return{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:90;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.scroll-return-button{display:grid;place-items:center;width:48px;height:48px;border:1px solid #9ca28b;border-radius:8px;background:#232820f2;color:#f1f1e9;font-size:26px;box-shadow:0 5px 20px #0005;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease,visibility .45s;pointer-events:none}
.scroll-return-button.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.scroll-return-button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.scroll-return-button:hover{background:#38402f}
@media(max-width:760px){
 #projects .project-category{padding:22px 12px;margin-bottom:80px}
 #projects .category-projects{gap:58px}
 #projects .category-heading{margin-bottom:28px}
 .preview-layout{grid-template-columns:1fr;gap:24px}
 .preview-copy h4{font-size:36px;margin-bottom:18px}
 .preview-copy p{font-size:15px}
 .preview-cover{aspect-ratio:16/10}
 .detail-main{padding-top:22px}
 .detail-category{padding:16px 10px}
 .detail-category .project{padding:18px 10px}
 .detail-end{align-items:stretch;flex-direction:column}
 .scroll-return{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.scroll-return-button,.preview-cover img{transition:none}.preview-cover:hover img{transform:none}}

.preview-theatre .tm-frame{width:100%;aspect-ratio:3/2;box-sizing:border-box}
@media(max-width:760px){.hero-gallery{display:block!important}.hero-slide{aspect-ratio:auto}}

.order-wip{min-height:240px;display:grid;place-items:center;text-align:center;border:1px dashed var(--accent);border-radius:6px;color:var(--accent);font-size:clamp(22px,3vw,32px)}
.preview-cover img{transform:scale(var(--preview-zoom,1))}.preview-cover:hover img{transform:scale(calc(var(--preview-zoom,1) + .025))}
@media(prefers-reduced-motion:reduce){.preview-cover:hover img{transform:scale(var(--preview-zoom,1))}}

/* Keep the caption outside the cropped image at every viewport size. */
.hero-gallery-heading{margin:0 0 14px;font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:.06em;color:var(--muted)}
.hero-slide-media{display:block;overflow:hidden;aspect-ratio:16/10}
.hero-slide-media img{width:100%;height:100%;object-fit:contain}
.hero-slide-caption{position:relative;white-space:normal;overflow-wrap:anywhere;line-height:1.5;background:#0c0e0d}