/* Refinement pass 02 — V3's editorial identity, with less cropped hero art.
   Loaded last on every page so changes are easy to review and revert. */
:root{--hy-hero-height:clamp(655px,80svh,790px)}
.cinema-hero{
 min-height:var(--hy-hero-height)!important;
 padding:clamp(115px,13svh,145px) var(--gutter) 64px;
}
.cinema-hero .cinema-copy{width:min(56%,720px);padding-bottom:0}
.cinema-hero h1{
 font-size:clamp(77px,8.45vw,140px);
 line-height:.86;
 margin:clamp(36px,5vh,55px) 0 clamp(32px,4.2vh,48px);
}
/* Match the physical artwork to its original pixel dimensions instead of zooming and cropping it. */
.cinema-art{
 inset:10% 2.4% 8% auto;
 width:min(56vw,770px);
 height:auto;
 overflow:visible;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 92%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 92%,transparent 100%);
}
.cinema-art img{object-fit:contain!important;object-position:center!important;filter:saturate(.94) contrast(1.025)}
.cinema-ruby{inset:0 0 0 52%;opacity:.55}
.cinema-side{top:30%}
.cinema-scroll{bottom:38px}
.cinema-edition{top:94px}
/* Clearer card labels and focus states on cream and charcoal surfaces. */
.work-card .card-details{min-height:119px}
.work-card .card-details small{line-height:1.4}
.gallery-item:focus-visible,.work-card:focus-visible,.chapter-card:focus-visible,
.cinema-side a:focus-visible,.cinema-link:focus-visible,.desktop-nav a:focus-visible,
.menu-toggle:focus-visible,.menu-close:focus-visible,.filter:focus-visible{
 outline:2px solid #9c384a;outline-offset:4px;
}
/* Stop the persistent nav from obscuring anchor targets on any page. */
html{scroll-padding-top:90px}
/* Arabic is an independently laid-out edition, not a mirrored picture. */
html[lang=ar] .wordmark{direction:rtl;unicode-bidi:isolate;font-family:'Tajawal','Noto Sans Arabic',sans-serif;letter-spacing:0;font-weight:700;font-size:14px}
html[lang=ar] .wordmark sup{right:auto;left:-11px}
html[lang=ar] .route-veil-title{font-family:'Amiri','Noto Naskh Arabic',serif;letter-spacing:0;line-height:1.25;font-size:clamp(42px,7vw,104px)}
html[lang=ar] .route-veil-number{font-family:'Tajawal','Noto Sans Arabic',sans-serif;letter-spacing:0;font-size:clamp(11px,1.2vw,15px);line-height:1.6}
html[lang=ar] .cinema-hero .cinema-copy{margin-inline:0 auto;width:min(55%,700px)}
html[lang=ar] .cinema-hero h1{font-size:clamp(76px,7.8vw,125px);line-height:1.18;margin:24px 0 31px}
html[lang=ar] .cinema-art{
 inset:10% auto 8% 2.4%;width:min(56vw,770px);
 transform:none!important;
 -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 20%,#000 92%,transparent 100%);
 mask-image:linear-gradient(270deg,transparent 0%,#000 20%,#000 92%,transparent 100%);
}
html[lang=ar] .cinema-hero .cinema-after p{font-size:clamp(24px,2.1vw,34px);line-height:1.48}
html[lang=ar] .cinema-hero .cinema-side{right:auto;left:var(--gutter)}
html[lang=ar] .cinema-hero .cinema-scroll{right:auto;left:var(--gutter)}
html[lang=ar] .cinema-hero .cinema-edition{right:var(--gutter);left:auto}
html[lang=ar] .cinema-hero .cinema-corner{right:var(--gutter);left:auto}
/* Preserve the complete unmirrored artwork at intermediate tablet breakpoints. */
@media(max-width:1100px){
 .cinema-hero .cinema-copy{width:63%}
 .cinema-hero h1{font-size:clamp(72px,9vw,112px)}
 .cinema-art{width:62vw;right:0;inset-block:12% 10%}
 html[lang=ar] .cinema-hero .cinema-copy{width:62%}
 html[lang=ar] .cinema-hero h1{font-size:clamp(70px,9.3vw,116px)}
 html[lang=ar] .cinema-art{width:62vw;left:0;right:auto;inset-block:12% 10%}
}
@media(max-width:650px){
 :root{--hy-hero-height:clamp(635px,89svh,765px)}
 .cinema-hero{padding:104px var(--gutter) 48px;align-items:flex-end}
 .cinema-hero .cinema-copy{width:100%;padding-bottom:50px}
 .cinema-hero h1{font-size:clamp(59px,14.6vw,86px);margin:23px 0 22px;line-height:.9}
 .cinema-art{inset:66px 0 auto 9%;width:91%;height:49%;opacity:.85;
   -webkit-mask-image:linear-gradient(180deg,#000 1%,#000 66%,transparent 100%);
   mask-image:linear-gradient(180deg,#000 1%,#000 66%,transparent 100%)}
 .cinema-art img{object-position:center top!important}
 .cinema-hero .cinema-edition{top:84px}
 .cinema-hero .cinema-after p{font-size:clamp(18px,4.8vw,24px);line-height:1.32}
 .cinema-hero .cinema-scroll{bottom:21px}
 .cinema-hero .cinema-corner{bottom:25px}
 html[lang=ar] .wordmark{font-size:14px}
 html[lang=ar] .cinema-hero .cinema-copy{width:100%;margin:0;padding-bottom:55px}
 html[lang=ar] .cinema-hero h1{font-size:clamp(62px,15.9vw,97px);line-height:1.25;margin:12px 0 13px}
 html[lang=ar] .cinema-art{inset:66px 9% auto 0;width:91%;height:47%;transform:none!important;
   -webkit-mask-image:linear-gradient(180deg,#000 1%,#000 62%,transparent 100%);
   mask-image:linear-gradient(180deg,#000 1%,#000 62%,transparent 100%)}
 html[lang=ar] .cinema-hero .cinema-after p{font-size:clamp(21px,5.7vw,28px);line-height:1.42}
 html[lang=ar] .cinema-hero .cinema-edition{top:83px}
}
@media(max-width:375px){
 .cinema-hero h1{font-size:14.4vw}
 html[lang=ar] .cinema-hero h1{font-size:16vw}
 .cinema-hero .cinema-pre{max-width:94%}
}
@media(prefers-reduced-motion:reduce){.cinema-art,.cinema-art img{transform:none!important}}

/* Improve chapter navigation contrast over the light half of the Arabic artwork. */
@media(min-width:901px){
 html[lang=ar] .cinema-hero .cinema-side a{
  background:rgba(25,25,23,.63);border:1px solid #e8ddd039;
  padding:10px 13px;color:#fff5e8;min-width:157px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)
 }
}
html[lang=ar] .inner-title,html[lang=ar] .project-card h2,html[lang=ar] .story-chapter h3{overflow-wrap:normal;word-break:normal}

/* Arabic contact: keep email addresses in their natural left-to-right order. */
html[lang=ar] a[href^="mailto:"]{unicode-bidi:isolate;direction:ltr}
html[lang=ar] .contact-address>a{direction:ltr;text-align:left;unicode-bidi:isolate;font-size:clamp(24px,3.6vw,54px);letter-spacing:-.025em;overflow-wrap:anywhere;word-break:normal}
html[lang=ar] .footer-bottom a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate}
html[lang=ar] .inner-title,html[lang=ar] .project-hero-copy h1{font-family:'Amiri','Noto Naskh Arabic',serif;letter-spacing:0;line-height:1.24}
html[lang=ar] .inner-lead p{font-family:'Amiri','Noto Naskh Arabic',serif;line-height:1.55}
/* Tighter hero spacing on all inner pages; ink trace sits on the open side in RTL. */
.inner-hero{min-height:clamp(360px,52svh,560px);padding-top:clamp(40px,5vw,90px);padding-bottom:clamp(40px,4.5vw,75px)}
.inner-hero .inner-title{margin:clamp(34px,4.5vw,60px) 0 clamp(24px,3vw,38px)}
.inner-main{min-height:0}
html[lang=ar] .inner-hero .ink-trace{right:auto;left:-4%;transform:scaleX(-1);opacity:.22}
@media(max-width:820px){.inner-hero{min-height:clamp(340px,50svh,440px)}}
@media(max-width:620px){.inner-hero{min-height:0;padding:40px var(--gutter) 48px}.inner-hero .inner-title{margin:46px 0 30px}}
html[lang=ar] .contact-form input,html[lang=ar] .contact-form textarea,html[lang=ar] .contact-form select{font-family:'Tajawal','Noto Sans Arabic',sans-serif}