@font-face{font-family:LEXMontage;src:url('assets/rouleur-original.woff') format('woff');font-display:swap}
@font-face{font-family:LEXAlpina;src:url('assets/gt-alpina-original.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
#lex-montage{--lex-yellow:#ffc109;--lex-paper:#f1eee7;--lex-red:#ac130c;--lex-ink:#000;--lex-fg:var(--lex-yellow);--lex-bg:#000;container-type:inline-size;background:var(--lex-bg);color:var(--lex-fg);font:400 16px/1.5 LEXAlpina,Georgia,serif;text-transform:uppercase;letter-spacing:.055em;font-kerning:normal;position:relative;isolation:isolate}
#lex-montage *{box-sizing:border-box}
#lex-montage [hidden]{display:none!important}
#lex-montage button,#lex-montage a{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border:0;border-radius:0;background:none;cursor:pointer;touch-action:manipulation}
#lex-montage button{padding:10px 0}
#lex-montage a{text-underline-offset:5px}
#lex-montage button:focus-visible,#lex-montage a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
#lex-montage .stage{position:relative;width:100%;min-width:0;aspect-ratio:16/10;min-height:550px;overflow:hidden;background:var(--lex-bg)}
#lex-montage .scene{position:absolute;inset:0;overflow:hidden}
#lex-montage .scene.enter{animation:lex-reveal .38s cubic-bezier(.18,.7,.2,1)}
#lex-montage .chrome{position:absolute;z-index:8;left:5%;right:5%;top:16px;display:flex;justify-content:space-between;align-items:center;gap:22px}
#lex-montage .brand{display:block;width:173px;height:42px;position:relative}
#lex-montage .brand:before{content:'';position:absolute;inset:8px 0;background:currentColor;mask:url('assets/logo-horizontal.svg') center/contain no-repeat}
#lex-montage .header-right{display:flex;gap:24px;align-items:center;font-size:15px}
#lex-montage .language{font-size:13px}
#lex-montage .art{position:absolute;left:5%;right:5%;top:14%;bottom:16%;margin:0;font-weight:400}
#lex-montage .word{position:absolute;left:0;right:0;overflow:visible}
#lex-montage .glyphs{display:block;position:absolute;font:400 100px/1 LEXMontage,Arial,sans-serif;white-space:nowrap;transform-origin:0 0;letter-spacing:0}
#lex-montage .art-found .word{top:0;bottom:0}

#lex-montage .full-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

#lex-montage .shade{position:absolute;inset:0;background:linear-gradient(#0007,transparent 23%,transparent 62%,#000b)}

#lex-montage .panel{position:relative;z-index:12;background:var(--lex-yellow);color:#000;min-height:640px;padding:28px 5% 35px}
#lex-montage .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:45px;font-size:15px}
#lex-montage .panel-close{min-width:80px;text-align:right}
#lex-montage .editorial{display:grid;grid-template-columns:1fr 1.35fr;gap:10%;align-items:start;padding-bottom:35px}
#lex-montage .editorial h2{font:400 clamp(28px,3.3cqw,44px)/1.15 LEXAlpina,Georgia,serif;margin:0;overflow-wrap:normal}
#lex-montage .editorial .copy{font-size:20px;line-height:1.4}
#lex-montage .editorial p{margin:0 0 22px}
#lex-montage .editorial .small{font-size:15px}
#lex-montage .editorial img{width:100%;max-height:250px;object-fit:cover;display:block;margin-bottom:24px}
#lex-montage .editorial .external{display:inline-block;margin-top:8px;padding:10px 0}

#lex-montage .menu-list{display:grid;grid-template-columns:1fr 1fr;gap:0 8%}
#lex-montage .menu-list :is(button,a){text-align:left;padding:22px 0;border-bottom:1px solid #0005;display:flex;gap:20px;align-items:baseline;min-width:0}
#lex-montage .menu-list .menu-word{font:400 clamp(23px,4.3cqw,51px)/1.1 LEXAlpina,Georgia,serif;min-width:0}
#lex-montage .menu-list small{font-size:14px}
#lex-montage .menu-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:45px;font-size:17px}
#lex-montage .access-text{position:absolute;top:0;left:0;margin:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes lex-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:620px){
#lex-montage .stage{aspect-ratio:3/5;min-height:600px;max-height:760px}
#lex-montage .chrome{top:13px}
#lex-montage .brand{width:142px}
#lex-montage .header-right{gap:16px;font-size:15px}
#lex-montage .art{top:15%;bottom:22%}

#lex-montage .panel{min-height:600px;padding-top:19px}
#lex-montage .panel-head{margin-bottom:35px}
#lex-montage .editorial{display:block}
#lex-montage .editorial h2{font-size:28px;margin-bottom:32px}
#lex-montage .editorial .copy{font-size:19px}
#lex-montage .menu-list{grid-template-columns:1fr}
#lex-montage .menu-list :is(button,a){padding:15px 0}
#lex-montage .menu-list .menu-word{font-size:clamp(22px,7.8cqw,30px)}
#lex-montage .menu-footer{font-size:14px}
}
@media(prefers-reduced-motion:reduce){#lex-montage .scene.enter{animation:none}}
/* Local, viewport-based prototype. The approved composition remains the base. */
html,body{margin:0;width:100%;height:100%;background:#000}
body{overflow:hidden}
button,select,a{-webkit-tap-highlight-color:transparent}
#lex-montage{height:100%;font-synthesis:none}
#lex-montage .stage{height:100svh;height:100dvh;min-height:360px;max-height:none;aspect-ratio:auto}
#lex-montage .chrome{top:max(18px,env(safe-area-inset-top));z-index:10}
#lex-montage .brand{width:clamp(155px,15vw,225px);height:46px}

#lex-montage .header-right{font-size:14px;gap:22px}
#lex-montage .language select{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border:none;border-radius:0;background:transparent;appearance:none;padding:10px 5px;cursor:pointer;min-height:44px}
#lex-montage .language option{color:#000;background:#ffc109}
#lex-montage .motion-toggle{min-width:44px;min-height:44px;font:26px/1 LEXAlpina;opacity:.85}
#lex-montage .motion-toggle[aria-pressed=false]{text-decoration:line-through;opacity:.6}
#lex-montage .scene{touch-action:pan-y}
#lex-montage .glyphs{height:100px}
#lex-montage .letter{position:absolute;top:0;display:block;white-space:pre;transform-origin:50% 88%;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
#lex-montage .word{isolation:isolate}
#lex-montage .art{touch-action:pan-y}
#lex-montage .art:not(.ready){visibility:hidden}
#lex-montage .panel{position:fixed;inset:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:28px 5% 55px}
#lex-montage .panel .editorial{max-width:1280px;margin:8vh auto 0}
#lex-montage .panel .copy{font-size:clamp(19px,1.6vw,24px);line-height:1.55;letter-spacing:.025em;max-width:720px}
#lex-montage .panel .small{font-size:17px}
#lex-montage .panel-head{position:relative;max-width:1600px;margin:0 auto 45px;font-size:14px;gap:24px}
#lex-montage .panel[data-type=manifesto]{background:var(--lex-red);color:var(--lex-ink)}
#lex-montage .panel[data-type=menu]{padding-bottom:40px;background:#e8dfdf;color:var(--lex-ink)}
#lex-montage .menu-list{max-width:1400px;margin:6vh auto 0}
#lex-montage .menu-footer{max-width:1400px;margin:45px auto 0;align-items:center}
#lex-montage .menu-list .menu-word{font-size:clamp(25px,3.2vw,48px);letter-spacing:.06em;transition:transform .35s;transform-origin:left center}
@media(hover:hover){#lex-montage .menu-list :is(button,a):hover .menu-word{transform:translateX(8px)}}

#lex-montage .archive-host{position:fixed;inset:0;z-index:35;overflow:auto;overscroll-behavior:contain;background:#e9e6df;color:#000}
#lex-montage .panel button.external{border-bottom:1px solid currentColor;font-size:inherit;text-align:left}

#lex-montage .cinema{inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px 5%;border:0;background:#000;color:#f1eee7;overflow:auto}
#lex-montage .cinema::backdrop{background:#000}
#lex-montage .cinema[data-kind="bts"]{background:#2f6b3a;color:var(--lex-ink)}
#lex-montage .cinema-head{display:flex;justify-content:space-between;gap:25px;align-items:center;min-height:50px}
#lex-montage .cinema-head h2{font:400 18px/1.3 LEXAlpina,Georgia,serif;margin:0}
#lex-montage .cinema-head .panel-close{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;flex:none;white-space:nowrap;min-height:44px;font:400 15px/1.5 LEXAlpina,Georgia,serif}
#lex-montage .cinema-close-cross{font-size:12px;line-height:1;opacity:.75}
#lex-montage .cinema-screen{height:calc(100dvh - 160px);display:flex;align-items:center;justify-content:center;margin:5px 0 10px}
#lex-montage .cinema iframe{aspect-ratio:16/9;width:100%;height:100%;max-height:100%;border:none}
#lex-montage .cinema-external{display:inline-block;font-size:15px;padding:10px 0}
#lex-montage .cinema-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
#lex-montage .cinema-credits{display:grid;grid-template-columns:1fr 1.5fr;gap:8%;margin-top:54px;padding:32px 0 60px;border-top:1px solid #0006;text-transform:none;letter-spacing:.015em;scroll-margin-top:32px}
#lex-montage .cinema-credits h3{font:400 clamp(24px,2.4vw,36px)/1.2 LEXAlpina,Georgia,serif;margin:0;max-width:260px}
#lex-montage .cinema-credits dl{margin:0;min-width:0}
#lex-montage .cinema-credits dl>div{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;padding:18px 0;border-bottom:1px solid #0004}
#lex-montage .cinema-credits dl>div:first-child{padding-top:0}
#lex-montage .cinema-credits dt{font-size:15px;line-height:1.5}
#lex-montage .cinema-credits dd{font-size:clamp(19px,1.65vw,25px);line-height:1.25;margin:0;overflow-wrap:break-word}
#lex-montage .cinema-interviewees{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.5fr;gap:0 8%;margin-top:34px;padding-top:32px;border-top:1px solid #0006}
#lex-montage .cinema-interviewees h4{font:400 clamp(24px,2.4vw,36px)/1.2 LEXAlpina,Georgia,serif;margin:0;max-width:300px}
#lex-montage .cinema-interviewees ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;margin:0;padding:0;list-style:none;font-size:clamp(18px,1.5vw,23px);line-height:1.4}
#lex-montage .cinema-interviewees li{min-width:0;overflow-wrap:break-word}
#lex-montage .cinema-interviewees li span{display:block}
#lex-montage .cinema-interviewees small{display:block;margin-top:5px;font-size:14px;line-height:1.5}
#lex-montage .loading .glyphs{opacity:0}

@media(max-width:620px){
#lex-montage .brand{width:133px}
#lex-montage .header-right{gap:10px;font-size:13px}
#lex-montage .motion-toggle{font-size:25px;min-width:35px}
#lex-montage .chrome{top:max(12px,env(safe-area-inset-top))}

#lex-montage .art{top:15%;bottom:23%}
#lex-montage .panel{padding:20px 6% 45px}
#lex-montage .panel-head{font-size:12px;gap:15px;align-items:start}
#lex-montage .panel-head>span{padding-top:10px}
#lex-montage .panel .editorial{margin-top:40px}
#lex-montage .panel .copy{font-size:18px}
#lex-montage .panel .small{font-size:14px}
#lex-montage .menu-list{margin-top:24px}
#lex-montage .menu-list .menu-word{font-size:clamp(21px,5.8vw,29px)}
#lex-montage .menu-footer{display:block;margin-top:30px}
#lex-montage .menu-footer button{display:block;margin-top:18px}
#lex-montage .menu-footer>a{display:inline-block;margin:0 24px 12px 0}

#lex-montage .cinema{padding:16px 5%}
#lex-montage .cinema-screen{height:calc(100dvh - 165px)}
#lex-montage .cinema-head h2{font-size:16px}
#lex-montage .cinema-head .panel-close{font-size:12px}
#lex-montage .cinema-actions{font-size:12px}
#lex-montage .cinema-external{font-size:12px}
#lex-montage .cinema-credits{grid-template-columns:1fr;gap:28px;margin-top:36px;padding:26px 0 35px}
#lex-montage .cinema-credits dl>div{grid-template-columns:1fr;gap:5px;padding:18px 0}
#lex-montage .cinema-credits dt{font-size:14px}
#lex-montage .cinema-interviewees{grid-template-columns:1fr;gap:24px;margin-top:6px;padding-top:26px}
#lex-montage .cinema-interviewees ul{grid-template-columns:1fr;gap:12px}
}
@media(max-height:540px) and (min-width:621px){
#lex-montage .chrome{top:5px}

#lex-montage .art{top:21%;bottom:22%}

}
@media(prefers-reduced-motion:reduce){#lex-montage *,#lex-montage *:before{animation:none!important;transition:none!important}}
#lex-montage.no-motion .letter,#lex-montage.no-motion .scene{animation:none!important;transition:none!important}

#lex-montage .menu-list a{text-decoration:none}

#lex-montage a.panel-close{text-decoration:none}

#lex-montage .cinema-description{max-width:60ch;margin:22px 0 0;font-size:16px;line-height:1.5;text-transform:none;letter-spacing:.015em}
/* Before JavaScript upgrades a direct video entry to the modal top layer. */
#lex-montage .cinema[open]:not(:modal){position:fixed;z-index:50}