/* Gallery 2: native scroll drives a camera through a field of monochrome film stills.
   These styles belong only to the separate experiment, never to films.html. */
body.films-universe-trial .site-header{background:linear-gradient(#050505ed,#05050500);border-bottom-color:transparent}
body.films-universe-trial .site-header.scrolled{background:#050505e8;border-bottom-color:#ffffff0c}
.fu-hero{--fu-pad:clamp(22px,4vw,76px);position:relative;isolation:isolate;background:#050505;color:#efeee8}
.fu-viewport{position:relative;min-height:100svh;padding:140px var(--fu-pad) 100px;overflow:hidden;isolation:isolate}
#films-universe-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;filter:grayscale(1)}
.fu-viewport::after{content:"";position:absolute;z-index:3;inset:0;background:url('assets/grain.svg') repeat;background-size:190px;opacity:.055;pointer-events:none}
.fu-horizon{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(#05050555,transparent 18%,transparent 84%,#050505aa),radial-gradient(ellipse at 50% 48%,transparent 45%,#0505054d 100%)}
.fu-title{position:relative;z-index:4;margin:0 0 50px;font-size:clamp(38px,5vw,74px);font-weight:400;line-height:1;letter-spacing:-.045em}
.fu-stage{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px;align-items:center}
.fu-card{display:block;position:relative;min-width:0;color:#efeee8;text-decoration:none;-webkit-user-drag:none;outline-offset:8px}
.fu-card[data-fu-echo]{display:none}
.fu-image{position:relative;display:block;aspect-ratio:16/9;background:#111;overflow:hidden}
.fu-image img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.91) contrast(1.08);transition:filter .45s ease;-webkit-user-drag:none}
.fu-card--portrait{width:62%;justify-self:center}
.fu-card--portrait .fu-image{aspect-ratio:9/16}
.fu-card--scope .fu-image{aspect-ratio:2.35/1}
.fu-card-title{display:block;margin-top:12px;font-size:10px;font-weight:400;letter-spacing:.09em;line-height:1.4;text-shadow:0 2px 16px #000;color:#e6e6e0}
.fu-card:hover .fu-image img,.fu-card:focus-visible .fu-image img{filter:grayscale(1) brightness(1.04) contrast(1.08)}
.fu-card:focus-visible{outline:1px solid #efeee8}
.fu-bottom{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:60px;font-size:8px;letter-spacing:.14em}
.fu-bottom>a{display:flex;align-items:center;gap:18px;min-height:44px}
.fu-bottom>a span{font-size:16px}
.fu-scroll-hint{display:flex;align-items:center;gap:14px;margin:0;color:#a8a8a2;font-size:7px;letter-spacing:.17em}
.fu-scroll-hint b{font-size:18px;line-height:1;font-weight:300;color:#dadad4}
.fu-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The long wrapper supplies real document scroll; there is no wheel interception. */
.fu-hero.is-ready{height:760svh}
.fu-hero.is-ready .fu-viewport{position:sticky;top:0;height:100svh;min-height:0;padding:0}
.fu-hero.is-ready .fu-title{position:absolute;left:var(--fu-pad);bottom:43px;font-size:11px;letter-spacing:.18em;line-height:1;margin:0}
.fu-hero.is-ready .fu-stage{position:absolute;inset:0;display:block;perspective:900px;perspective-origin:50% 48%;transform-style:preserve-3d}
.fu-hero.is-ready .fu-card{position:absolute;display:block;left:50%;top:48%;width:min(46vw,720px);transform-origin:center center;backface-visibility:hidden;will-change:transform,opacity}
.fu-hero.is-ready .fu-card--portrait{width:min(27vw,365px)}
.fu-hero.is-ready .fu-card-title{font-size:12px;opacity:var(--fu-title-opacity,1);transition:opacity .25s}
.fu-hero.is-ready .fu-card:hover .fu-card-title,.fu-hero.is-ready .fu-card:focus-visible .fu-card-title{opacity:1}
.fu-hero.is-ready .fu-bottom{position:absolute;left:var(--fu-pad);right:var(--fu-pad);bottom:26px;margin:0;justify-content:flex-end}
.fu-hero.is-ready .fu-scroll-hint{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.fu-hero.is-ready .fu-bottom>a{font-size:8px;letter-spacing:.13em}
.fu-hero.is-ready .fu-card:focus-visible{width:min(70vw,620px);opacity:1!important;pointer-events:auto!important;z-index:1000}
.fu-hero.is-ready .fu-card--portrait:focus-visible{width:min(42vw,260px,30svh)}
.fu-hero.is-ready .fu-card:focus-visible .fu-image{max-height:65svh}
.fu-hero.is-ready .fu-card:focus-visible .fu-image img{object-fit:contain}
.fu-hero.is-selecting .fu-card:not(:focus-visible){opacity:.06!important;pointer-events:none!important}
.fu-hero.is-idle .fu-card{will-change:auto}
@media(max-width:1000px){.fu-viewport{padding-top:120px}.fu-stage{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .fu-viewport{padding:115px var(--fu-pad) 70px}
  .fu-title{font-size:48px;margin-bottom:35px}
  .fu-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .fu-card-title{font-size:8px;letter-spacing:.05em}
  .fu-card--portrait{width:76%}
  .fu-hero.is-ready{height:680svh}
  .fu-hero.is-ready .fu-card{width:82vw}
  .fu-hero.is-ready .fu-card--portrait{width:46vw}
  .fu-hero.is-ready .fu-card-title{font-size:10px}
  .fu-hero.is-ready .fu-title{bottom:42px;font-size:9px}
  .fu-hero.is-ready .fu-scroll-hint{font-size:6px;gap:7px;bottom:65px}
  .fu-hero.is-ready .fu-bottom>a{font-size:7px;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .fu-hero.is-ready{height:auto}
  .fu-hero.is-ready .fu-viewport{position:relative;height:auto;min-height:100svh;padding:140px var(--fu-pad) 80px}
  .fu-hero.is-ready .fu-title{position:relative;left:auto;bottom:auto;font-size:44px;letter-spacing:-.04em;margin:0 0 45px}
  .fu-hero.is-ready .fu-stage{position:relative;inset:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px 25px;perspective:none;transform-style:flat}
  .fu-hero.is-ready .fu-card{position:relative;left:auto;top:auto;width:100%;transform:none!important;opacity:1!important;pointer-events:auto!important;will-change:auto}
  .fu-hero.is-ready .fu-card--portrait{width:62%}
  .fu-hero.is-ready .fu-card[data-fu-echo]{display:none}
  .fu-hero.is-ready .fu-card-title{opacity:1!important;font-size:10px}
  .fu-hero.is-ready .fu-bottom{position:relative;inset:auto;margin-top:45px}
  .fu-hero.is-ready .fu-scroll-hint{display:none}
  .fu-card *{transition:none!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.fu-hero.is-ready .fu-viewport{padding-top:115px}.fu-hero.is-ready .fu-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.fu-hero.is-ready .fu-card--portrait{width:76%}.fu-hero.is-ready .fu-card-title{font-size:8px}}