/* Source coordinates are CSS pixels on Tilda's 1200px horizontal canvas.
   Only the whole canvas scales; portrait never changes column placement. */
:root{--paper:#fff;--muted:#cfcfcf;--blue:#1e6f9f;--line:#1e6f9f;--image-border:#1e6f9f;--hero-overhang:64.838px;--gallery-ratio:.38805}
body.reference-home{background:#000;color:#fff;overflow-x:hidden;font-size:25px;line-height:31px;min-width:0}
.reference-home main,.reference-home footer{width:1200px;margin-inline:auto}
.reference-home main{position:relative}
.reference-home .wrap{width:1200px;margin:0}
.reference-home h1,.reference-home h2,.reference-home h3{letter-spacing:0;text-wrap:wrap}
.reference-home h2{font-size:50px;line-height:50px;font-weight:700}
.reference-home h3{font-size:40px;line-height:50px;font-weight:400}
.reference-home p{margin:0 0 31px}
.reference-home p:last-child{margin:0}
.reference-home .section{position:relative;padding:0;border:0}
.reference-home .section-heading{display:contents}
.reference-home .section-heading h2,.reference-home .section-heading p{position:absolute;margin:0;max-width:none}
.reference-home .section-heading p{font-size:25px;line-height:30px;color:#fff;border:0;padding:0}
.reference-home .section-heading p:after{content:'';position:absolute;left:0;top:71px;width:440px;height:3px;background:#1e6f9f}
.reference-home .hero{width:calc(1200px + 2 * var(--hero-overhang));margin-left:calc(-1 * var(--hero-overhang));overflow:visible}
.reference-home .hero-image{width:100%;height:auto}
.reference-home .hero-heading{display:contents}
.reference-home .hero-heading h1{position:absolute;left:calc(35px + var(--hero-overhang));top:50px;width:543px;font-size:70px;line-height:70px;margin:0}
.reference-home .hero-heading p{position:absolute;left:calc(658px + var(--hero-overhang));top:51px;width:474px;font-size:25px;line-height:30px;border:0;margin:0;padding:0}
.reference-home .hero-heading p:after{content:'';position:absolute;left:2px;top:72px;width:440px;height:3px;background:#1e6f9f}
.reference-home .intro{position:relative;height:339px;display:block;padding:0}
.reference-home .intro>div{position:absolute;left:43px;top:29px;width:793px;max-width:none;height:310px}
.reference-home .counters{position:absolute;left:790px;top:29px;width:383px;height:310px;contain:none;display:grid;grid-template-rows:repeat(3,1fr)}
.reference-home .counters div{position:relative;grid-template-columns:58px 1fr;gap:48px;padding:0 0 0 94px;border-bottom:2px solid #1e6f9f}
.reference-home .counters div:before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:40px;height:43px;background:center/contain no-repeat}
.reference-home .counters div:nth-child(1):before{background-image:url('/media/site/B-Simbol-01.png')}
.reference-home .counters div:nth-child(2):before{background-image:url('/media/site/B-Simbol-02.png')}
.reference-home .counters div:nth-child(3):before{background-image:url('/media/site/B-Simbol-03.png')}
.reference-home .counters dt{font-size:60px;line-height:60px;color:#fff;letter-spacing:0}
.reference-home .counters dd{font-size:18px;line-height:21.6px;color:#cfcfcf;white-space:nowrap}
.reference-home #metamodern{height:2690px;overflow:hidden}
.reference-home #metamodern .section-heading h2{left:17px;top:127px;width:526px}
.reference-home #metamodern .section-heading p{left:590px;top:136px;width:609px}
.reference-home #metamodern>.wide-image{position:absolute;left:39px;top:319px;width:1148px;height:489px;margin:0;object-fit:cover;max-width:none}
.reference-home #metamodern>.prose{position:absolute;left:39px;top:856px;width:1148px;margin:0;max-width:none}
.reference-home .principles,.reference-home .principle,.reference-home .principle-copy{display:contents}
.reference-home .principle h3,.reference-home .principle p,.reference-home .principle>img{position:absolute;margin:0;max-width:none}
.reference-home .principle p{font-size:25px;line-height:31px}
.reference-home .principle img{object-fit:cover;max-height:none;justify-self:auto}
.reference-home .principle:nth-child(1) h3{left:39px;top:1280px;width:626px}
.reference-home .principle:nth-child(1) p{left:39px;top:1351px;width:626px}
.reference-home .principle:nth-child(1)>img{left:620px;top:1114px;width:641px;height:641px;object-fit:contain}
.reference-home .principle:nth-child(2) h3{left:597px;top:1617px;width:626px}
.reference-home .principle:nth-child(2) p{left:598px;top:1717px;width:602px}
.reference-home .principle:nth-child(2)>img{left:20px;top:1584px;width:496px;height:279px}
.reference-home .principle:nth-child(3) h3{left:36px;top:1954px;width:610px}
.reference-home .principle:nth-child(3) p{left:36px;top:2017px;width:664px}
.reference-home .principle:nth-child(3)>img{left:740px;top:1945px;width:457px;height:331px}
.reference-home .principle:nth-child(4) h3{left:596px;top:2323px;width:599px}
.reference-home .principle:nth-child(4) p{left:596px;top:2384px;width:617px}
.reference-home .principle:nth-child(4)>img{left:20px;top:2237px;width:505px;height:341px}
.reference-home #exhibition-module{height:4180px}
.reference-home #exhibition-module .section-heading h2{left:2px;top:88px;width:527px}
.reference-home #exhibition-module .section-heading p{left:649px;top:84px;width:560px}
.reference-home #exhibition-module .section-heading p:after{top:70px}
.reference-home .module-panorama{position:absolute;left:0;top:223px;width:1220px;height:417px;margin:0}
.reference-home .panorama-image{width:100%;height:100%;object-fit:cover}
.reference-home #exhibition-module>.prose{position:absolute;left:35px;top:667px;width:1158px;max-width:none;margin:0;font-size:25px;line-height:31px}
.reference-home .module-legend{inset:0;display:block;font-size:18px;line-height:21.6px;color:#1e6f9f}
.reference-home .legend-row{position:absolute;left:880px;width:264px;height:46px;padding-left:10px;grid-template-columns:28px 1fr;gap:55px;align-items:start;border-color:#1e6f9f}
.reference-home .legend-row span{padding-top:6px;white-space:nowrap}
.reference-home .legend-row:nth-child(1){top:81px}
.reference-home .legend-row:nth-child(2){top:134px;height:43px}
.reference-home .legend-row:nth-child(3){top:185px;height:42px}
.reference-home .legend-row:nth-child(4){top:236px;height:35px}
.reference-home .legend-row:nth-child(5){top:280px;height:36px}
.reference-home .legend-row:nth-child(6){top:324px;height:36px}
.reference-home .legend-row:nth-child(n+4) span{padding-top:2px}
.reference-home #modules{display:contents}
.reference-home .module{position:absolute;left:0;width:1220px;margin:0;height:420px}
.reference-home .module:nth-child(1){top:901px}
.reference-home .module:nth-child(2){top:1380px}
.reference-home .module:nth-child(3){top:1893px}
.reference-home .module:nth-child(4){top:2392px}
.reference-home .module:nth-child(5){top:2878px;height:638px}
.reference-home .module:nth-child(6){top:3573px;height:460px}
.reference-home .module-heading{position:absolute;left:39px;top:0;width:700px;height:50px;margin:0;gap:33px;color:#fff}
.reference-home .module-heading img{width:47px;height:47px;flex-basis:47px}
.reference-home .module:nth-child(2) .module-heading{left:47px}
.reference-home .module:nth-child(3) .module-heading{left:50px}
.reference-home .module:nth-child(4) .module-heading{left:44px}
.reference-home .module:nth-child(n+5) .module-heading{left:55px}
.reference-home .module-card{position:absolute;left:0;top:72px;width:1220px;height:348px;display:block;padding:0;border:0;border-radius:20px;background:#fff;color:#1e6f9f}
.reference-home .module-card>p{position:absolute;left:44px;top:29px;width:755px;max-width:none;margin:0;font-size:23px;line-height:29px;white-space:pre-line}
.reference-home .module-visual{position:absolute;left:799px;top:32px;width:372px;height:288px;aspect-ratio:auto;padding:0;min-height:0;background:transparent}
.reference-home .module-visual img{width:100%;height:100%;object-fit:cover;max-height:none}
.reference-home .module-diagrams{display:contents!important}
.reference-home .module-card--paired>p{width:506px}
.reference-home .module-card--paired .module-visual:first-child{left:580px;top:32px;width:372px;height:288px}
.reference-home .module-card--paired .module-visual:nth-child(2){left:980px;top:32px;width:208px;height:288px}
.reference-home .module-card--portraits{height:566px}
.reference-home .module-card--portraits>p{left:60px;top:10px;width:479px}
.reference-home .module-card--portraits .module-visual:first-child{left:580px;top:29px;width:284px;height:504px}
.reference-home .module-card--portraits .module-visual:nth-child(2){left:896px;top:29px;width:284px;height:504px}
.reference-home .module:nth-child(6) .module-card{height:388px}
.reference-home .module:nth-child(6) .module-card>p{left:60px;top:23px;width:736px}
.reference-home .module:nth-child(6) .module-visual{left:820px;top:40px;width:362px;height:310px}
.reference-home .gallery{padding:41px 0 0;border:0;background:#000;width:1200px;--painting-scale:2.2;--audio-button-scale:1.8}
/* Keep the section heading on the main canvas, outside the artwork-only scale. */
.reference-home .gallery>h2{position:relative;width:fit-content;margin:0 auto 60px;text-align:center}
.reference-home .gallery>h2:after{content:'';position:absolute;left:50%;top:69px;transform:translateX(-50%);width:228px;height:3px;background:#1e6f9f}
.reference-home #artworks{width:calc(1200px / var(--gallery-ratio));margin-inline:auto;zoom:var(--gallery-ratio)}
/* Flow layout keeps enlarged paintings, labels and controls from overlapping. */
.reference-home .artwork{height:auto;padding:100px 0 160px;contain:paint;--painting-width:550px;--painting-height:550px}
/* Compensate artwork-only zoom so labels retain normal readable text size. */
.reference-home .artwork h3{position:relative;width:fit-content;max-width:calc(920px / var(--gallery-ratio));margin:0 auto 60px;font-size:calc(30px / var(--gallery-ratio));line-height:1.27;color:#aaa8a8;font-weight:400;will-change:opacity}
.reference-home .artwork:before{inset:0;background:url('/media/site/BLU_BACK-01.webp') center/3080px 2405px no-repeat}
/* The blue wall already supplies the glow via composited opacity. Animating
   the additional large blurred box-shadow would repaint it on every frame. */
.reference-home .painting-button{position:relative;width:calc(var(--painting-width) * var(--painting-scale));height:calc(var(--painting-height) * var(--painting-scale));margin:0 auto;border:0;border-radius:0;box-shadow:none}
.reference-home .painting-button img{width:100%;height:100%;max-width:none;object-fit:contain;border-radius:0}
.reference-home .painting-button{cursor:default}
.reference-home .painting-button img{user-select:none}
.reference-home .painting-button.loupe-active,.reference-home .painting-button.loupe-active img{cursor:none}
.painting-loupe{position:fixed;left:0;top:0;z-index:30;pointer-events:none;border-radius:50%;border:1px solid #1e6f9f;background-color:#000;background-repeat:no-repeat;box-shadow:0 0 0 1px #0008,0 8px 28px #0009,0 0 18px #1e6f9f55;contain:paint;will-change:transform}
.painting-loupe[hidden]{display:none}
.reference-home .artwork:nth-child(2){--painting-width:756px;--painting-height:549px}
.reference-home .artwork:nth-child(3){--painting-width:492px;--painting-height:592px}
.reference-home .artwork:nth-child(4){--painting-width:492px;--painting-height:615px}
.reference-home .artwork:nth-child(5){--painting-width:528px;--painting-height:596px}
.reference-home .players{position:relative;width:fit-content;gap:72px;flex-wrap:nowrap;margin:120px auto 0}
.reference-home .player{width:calc(294px * var(--audio-button-scale));flex:none;font-size:18px}
.reference-home .play{transform:scale(var(--audio-button-scale));transform-origin:center top;margin-bottom:calc(8px + 46px * (var(--audio-button-scale) - 1));font-size:18px;line-height:18px;color:#d8d8d8;border:2px solid #d8d8d8b8;background:transparent;padding:12px 30px;letter-spacing:0}
.reference-home .seek{width:294px;margin-inline:auto;border-color:#d8d8d8b8}
.reference-home #display-formats{height:3770px}
.reference-home #display-formats .section-heading h2{left:29px;top:89px;width:526px}
.reference-home #display-formats .section-heading p{left:618px;top:90px;width:457px}
.reference-home #display-formats>.section-heading+p{position:absolute;left:20px;top:226px;width:1112px;max-width:none}
.reference-home #display-formats>.section-heading+p+p{position:absolute;left:20px;top:372px;width:1112px;max-width:none}
.reference-home #formats{display:contents}
.reference-home .format{position:absolute;left:0;width:1220px;height:545px;margin:0;padding:0;border:0}
.reference-home .format:nth-child(1){top:571px}
.reference-home .format:nth-child(2){top:1116px}
.reference-home .format:nth-child(3){top:1674px}
.reference-home .format:nth-child(4){top:2215px}
.reference-home .format h3{position:absolute;left:40px;top:0;width:1157px;font-size:40px;line-height:50px;margin:0}
.reference-home .format:first-child h3{width:674px}
.reference-home .format-content{display:contents}
.reference-home .format-content p{position:absolute;left:690px;top:122px;width:529px;margin:0;font-size:25px;line-height:31px;white-space:pre-line}
.reference-home .format-visual{position:absolute;left:34px;top:161px;width:486px;height:293px;aspect-ratio:auto;background:transparent}
.reference-home .format-visual img{object-fit:cover}
.reference-home .format:nth-child(2) .format-content p{left:687px;top:124px}
.reference-home .format:nth-child(2) .format-visual{left:38px;top:178px;width:482px;height:308px}
.reference-home .format:nth-child(3) .format-content p{left:680px;top:133px}
.reference-home .format:nth-child(3) .format-visual{left:37px;top:164px;width:496px;height:300px}
.reference-home .format:nth-child(4) .format-content p{left:684px;top:133px}
.reference-home .format:nth-child(4) .format-visual{left:41px;top:184px;width:502px;height:299px}
.reference-home #display-formats>h3{position:absolute;left:30px;top:2775px;width:677px;margin:0}
.reference-home .implementation-copy{position:absolute;left:30px;top:2840px;width:1150px;font-size:25px;line-height:31px;white-space:pre-line}
.reference-home #discuss-showing{height:500px}
.reference-home #discuss-showing .section-heading h2{left:29px;top:89px;width:526px}
.reference-home #discuss-showing .section-heading p{left:618px;top:90px;width:457px}
.reference-home #discuss-showing>.section-heading+p{position:absolute;left:20px;top:239px;width:1112px;max-width:none;font-size:30px;line-height:38px}
.reference-home #contacts{height:650px}
.reference-home #contacts>h2{position:absolute;left:29px;top:89px;width:526px;margin:0}
.reference-home #contacts>h2:after{content:'';position:absolute;left:0;top:60px;width:277px;height:3px;background:#1e6f9f}
.reference-home #contacts address{position:absolute;left:20px;top:212px;width:1112px;margin:0;font-size:30px;line-height:38px}
.reference-home footer{font-size:14px;color:#cfcfcf;border-color:#1e6f9f}

/* Quiet editorial motion: no text zoom, small distances, overlapping entrances.
   Layout stays reserved; only opacity/transform are animated. */
.reference-home{--motion-ease:cubic-bezier(.22,1,.36,1)}
.reference-home .reveal{transition:opacity 480ms ease-out,transform 480ms var(--motion-ease)}
.reference-home .reveal.visible{transition:opacity 480ms ease-out,transform 480ms var(--motion-ease)}
.js .reference-home .reveal:not(.visible){transform:translateY(8px)}
.reference-home .module-diagrams .reveal{transition-duration:480ms}
.reference-home .module-diagrams .module-visual:first-child .reveal:not(.visible){transition-delay:80ms}
.reference-home .module-diagrams .module-visual:nth-child(2) .reveal:not(.visible){transition-delay:0ms}
.reference-home .module-diagrams .module-visual:nth-child(2) .reveal{transition-delay:80ms}
.js .reference-home .legend-row:not(.visible){transform:translateX(-12px)}
.reference-home .legend-row.visible{transition-duration:var(--legend-duration,320ms);transition-delay:var(--legend-delay,0ms)}
.reference-home .legend-row:not(.visible){transition-duration:var(--legend-duration,320ms);transition-delay:var(--legend-exit-delay,0ms)}
@media(prefers-reduced-motion:reduce){
  .js .reference-home .reveal:not(.visible),.js .reference-home .legend-row:not(.visible){transform:none}
}