/* NEW ERA 137 — cinematic hero, header and film-ribbon intro.
   Historical image = the past. Interface = the future. */
:root{
  --ink:#07131e;--ink-2:#0a1924;--ivory:#f4f0e7;--ivory-70:rgba(244,240,231,.7);--ivory-50:rgba(244,240,231,.5);
  --gold-1:#d9b56d;--gold-2:#e7c77e;--hair:rgba(255,255,255,.15);--glass:rgba(10,25,36,.42);
  --display:'Cormorant Garamond',EraSerif,Georgia,serif;--ui:Inter,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --gx:clamp(20px,5.6vw,96px);--ease:cubic-bezier(.22,.61,.36,1);--intro:0s
}
:root:not([data-theme=light]){--bg:#07131e;--surface:#0d1e2a;--text:#f4f0e7;--muted:rgba(244,240,231,.7);--gold:#d9b56d;--line:rgba(255,255,255,.13);--header:rgba(7,19,30,.82)}
.has-intro{--intro:15.5s}.has-intro.intro-lite{--intro:0s}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.site-header{height:96px;padding-inline:var(--gx);font-family:var(--ui);border-bottom:0;background:transparent}
:root .site-header:not(.scrolled){color:var(--ivory);background:linear-gradient(180deg,rgba(4,11,18,.55),transparent);border:0}
.site-header.scrolled{height:76px;background:rgba(7,19,30,.94);border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme=light] .site-header.scrolled{background:rgba(243,240,231,.96)}
:root:not([data-theme=light]) .site-header.scrolled{color:var(--ivory)}
.wordmark>span{font-family:var(--display);font-weight:500;font-size:25px;letter-spacing:.24em}
.wordmark small{font-family:var(--display);font-weight:500;font-size:17px}
.main-nav{gap:6px;font-size:14px;font-weight:500;letter-spacing:.01em;padding:5px;border-radius:999px}
.main-nav a{padding:10px 22px;border-radius:999px;border:1px solid transparent;color:var(--ivory-70);transition:color .3s,background .3s,border-color .3s}
.site-header.scrolled .main-nav a{color:inherit;opacity:.78}
.main-nav a:after{display:none}
.main-nav a:hover{color:var(--ivory);background:rgba(255,255,255,.05)}
.main-nav a.is-active{color:var(--ivory);opacity:1;border-color:var(--hair);background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-theme=light] .site-header.scrolled .main-nav a.is-active,[data-theme=light] .site-header.scrolled .main-nav a:hover{color:var(--text);border-color:var(--line);background:rgba(0,0,0,.04)}
.header-controls{gap:14px}
.site-header .icon-button{width:46px;height:46px;border-color:var(--hair);background:rgba(255,255,255,.03)}
.search-toggle{border-color:transparent!important;background:transparent!important;backdrop-filter:none!important}
.site-header .icon-button svg{width:20px;height:20px}
.language-trigger{font-family:var(--ui);font-weight:500;font-size:13px}

/* ---------- Hero frame ---------- */
.hero{height:auto;min-height:max(100svh,700px);max-height:none;background:var(--ink);color:var(--ivory);font-family:var(--ui)}
[data-theme=light] .hero{background:var(--ink);color:var(--ivory)}
.hero-art{z-index:-5;overflow:hidden}
.hero-art .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 38%;filter:saturate(.92) contrast(1.06) brightness(.92);transform-origin:72% 40%;animation:hero-push 14s var(--ease) var(--intro) both}
@keyframes hero-push{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.hero .hero-shade,[data-theme=light] .hero .hero-shade{z-index:-4;background:
  linear-gradient(90deg,rgba(7,19,30,.97) 0%,rgba(7,19,30,.9) 24%,rgba(7,19,30,.62) 38%,rgba(7,19,30,.16) 52%,transparent 62%),
  linear-gradient(0deg,#07131e 0%,rgba(7,19,30,.88) 14%,rgba(7,19,30,.25) 34%,transparent 48%),
  linear-gradient(180deg,rgba(4,11,18,.6) 0%,transparent 18%),
  radial-gradient(ellipse 120% 100% at 70% 40%,transparent 55%,rgba(3,9,15,.55) 100%)}
.hero-haze{position:absolute;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(ellipse 38% 30% at 26% 36%,rgba(231,199,126,.13),transparent 70%),
  radial-gradient(ellipse 50% 22% at 58% 64%,rgba(255,226,180,.08),transparent 70%)}
@keyframes haze-drift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(3%,-2%,0)}}
.hero .film-grain,[data-theme=light] .hero .film-grain{opacity:.06;z-index:1}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,2%)}}
.hero #dust{z-index:1}
.hero-inner{position:relative;z-index:2;min-height:max(100svh,700px);display:flex;flex-direction:column;padding:120px var(--gx) clamp(22px,3.4vh,40px)}

