body.video-page, .video-page a, .video-page button, .video-page video { cursor: auto; }
.video-page { background: #030303; }
.video-main { max-width: 1600px; margin: auto; padding: 108px 0 28px; }
.video-head, .video-categorybar, .vrail__controls, .video-cta, .video-empty { width: calc(100% - var(--pad-x) * 2); margin-inline: auto; }
.video-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.video-eyebrow { display: flex; align-items: center; gap: 9px; color: #969696; font-size: 9px; letter-spacing: .22em; margin-bottom: 14px; }
.video-eyebrow span { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; }
.video-head h1 { font-size: clamp(34px, 4.3vw, 66px); font-weight: 650; line-height: 1.08; letter-spacing: -.065em; white-space: nowrap; }
.video-head h1 em { font-style: normal; color: #777; font-weight: 400; }
.video-head__aside { flex: 0 1 268px; padding-bottom: 3px; }
.video-head__aside p { color: #888; font-size: 12px; line-height: 1.7; }
.video-head__aside a { display: inline-block; font-size: 10px; margin-top: 9px; color: #ddd; }
.video-head__aside a:hover { color: #fff; }
.video-categorybar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 29px; }
.vfilters { display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid #242424; border-radius: 30px; max-width: 100%; }
.vfilters button { min-height: 37px; padding: 0 17px; white-space: nowrap; border-radius: 24px; color: #999; font-size: 11px; transition: color .2s, background .2s, box-shadow .2s; }
.vfilters button:hover { color: #fff; background: #151515; }
.vfilters button[aria-pressed="true"] { color: #080808; background: #f5f5f5; box-shadow: 0 0 20px #ffffff24, inset 0 0 0 1px #fff; }
.vfilters__count { font-size: 9px; margin-left: 7px; opacity: .5; }
.video-categorybar__label { color: #555; font-size: 8px; letter-spacing: .22em; }
.vrail { position: relative; height: 512px; isolation: isolate; overflow: hidden; margin-top: 2px; }
.vrail[hidden], [hidden].vrail__controls, .video-empty[hidden], .vplayer__error[hidden] { display: none; }
.vrail__atmosphere { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 34% 54% at 50% 55%, #ffffff07, transparent 90%); }
.vrail__orbit { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #ffffff0e; stroke-width: .8; transform: rotate(-7deg); }
.vrail__orbit ellipse:first-child { stroke: #ffffff1e; }
.vrail__scroller { position: absolute; inset: 0; perspective: 1100px; touch-action: pan-y; user-select: none; }
.vrail__floor { position: absolute; bottom: 6px; left: 50%; width: 600px; max-width: 90%; height: 30px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, #ffffff0c, transparent 65%); pointer-events: none; z-index: -1; }
.vcard { position: absolute; left: 50%; top: 50%; width: 270px; height: 480px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.15,1), opacity .6s, filter .6s; will-change: transform; }
.vcard__media { width: 100%; height: 100%; border-radius: 15px; border: 1px solid #ffffff2e; background: #141414; overflow: hidden; box-shadow: 0 14px 40px #000b, inset 0 0 0 1px #ffffff0b; }
.vcard video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.vcard::after { content: ''; position: absolute; inset: 0; border-radius: 15px; pointer-events: none; background: linear-gradient(110deg, #ffffff0c, transparent 40%, #0002); }
.vcard.is-current .vcard__media { border-color: #ffffff99; box-shadow: 0 0 0 4px #ffffff04, 0 0 40px #ffffff0b, 0 24px 46px #000; }
.vcard__open { position: absolute; inset: 0; z-index: 1; border-radius: 15px; text-align: left; background: linear-gradient(0deg, #000b, transparent 30%); }
.vcard__number { position: absolute; top: 12px; left: 13px; color: #fffd; font-size: 9px; letter-spacing: .12em; text-shadow: 0 1px 9px #000; }
.vcard__cat { position: absolute; bottom: 15px; left: 13px; color: #fff; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; max-width: 120px; text-shadow: 0 1px 8px #000; }
.vcard__play { position: absolute; right: 11px; bottom: 12px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #fff5; border-radius: 50%; background: #ffffff18; backdrop-filter: blur(8px); font-size: 9px; opacity: 0; transition: opacity .3s; }
.vcard.is-current .vcard__play { opacity: 1; }
.vcard__preview { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 10px; border: 1px solid #fff5; border-radius: 20px; background: #000c; font-size: 9px; color: #fff; }
.vcard__preview[hidden] { display: none; }
.vrail__controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 44px; margin-top: -4px; }
.vrail__readout { display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 10px; color: #888; }
#videoPosition { color: #ddd; font-variant-numeric: tabular-nums; min-width: 43px; }
#videoCurrentCategory { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrail__readout-line { width: 26px; height: 1px; flex-shrink: 0; background: #444; }
.vrail__hint { color: #595959; font-size: 10px; letter-spacing: .04em; }
.vrail__nav { position: absolute; top: 50%; z-index: 50; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 1px solid #ffffff35; color: #fff; background: linear-gradient(135deg, #ffffff0e, #ffffff03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 28px #0004; opacity: .72; transform: translateY(-50%); transition: opacity .2s, background .2s, box-shadow .2s, transform .2s; }
.vrail__nav--prev { left: clamp(12px, 2vw, 32px); }
.vrail__nav--next { right: clamp(12px, 2vw, 32px); }
.vrail__nav svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.video-page .vrail__nav, .video-page .vcard__open { cursor: pointer; }
.vrail__nav:hover, .vrail__nav:focus-visible { opacity: 1; background: #ffffff18; box-shadow: 0 0 24px #ffffff0e, 0 8px 28px #0005; transform: translateY(-50%) scale(1.06); }
.vrail__nav:active { transform: translateY(-50%) scale(.96); }
.vrail__nav[hidden] { display: none; }
.video-page button:focus-visible, .video-page a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.video-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 23px; padding-top: 22px; border-top: 1px solid #ffffff12; }
.video-cta p { color: #555; font-size: 9px; }
.video-cta p.video-cta__title { font-size: 13px; color: #aaa; margin-bottom: 5px; }
.video-cta .nav__cta { font-size: 9px; padding: 12px 19px; }
.video-empty { position: relative; min-height: 330px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: radial-gradient(ellipse at center, #ffffff06, transparent 68%); }
.video-empty__symbol { font-size: 54px; color: #505050; font-weight: 200; line-height: 1; margin-bottom: 20px; }
.video-empty h2 { color: #ddd; font-size: 23px; font-weight: 500; letter-spacing: -.03em; }
.video-empty p { max-width: 320px; font-size: 12px; color: #777; margin: 12px 0 22px; line-height: 1.7; }
.video-empty a { border-bottom: 1px solid #444; font-size: 11px; padding-bottom: 5px; }
.vplayer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 65px 20px 20px; border: 0; background: #050505f5; color: #fff; overflow: hidden; }
.vplayer::backdrop { background: #000d; backdrop-filter: blur(15px); }
.vplayer__top { position: absolute; top: 13px; left: 24px; right: 18px; display: flex; justify-content: space-between; align-items: center; color: #888; font-size: 11px; }
.vplayer__close { min-height: 40px; padding: 0 14px; border: 1px solid #fff3; border-radius: 22px; font-size: 11px; color: #ddd; }
.vplayer__frame { display: grid; place-items: center; width: 100%; height: 100%; }
.vplayer__frame video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 90px); object-fit: contain; background: #000; }
.vplayer__error { position: absolute; bottom: 30px; left: 20px; right: 20px; text-align: center; color: #ccc; font-size: 12px; }
body.video-page.media-open { overflow: hidden; }
@media (min-width: 1600px) { .vrail { height: 568px; } .vcard { width: 300px; height: 533px; } }
@media (max-width: 1050px) { .video-head__aside { flex-basis: 218px; } .video-head h1 { font-size: 44px; } }
@media (max-width: 760px) {
    .video-main { padding-top: 100px; }
    .video-head { display: block; }
    .video-head h1 { font-size: clamp(30px, 7.5vw, 48px); }
    .video-head__aside { display: flex; justify-content: space-between; gap: 18px; margin-top: 14px; align-items: baseline; }
    .video-head__aside p { max-width: 245px; font-size: 10px; }
    .video-head__aside a { margin: 0; white-space: nowrap; font-size: 9px; }
    .video-categorybar { margin-top: 22px; }
    .video-categorybar__label { display: none; }
    .vfilters { width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 25px; }
    .vfilters::-webkit-scrollbar { display: none; }
    .vfilters button { flex: 1 0 auto; padding: 0 11px; min-height: 36px; font-size: 10px; }
    .vfilters__count { margin-left: 4px; font-size: 8px; }
    .vrail { height: 470px; margin-top: 10px; }
    .vcard { width: min(62vw, 240px); height: min(110.223vw, 427px); }
    .vrail__orbit { width: 190%; max-width: none; left: -45%; }
    .vrail__controls { gap: 10px; }
    .vrail__hint { display: none; }
    .vrail__readout { font-size: 9px; gap: 9px; }
    .vrail__readout-line { width: 15px; }
    .video-cta { margin-top: 22px; padding-top: 19px; gap: 16px; }
    .video-cta p.video-cta__title { font-size: 11px; }
    .video-cta .nav__cta span:first-child { display: inline; }
    .video-cta .nav__cta { padding: 11px 12px; font-size: 8px; white-space: nowrap; }
}
@media (max-width: 380px) { .video-head h1 { font-size: 28px; } .video-head__aside p { max-width: 190px; } .vfilters button { padding-inline: 9px; } }
@media (prefers-reduced-motion: reduce) { .vcard, .vcard__play, .vfilters button, .vrail__nav { transition: none; } }
@media (max-width: 600px) {
    .video-page .nav__logo { gap: 5px; }
    .video-page .nav__logo-mark { width: 26px; height: 26px; }
    .video-page .nav__logo-text { font-size: 9px; letter-spacing: .14em; }
    .video-page .nav__right { gap: 10px; }
    .video-page .lang-switch__btn { padding: 6px 8px; font-size: 9px; }
    .video-page .nav > .nav__right > .nav__cta { padding: 10px 14px; }
    .vfilters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 23px; gap: 4px; overflow: visible; }
    .vfilters button { min-height: 44px; padding-inline: 8px; }
    .vrail__nav { width: 44px; height: 44px; opacity: .9; }
    .vrail__nav--prev { left: 8px; }
    .vrail__nav--next { right: 8px; }
    .vrail__nav svg { width: 23px; height: 23px; }
}

.vrail__motion { display: flex; grid-column: 2; align-items: center; gap: 7px; color: #888; font-size: 10px; min-height: 40px; padding: 0 10px; }
.vrail__motion:hover { color: #fff; }
.vrail__motion[hidden] { display: none; }
@media (max-width: 600px) { .vrail__motion { font-size: 8px; min-height: 44px; padding: 0 3px; } #videoCurrentCategory, .vrail__readout-line { display: none; } }

.video-head h1 { font-size: clamp(34px, 3.8vw, 56px); }
.video-head__aside { flex-basis: 310px; }
.vcard__play { width: 35px; height: 35px; font-size: 16px; }
.vcard__cat { font-size: 10px; max-width: 180px; }
.vcard__number { font-size: 10px; }
@media (max-width: 760px) { .video-head h1 { font-size: 32px; white-space: normal; } .video-head__aside p { max-width: none; flex: 1; font-size: 11px; } .video-head__aside a { flex-shrink: 0; } }

@media (max-width: 760px) { .video-head h1 em { display: block; } }

.vplayer__frame video[hidden], .vplayer__loading[hidden] { display: none; }
.vplayer__loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 18px; border-radius: 24px; background: #111d; color: #ccc; font-size: 12px; pointer-events: none; }
.vplayer__error button { min-height: 44px; margin-top: 12px; padding: 0 18px; border: 1px solid #fff4; border-radius: 24px; background: #111; }
.vcard--landscape { width: 480px; height: 270px; }
.vcard--landscape video { object-fit: contain; }
.vrail.is-landscape { height: 360px; }
@media (max-width: 760px) { .vcard--landscape { width: min(86vw, 480px); height: min(48.375vw, 270px); } .vrail.is-landscape { height: 260px; } }
@media (max-width: 600px) { .vfilters button:last-child:nth-child(odd) { grid-column: 1 / -1; } }

@media (max-width:600px) { .vfilters.is-five { grid-template-columns:repeat(6,minmax(0,1fr)); } .vfilters.is-five button { grid-column:span 2; } .vfilters.is-five button:nth-last-child(-n+2) { grid-column:span 3; } }
@media (max-width:380px) { .vfilters.is-five button { font-size:9px; padding-inline:4px; } }

@media (max-width:600px) { .vfilters.is-six { grid-template-columns:repeat(3,minmax(0,1fr)); } .vfilters.is-six button { grid-column:auto; } }

.vcard--square { width:300px; height:300px; }
.vrail.is-landscape .vcard:not(.vcard--landscape):not(.vcard--square) { width:152px; height:270px; }
@media (max-width:760px) { .vcard--square { width:min(60vw,240px); height:min(60vw,240px); } .vrail.is-landscape .vcard:not(.vcard--landscape):not(.vcard--square) { width:min(27.212vw,152px); height:min(48.375vw,270px); } }

/* Shared divisions and previous projects of the editing team. */
.video-divisions { display:flex; align-items:center; gap:5px; padding:4px; border:1px solid #ffffff21; border-radius:30px; }
.video-divisions a { padding:9px 16px; font-size:11px; color:#888; border-radius:24px; }
.video-divisions a:hover { color:#fff; }
.video-divisions a[aria-current] { background:#f3f3f3; color:#111; }
.video-credits { width:calc(100% - var(--pad-x)*2); margin:48px auto 36px; padding-top:32px; border-top:1px solid #ffffff16; }
.video-credits h2 { font-size:clamp(20px,2vw,30px); font-weight:450; letter-spacing:-.04em; color:#aaa; }
.video-credits__grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:26px; }
.video-creator { position:relative; padding:20px 12px 18px; display:flex; align-items:center; flex-direction:column; gap:16px; background:linear-gradient(145deg,#ffffff08,#ffffff01); border:1px solid #ffffff16; border-radius:18px; transition:background .2s,transform .2s; cursor:pointer; }
.video-creator:hover { background:#ffffff0c; transform:translateY(-4px); }
.video-creator img { width:90px; height:90px; border-radius:50%; object-fit:cover; border:1px solid #ffffff2b; }
.video-creator span { color:#d2d2d2; font-size:12px; }
.video-creator .video-creator__arrow { position:absolute; right:12px; top:10px; color:#666; }
.vcard__media img { width:100%; height:100%; object-fit:cover; display:block; }
.vplayer__frame iframe { width:min(100%,1440px); aspect-ratio:16/9; max-height:calc(100dvh - 145px); border:0; background:#000; }
.vplayer__youtube { position:absolute; bottom:14px; right:24px; font-size:12px; padding:10px 16px; border:1px solid #ffffff35; border-radius:24px; }
.vplayer__youtube[hidden] { display:none; }
@media(max-width:1250px) { .video-categorybar__label { display:none; } }
@media(max-width:1000px) { .video-page .nav { flex-wrap:wrap; row-gap:12px; } .video-divisions { order:3; width:100%; justify-content:center; border:0; } .video-main { padding-top:150px; } }
@media(max-width:760px) { .video-divisions a { padding:8px 16px; font-size:10px; } .video-credits { margin-top:28px; padding-top:24px; } .video-credits__grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .video-creator { padding:16px 5px; gap:12px; } .video-creator img { width:65px; height:65px; } .video-creator span { font-size:10px; } .video-credits h2 { line-height:1.4; } }
@media(prefers-reduced-motion:reduce) { .video-creator { transition:none; } }