/* Study21 local composition only; original motion untouched. */
#app .wide{outline:calc(3 * var(--s)) solid #111;outline-offset:calc(-3 * var(--s));}
#app .wide__reel-in>span.function-primary,#app .wide__reel-in>span.function-secondary,html[lang=en] #app .wide__reel-in>span.function-primary,html[lang=en] #app .wide__reel-in>span.function-secondary{font-size:calc(34 * var(--s))!important;line-height:.96!important}
#app .screens__shout{display:none!important}
#app .screens__photo{left:calc(666 * var(--s));top:calc(1238 * var(--s));width:calc(214 * var(--s));height:calc(286 * var(--s));overflow:visible;z-index:calc(var(--layer-content) + 3);background:transparent!important}
#app .screens__photo img{width:100%;height:100%;object-fit:contain!important;transform:none!important;translate:none!important;background:transparent!important}

/* Two top rules, no enclosing box. */
#app .wide{outline:0!important}
#app .wide::before{left:0!important;top:0!important;width:100%!important;height:calc(5 * var(--s))!important;background:#111!important}
#app .wide::after{left:0!important;top:calc(10 * var(--s))!important;bottom:auto!important;width:100%!important;height:calc(1 * var(--s))!important;background:#111!important}
/* Preserve the original red photo accents; the new black pair belongs only to the type column. */
html[data-paper=swiss17] #app .wide::before{left:calc(-16 * var(--s))!important;top:0!important;width:calc(3 * var(--s))!important;height:100%!important;background:#e30613!important}
html[data-paper=swiss17] #app .wide::after{left:0!important;top:auto!important;bottom:calc(-12 * var(--s))!important;width:63%!important;height:calc(2 * var(--s))!important;background:#e30613!important}
#app .wide__reel::before,#app .wide__reel::after{content:'';position:absolute;left:0;width:100%;background:#111;z-index:3;pointer-events:none}
#app .wide__reel::before{top:0;height:calc(5 * var(--s))}
#app .wide__reel::after{top:calc(10 * var(--s));height:calc(1 * var(--s))}

/* Study23: thin short rule above the thick rule, wholly outside the moving text. */
#app .wide__reel::before,#app .wide__reel::after{display:none!important}
#app .type-rule23{position:absolute;left:calc(690 * var(--s));top:calc(-18 * var(--s));width:calc(348 * var(--s));height:calc(14 * var(--s));pointer-events:none;z-index:15}
#app .type-rule23 i{position:absolute;left:0;top:0;width:58%;height:calc(1 * var(--s));background:#111}
#app .type-rule23 b{position:absolute;left:0;bottom:0;width:100%;height:calc(5 * var(--s));background:#111}
#app .type-rule23 em{position:absolute;right:0;top:calc(9 * var(--s));width:calc(1 * var(--s));height:var(--join-height,120px);background:#111;transform-origin:top;}

/* Study24: stronger connector; horizontal rules unchanged. */
#app .type-rule23 em{width:calc(2.5 * var(--s))}
