/* Selected V2 details. The established landing-page grid and boxes remain in landing.css. */
:root{--detail-ease:cubic-bezier(.22,.7,.2,1);--mint:#7fd6a6}
body{font-size:17px;line-height:1.65}
h1,h2,h3{font-weight:600;letter-spacing:-.035em}
.opening h1{font-size:80px;line-height:1.02;letter-spacing:-.035em}
h2,.filmmaker-opening h2{font-size:56px;line-height:1.05;letter-spacing:-.035em}
h3,.film-card h3,.channel-detail h3,.original-feature h3{font-weight:600;letter-spacing:-.03em}
.standfirst{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.3}
.filmmaker-world .overline,.film-card .card-kicker{color:var(--mint)}
.discovery-close{font-family:var(--display);font-weight:600;font-size:40px;line-height:1.1;letter-spacing:-.035em;text-align:center}
.discovery-close span{font:inherit;letter-spacing:inherit;color:var(--mint);margin-top:6px}

/* Separate entry movement from card depth; stagger groups using --d. */
.js-ready .reveal{opacity:0;transform:none;translate:0 20px;transition:opacity .7s var(--detail-ease) var(--d,0ms),translate .7s var(--detail-ease) var(--d,0ms)}
.js-ready .reveal.visible{opacity:1;transform:none;translate:0 0}
[data-depth],.js-ready [data-depth].reveal,.js-ready [data-depth].reveal.visible{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--detail-ease),box-shadow .35s var(--detail-ease),opacity .7s var(--detail-ease) var(--d,0ms),translate .7s var(--detail-ease) var(--d,0ms)}
.media-stat-card[data-depth],.js-ready .media-stat-card[data-depth].reveal{transform:translate(var(--dx,0px),var(--dy,0px)) perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.media-stat-card.is-held{transition:none}
.orbit-ambient{position:absolute;left:50%;top:50%;width:min(1100px,92vw);height:440px;transform:translate(-50%,-54%);pointer-events:none;mask-image:radial-gradient(closest-side,#000 30%,transparent 100%)}
.orbit-ambient img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:blur(70px) saturate(1.6);opacity:0;transition:opacity 1.1s ease}
.orbit-ambient img.on{opacity:.3}
.catalogue-visual img{transition:scale 1.4s var(--detail-ease)}

/* The full-width feature stays in its original place, now with copy on the artwork. */
.original-lead{display:block;position:relative;isolation:isolate;background:#140a2a}
.original-lead>img{width:100%;height:auto;aspect-ratio:2.1;object-fit:cover;object-position:50% 12%;border-radius:0}
.original-lead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,5,28,.92),rgba(12,5,28,.72) 28%,transparent 58%),linear-gradient(0deg,rgba(12,5,28,.55),transparent 45%);pointer-events:none}
.original-lead>div{position:absolute;z-index:1;left:4.5%;bottom:8%;width:38%;max-width:440px;padding:0}
.original-lead .overline{color:#d9c8ff}
.original-lead h3{font-size:52px;line-height:1;letter-spacing:-.035em;margin-bottom:18px}
.original-lead p:not(.overline){color:#e2dce9;font-size:16px;line-height:1.65}

/* Cursor light and independent layers inside the existing boxes. */
.free-access{position:relative;isolation:isolate;background:linear-gradient(150deg,#126a46 0%,#0b4c31 55%,#062e21 100%);box-shadow:0 26px 50px -25px #083b2c66}
.free-access::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(440px circle at var(--mx,50%) var(--my,-40%),#a2f5c426,transparent 65%)}
.free-access img{width:210px;max-width:80%;height:auto;object-fit:contain;filter:drop-shadow(0 2px 8px #00251544)}
.free-access .free-number{font-weight:600;letter-spacing:-.06em}
.free-access>*,.audience-art img,.studio-art img,.rights-art>span{transition:transform .55s var(--detail-ease),translate .6s var(--detail-ease)}
@media(hover:hover) and (pointer:fine){
 .catalogue-visual:hover img{scale:1.025}
 .free-access>img{transform:translate(calc(var(--px,0px)*.7),calc(var(--py,0px)*.7))}
 .free-access .free-number{transform:translate(calc(var(--px,0px)*1.3),calc(var(--py,0px)*1.3))}
 .free-access .access-label,.free-access .access-note{transform:translate(calc(var(--px,0px)*.4),calc(var(--py,0px)*.4))}
 .audience-art img:nth-child(odd),.studio-art img:first-child{transform:translate(calc(var(--px,0px)*-.8),calc(var(--py,0px)*-.8))}
 .audience-art img:nth-child(even),.studio-art img:last-child{transform:translate(var(--px,0px),var(--py,0px))}
 .rights-art>span{transform:translate(var(--px,0px),var(--py,0px))}
}
@media(max-width:1100px){
 .opening h1{font-size:68px}h2,.filmmaker-opening h2{font-size:46px}
 .original-lead h3{font-size:40px}.original-lead>div{width:43%;bottom:7%}.original-lead p:not(.overline){font-size:15px}
}
@media(max-width:800px){
 body{font-size:16px}.opening h1{font-size:46px}h2,.filmmaker-opening h2{font-size:36px;line-height:1.08}
 .discovery-close{font-size:28px}.orbit-ambient{height:360px}
 .original-lead>img{aspect-ratio:1600/893;object-fit:contain;object-position:center}
 .original-lead::after{display:none}
 .original-lead>div{position:static;max-width:none;width:auto;padding:28px}
 .original-lead h3{font-size:32px}.original-lead p:not(.overline){font-size:16px}
 .free-access img{width:185px}
}
@media(max-width:540px){.opening h1{font-size:40px}.discovery-close{text-align:left}.original-lead>div{padding:27px}}
@media(prefers-reduced-motion:reduce){
 .js-ready .reveal,.js-ready .reveal.visible{opacity:1;translate:none;transform:none;transition:none}
 [data-depth],.js-ready [data-depth].reveal,.js-ready [data-depth].reveal.visible{transform:none!important;transition:none!important}
 .free-access>*,.audience-art img,.studio-art img,.rights-art>span,.catalogue-visual img{transform:none!important;transition:none!important;scale:1!important}
.orbit-ambient img{transition:none}
}

/* Follow-up: a wider canvas, V2's dark palette and reversible scroll scale. */
@media(min-width:1101px){.shell{width:min(1360px,calc(100% - 96px))}}
.television img{transform-origin:50% 40%}
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .television img{animation:tv-grow linear both;animation-timeline:view();animation-range:entry 5% cover 42%}
  @keyframes tv-grow{from{scale:.76;border-radius:32px}to{scale:1;border-radius:24px}}
 }
}
.filmmaker-world,.contact-chapter{background:#0a0f0c;color:#f3f6f4}
.film-card{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.film-card[data-depth]:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 28px 55px #00000040}
.film-card::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(255,255,255,.09),transparent 65%)}
.discovery-card{background:linear-gradient(180deg,#0f2a1d,#0b1a13)}
.broadcast-art{background:none}
.broadcast-art>strong{color:#eef6f1}
.broadcast-art>strong>span{color:#3f8a64}
.broadcast-label{color:var(--mint)}
.broadcast-label i{background:var(--mint);box-shadow:none}
.viewing-modes>span{background:transparent;color:#f3f6f4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.film-card-copy p:not(.card-kicker){color:#a2ada6}
.press-art span{color:#f3f6f4}.press-art span:nth-child(even){color:#66716b}
.rights-art>span{background:rgba(255,255,255,.06);color:#f3f6f4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.contact-chapter .overline,.contact-chapter h2 span{color:var(--mint)}
.contact-chapter h2{font-size:112px;line-height:.94;letter-spacing:-.05em}
.contact-layout h2+p{font-size:19px;line-height:1.5;color:#a2ada6}
.contact-email{font-family:var(--display);font-weight:600;font-size:30px;color:#f3f6f4;border-bottom-color:var(--mint)}
.contact-email:hover{color:var(--mint)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .audience-card:hover .audience-art img:nth-child(odd){translate:0 -14px}
 .audience-card:hover .audience-art img:nth-child(even){translate:0 14px}
 .studio-card:hover .studio-art img:first-child{translate:-7px -31px}
 .studio-card:hover .studio-art img:last-child{translate:7px 31px}
 .rights-card:hover .rights-art>span:first-child{translate:14px 0}
 .rights-card:hover .rights-art>span:last-child{translate:-14px 0}
 .broadcast-art>strong{transform:translate(var(--px,0px),var(--py,0px));transition:transform .45s var(--detail-ease)}
}
@media(max-width:1100px){.contact-chapter h2{font-size:84px}.contact-email{font-size:26px}}
@media(max-width:800px){.contact-chapter h2{font-size:64px}.contact-email{font-size:22px}}

/* Three studio titles within the existing filmmaker card. */
.studio-art{display:block;position:relative;height:250px;padding:0}
.studio-art img{position:absolute;width:58%;height:auto;max-height:none;object-fit:contain;border-radius:8px}
.studio-art img:nth-child(1){left:6%;top:26px;translate:none;z-index:1}
.studio-art img:nth-child(2){right:6%;top:76px;translate:none;z-index:2}
.studio-art img:nth-child(3){left:12%;top:132px;translate:none;z-index:3}
.studio-card:hover .studio-art img:nth-child(n){translate:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .studio-card:hover .studio-art img:nth-child(1){translate:-5px -5px}
 .studio-card:hover .studio-art img:nth-child(2){translate:5px 0}
 .studio-card:hover .studio-art img:nth-child(3){translate:-3px 5px}
 .studio-art img:nth-child(2){transform:translate(var(--px,0px),var(--py,0px))}
 .studio-art img:nth-child(3){transform:translate(calc(var(--px,0px)*-.5),calc(var(--py,0px)*-.5))}
}
@media(min-width:1550px){.studio-art{height:275px}}
@media(max-width:540px){.studio-art{height:260px}}