/* ---------- Copy ---------- */
.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:min(46%,700px);padding-block:clamp(8px,3vh,40px)}
.hero-kicker{font-size:12px;font-weight:500;letter-spacing:.42em;color:var(--ivory-70);margin-bottom:clamp(18px,3vh,30px);display:flex;align-items:center;gap:16px}
.hero-kicker:before{content:'';width:34px;height:1px;background:linear-gradient(90deg,var(--gold-1),transparent);flex-shrink:0}
.hero h1,[data-theme=light] .hero h1{font-family:var(--display);font-weight:500;font-size:clamp(52px,min(6.5vw,12.2vh),124px);line-height:.92;letter-spacing:-.022em;color:var(--ivory);text-wrap:balance}
.hero h1>span,.hero h1>em{display:block}
.hero h1 em,[data-theme=light] .hero h1 em{font-style:italic;font-weight:500;font-size:1em;margin-top:.04em;padding-right:.08em;color:var(--gold-1);background:linear-gradient(100deg,#c99f55 0%,#e7c77e 38%,#f3dca6 52%,#d9b56d 70%,#b88d48 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rise 1.1s var(--ease) calc(var(--intro) + .32s) both}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hero-lede,[data-theme=light] .hero .hero-lede{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--ivory-70);max-width:470px;margin-top:clamp(18px,3vh,30px);font-weight:400;text-shadow:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,4vh,40px)}
.pill{display:inline-flex;align-items:center;gap:14px;height:62px;padding:0 32px 0 26px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.005em;white-space:nowrap;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s,border-color .4s}
.pill svg{width:19px;height:19px;flex-shrink:0}
.pill-gold{color:#14140f;background:linear-gradient(135deg,#f0d491 0%,#e7c77e 35%,#d9b56d 70%,#c49a55 100%);box-shadow:0 10px 30px -8px rgba(217,181,109,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.pill-gold svg{fill:currentColor;stroke:none}
.pill-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(231,199,126,.75),inset 0 1px 0 rgba(255,255,255,.6)}
.pill-glass{color:var(--ivory);border:1px solid rgba(255,255,255,.22);background:rgba(10,25,36,.35);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.pill-glass:hover{transform:translateY(-2px);border-color:rgba(231,199,126,.55);background:rgba(10,25,36,.55)}
.pill:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}

/* ---------- Film rail ---------- */
.hero-rail{margin-top:auto;padding-top:12px}
.rail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rail-head h2{font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1;color:var(--ivory);display:flex;align-items:center;gap:12px}
.rail-head h2:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold-1);box-shadow:0 0 12px var(--gold-1)}
.rail-nav{display:flex;align-items:center;gap:8px}
.rail-count{font-size:12px;letter-spacing:.14em;color:var(--ivory-50);margin-inline-end:10px;font-variant-numeric:tabular-nums}
.rail-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ivory);border:1px solid var(--hair);background:rgba(10,25,36,.6);transition:background .3s,border-color .3s,opacity .3s}
.rail-arrow svg{width:18px;height:18px;stroke-width:1.6}
.rail-arrow:hover:not(:disabled){border-color:rgba(231,199,126,.6);background:rgba(217,181,109,.14)}
.rail-nav.is-static{visibility:hidden}.rail-arrow:disabled{opacity:.32;cursor:default}
[dir=rtl] .rail-arrow svg{transform:scaleX(-1)}
.rail-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px var(--gx) 14px 6px;margin:-12px calc(var(--gx) * -1) -14px -6px;scroll-padding-inline:6px}
.rail-track::-webkit-scrollbar{display:none}
.rail-card{position:relative;flex:0 0 clamp(236px,calc((100vw - 2 * var(--gx) - 64px) / 4.45),360px);aspect-ratio:16/10;border-radius:16px;overflow:hidden;isolation:isolate;scroll-snap-align:start;border:1px solid rgba(255,255,255,.14);background:var(--ink-2);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;animation:rise .9s var(--ease) calc(var(--intro) + .6s + var(--i) * .08s) both}
.rail-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.8) saturate(.92);transform:scale(1.02);transition:filter .5s var(--ease),transform .8s var(--ease)}
.rail-card:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,13,20,.92) 0%,rgba(5,13,20,.45) 38%,transparent 66%);pointer-events:none}
.rail-card:first-child{border-color:rgba(217,181,109,.5)}
.rail-hit{position:absolute;inset:0;z-index:2;background:transparent;border-radius:inherit}
.rail-hit:focus-visible{outline:2px solid var(--gold-2);outline-offset:-3px}
.rail-meta{position:absolute;inset:auto 64px 16px 18px;z-index:1;pointer-events:none}
.rail-meta h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.5vw,26px);line-height:1.02;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory);text-wrap:balance}
.rail-watch{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--gold-2);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);height:0}
.rail-watch .arrow{font-size:14px}
[dir=rtl] .rail-watch .arrow{transform:scaleX(-1)}
.rail-play{position:absolute;inset:auto 14px 14px auto;z-index:3;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ivory);border:1px solid rgba(255,255,255,.55);background:rgba(7,19,30,.5);transition:background .35s,border-color .35s,color .35s,transform .35s var(--ease)}
.rail-play svg{width:17px;height:17px;fill:currentColor;stroke:none;transform:translateX(1px)}
[dir=rtl] .rail-play{inset:auto auto 14px 14px}[dir=rtl] .rail-meta{inset:auto 18px 16px 64px}
@media(hover:hover){
  .rail-card:hover{transform:translateY(-4px) scale(1.04);border-color:rgba(231,199,126,.6);box-shadow:0 26px 50px -18px rgba(0,0,0,.9),0 0 0 1px rgba(231,199,126,.15)}
  .rail-card:hover img{filter:brightness(1.04) saturate(1.05);transform:scale(1.07)}
  .rail-card:hover .rail-watch{opacity:1;transform:none;height:auto}
  .rail-card:hover .rail-play{background:var(--gold-1);border-color:var(--gold-1);color:#14140f}
}
.rail-card:focus-within .rail-watch{opacity:1;transform:none;height:auto}
.rail-play:hover{transform:scale(1.08)}
.rail-play:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

/* ---------- Entrance choreography ---------- */
@keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.hero-kicker{animation:rise 1s var(--ease) calc(var(--intro) + .1s) both}
.hero h1>span{animation:rise 1.1s var(--ease) calc(var(--intro) + .2s) both}
.hero-lede{animation:rise 1s var(--ease) calc(var(--intro) + .44s) both}
.hero-cta{animation:rise 1s var(--ease) calc(var(--intro) + .54s) both}
.rail-head{animation:rise .9s var(--ease) calc(var(--intro) + .5s) both}
.has-intro .site-header{animation:fade-in 1s ease 15.3s both}
.has-intro .site-header .wordmark{visibility:hidden}

/* ---------- Search ---------- */
.search-dialog{width:min(640px,92vw);margin:12vh auto auto;padding:0;border-radius:20px;border:1px solid var(--hair);background:rgba(8,20,30,.88);color:var(--ivory);font-family:var(--ui);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 40px 100px -20px rgba(0,0,0,.8);overflow:hidden}
.search-dialog::backdrop{background:rgba(3,9,15,.6);backdrop-filter:blur(6px)}
.search-dialog[open]{animation:rise .4s var(--ease)}
.search-box{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 20px;border-bottom:1px solid var(--hair)}
.search-icon svg{width:20px;height:20px;color:var(--gold-1)}
#search-input{flex:1;height:56px;background:transparent;border:0;color:inherit;font:inherit;font-size:17px;outline:0}
#search-input::placeholder{color:var(--ivory-50)}
#search-input::-webkit-search-cancel-button{display:none}
.search-close{font-size:11px;letter-spacing:.1em;padding:7px 10px;border-radius:8px;border:1px solid var(--hair);background:transparent;color:var(--ivory-70)}
.search-results{list-style:none;margin:0;padding:8px;max-height:60vh;overflow:auto}
.search-hit{width:100%;display:flex;align-items:center;gap:16px;padding:10px;border-radius:12px;background:transparent;text-align:start;transition:background .25s}
.search-hit:hover,.search-hit:focus-visible{background:rgba(255,255,255,.06);outline:0}
.search-hit img{width:96px;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.search-hit>span:not(.arrow){flex:1;display:flex;flex-direction:column}
.search-hit strong{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.search-hit small{font-size:12px;color:var(--ivory-50)}
.search-hit .arrow{color:var(--gold-1);font-size:18px}
.search-empty{padding:26px;text-align:center;color:var(--ivory-50)}

/* ---------- RTL ---------- */
[dir=rtl] .hero-art .hero-photo{transform-origin:28% 40%;scale:-1 1}
[dir=rtl] .hero .hero-shade{background:linear-gradient(270deg,rgba(7,19,30,.97) 0%,rgba(7,19,30,.9) 24%,rgba(7,19,30,.62) 38%,rgba(7,19,30,.16) 52%,transparent 62%),linear-gradient(0deg,#07131e 0%,rgba(7,19,30,.88) 14%,rgba(7,19,30,.25) 34%,transparent 48%),linear-gradient(180deg,rgba(4,11,18,.6) 0%,transparent 18%)}
[dir=rtl] .hero-kicker:before{background:linear-gradient(270deg,var(--gold-1),transparent)}
[dir=rtl] .rail-track{padding:12px 6px 14px var(--gx);margin:-12px -6px -14px calc(var(--gx) * -1)}
[dir=rtl] .hero h1,[dir=rtl] .hero-kicker{letter-spacing:0}

/* ---------- Responsive ---------- */
@media(min-width:1800px){.hero-copy{max-width:760px}}
@media(max-width:1100px){
  .hero-copy{max-width:58%}
  .hero h1{font-size:clamp(52px,7.4vw,92px)}
  .rail-card{flex-basis:calc((100vw - 2 * var(--gx) - 32px) / 3.1)}
  .main-nav a{padding:9px 16px}
}
@media(max-width:860px) and (min-width:761px){.hero-copy{max-width:72%}}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .site-header{height:76px}
  .site-header .icon-button{width:40px;height:40px}
  .header-controls{gap:4px}
  .hero-inner{padding-top:max(36vh,250px);min-height:0}
  .hero{min-height:0}
  .hero-art{bottom:auto;height:min(78vh,640px)}
  .hero-art .hero-photo{object-position:74% 30%;transform-origin:74% 30%}
  .hero .hero-shade{bottom:auto;height:min(78vh,640px);background:linear-gradient(0deg,#07131e 0%,rgba(7,19,30,.9) 22%,rgba(7,19,30,.35) 46%,transparent 64%),linear-gradient(180deg,rgba(4,11,18,.7) 0%,transparent 22%)}
  [dir=rtl] .hero .hero-shade{background:linear-gradient(0deg,#07131e 0%,rgba(7,19,30,.9) 22%,rgba(7,19,30,.35) 46%,transparent 64%),linear-gradient(180deg,rgba(4,11,18,.7) 0%,transparent 22%)}
  .hero-copy{max-width:none;padding-block:0 8px}
  .hero-kicker{font-size:10px;letter-spacing:.3em;gap:12px}
  .hero-kicker:before{width:22px}
  .hero h1{font-size:clamp(44px,13.2vw,66px)}
  .hero-lede{font-size:15px}
  .hero-cta{gap:10px}
  .pill{height:54px;padding:0 22px 0 18px;font-size:14px;gap:10px}
  .hero-rail{margin-top:26px}
  .hero-lede{margin-top:14px}.hero-cta{margin-top:20px}
  .rail-card{flex-basis:72vw;border-radius:14px}
  .rail-meta h3{font-size:22px}
  .rail-count{display:none}
  .rail-arrow{width:40px;height:40px}
  .rail-watch{opacity:1;transform:none;height:auto}
}
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){.hero-inner{padding-top:max(44vh,300px)}.hero h1{font-size:clamp(60px,10vw,96px)}.hero-copy{max-width:640px}.rail-card{flex-basis:calc((100vw - 2 * var(--gx) - 32px) / 2.6)}.rail-count{display:inline}.hero-art,.hero .hero-shade{height:min(70vh,820px)}}
@media(max-width:560px){.main-nav{display:none}.wordmark{min-width:0}}
@media(max-width:400px){.pill{flex:1 1 100%;justify-content:center;height:50px}}
@media(max-height:720px) and (min-width:761px){.hero-inner{padding-top:100px}.hero h1{font-size:clamp(48px,min(6vw,11vh),100px)}.pill{height:54px}.rail-card{aspect-ratio:16/9}}

@media(prefers-reduced-motion:reduce){
  .hero-art .hero-photo,.hero-haze,.hero .film-grain,.hero h1 em{animation:none}
  .hero-kicker,.hero h1>span,.hero-lede,.hero-cta,.rail-head,.rail-card{animation:none}
  .rail-card,.rail-card img{transition:none}
}

/* ---------- Pinned film gallery (desktop) ---------- */
.hero-sticky{position:relative;min-height:inherit}
.hero.is-pinned{min-height:0;height:calc(100svh * (1 + var(--pin,3)));overflow:visible}
.hero.is-pinned .hero-sticky{position:sticky;top:0;height:100svh;min-height:0;overflow:hidden}
.hero.is-pinned .hero-inner{height:100%;min-height:0}
.hero-sticky:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(6,19,29,.72),rgba(4,11,18,.94));opacity:var(--g,0)}
.hero.is-pinned .hero-copy{opacity:calc(1 - var(--g,0) * 1.6);transform:translate3d(0,calc(var(--g,0) * -70px),0)}
.hero.is-pinned .rail-head{opacity:calc(1 - var(--g,0) * 2.4);animation:none}
.hero.is-pinned .hero-art .hero-photo{opacity:calc(1 - var(--g,0) * .35)}
.hero.is-pinned .hero-rail{position:static}
.hero.is-pinned .rail-track{overflow:visible;position:static;scroll-snap-type:none;padding:0;margin:0}
.hero.is-pinned .rail-card{position:absolute;left:0;top:0;flex:none;margin:0;animation:none;will-change:transform,width,height;transition:border-color .45s,box-shadow .45s;contain:layout paint}
.hero.is-pinned .hero-rail{animation:fade-in 1s var(--ease) calc(var(--intro) + .6s) both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.hero.is-pinned .rail-card img{transform:none}
.hero.is-pinned .rail-card:hover{transform:none}
.hero.is-pinned .rail-card.is-current{border-color:rgba(231,199,126,.55);box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(231,199,126,.12)}
.hero.is-pinned .rail-card:first-child:not(.is-current){border-color:rgba(255,255,255,.14)}
.hero.is-pinned .rail-card:first-child{border-color:rgba(217,181,109,.5)}
.hero.is-pinned .rail-card{border-radius:calc(16px + var(--t,0) * 8px)}
.hero.is-pinned .rail-meta{inset:auto calc(64px + var(--t,0) * 40px) calc(16px + var(--t,0) * 26px) calc(18px + var(--t,0) * 26px)}
.hero.is-pinned .rail-meta h3{font-size:calc(clamp(19px,1.5vw,26px) + var(--t,0) * 2.6vw);letter-spacing:calc(.06em + var(--t,0) * .04em)}
.hero.is-pinned .rail-play{width:calc(42px + var(--t,0) * 22px);height:calc(42px + var(--t,0) * 22px);inset:auto calc(14px + var(--t,0) * 18px) calc(14px + var(--t,0) * 18px) auto}
.gallery-hud{position:absolute;z-index:4;left:50%;bottom:30px;transform:translate3d(-50%,calc((1 - var(--g,0)) * 30px),0);display:none;align-items:center;gap:22px;padding:8px 8px 8px 24px;border-radius:999px;border:1px solid var(--hair);background:rgba(10,25,36,.7);opacity:clamp(0,calc(var(--g,0) * 3 - 2),1);white-space:nowrap}
.hero.is-pinned .gallery-hud{display:flex}
.hud-count{font-size:12px;letter-spacing:.16em;color:var(--gold-2);font-variant-numeric:tabular-nums}
.hud-genre{font-size:13px;color:var(--ivory-70)}
.hud-open{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;background:var(--gold-1);color:#14140f;font-size:13px;font-weight:600}
.hud-open .arrow{font-size:16px}
.hud-open:hover{background:var(--gold-2)}
.rail-nav{position:relative;z-index:5}
/* Pinned gallery on phones and portrait tablets */
@media(max-aspect-ratio:1/1){
  .hero.is-pinned .rail-meta h3{font-size:calc(19px + var(--t,0) * 14px)}
  .hero.is-pinned .rail-meta{inset:auto calc(60px + var(--t,0) * 10px) calc(16px + var(--t,0) * 8px) calc(16px + var(--t,0) * 6px)}
  .hero.is-pinned .rail-play{width:calc(40px + var(--t,0) * 12px);height:calc(40px + var(--t,0) * 12px);inset:auto calc(12px + var(--t,0) * 6px) calc(12px + var(--t,0) * 6px) auto}
  .gallery-hud{bottom:22px;gap:12px;padding:6px 6px 6px 18px}
  .hud-genre{display:none}
}