/* Homepage arts entrances: native carvings with live, accessible lettering. */
.arts-titlepiece{
    position:relative;
    isolation:isolate;
    text-align:center;
    overflow:visible
}
#cinema > .container,#gallery > .container{container-type:inline-size}
.arts-entrance-art{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none
}
.arts-entrance-art img{
    display:block;
    width:100%;
    height:100%
}
.arts-titlepiece .arts-eyebrow{
    color:#e0c7a0;
    font-size:21px;
    line-height:1.25;
    margin:0 0 9px
}
.arts-titlepiece .section-title{
    color:#f2dcff;
    font-size:clamp(40px,6cqw,72px);
    line-height:1.08;
    letter-spacing:-1.6px;
    text-shadow:0 3px #321346,0 5px #1b1026;
    margin:0 0 10px
}
.arts-titlepiece .section-intro{
    color:#e4d2ee;
    font-size:23px;
    line-height:1.3;
    margin:0 auto 12px
}
.arts-titlepiece .arts-navigation{
    gap:9px;
    margin:0;
    align-items:center
}
.arts-titlepiece .arts-navigation a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:53px;
    min-width:140px;
    padding:10px 24px 12px;
    border:0;
    border-radius:0;
    background:url('/assets/illustrated/arts-direction-prev-v2.svg') center/100% 100% no-repeat;
    color:#ead6f6;
    font-size:21px;
    line-height:1.15;
    text-decoration:none;
    text-underline-offset:3px;
    transition:color .15s
}
.arts-titlepiece .arts-navigation a:last-child{
    background-image:url('/assets/illustrated/arts-direction-next-v2.svg');
    padding-right:30px
}
.arts-titlepiece .arts-navigation a.arts-current{color:#f2cf92}
.arts-titlepiece .arts-navigation a:hover,
.arts-titlepiece .arts-navigation a:focus-visible{color:#fff;text-decoration:underline}
.arts-titlepiece .beast-dock{
    position:absolute;
    margin:0;
    height:auto;
    aspect-ratio:1;
    z-index:2
}
#cinema .cinema-heading{
    padding:56px 19% 78px;
    z-index:2
}
.js #cinema .cinema-heading{margin-bottom:-28px}
.cinema-heading .cinema-host{
    width:13%;
    left:1.8%;
    top:calc(62% - 12.2cqw)
}
#gallery > .container{position:relative;isolation:isolate}
#gallery .photography-heading{
    padding:70px 17% 66px 21%;
    z-index:2
}
.photography-heading .section-title{font-size:clamp(34px,5.1cqw,62px)}
.photography-heading .photo-host{
    width:12%;
    left:1.5%;
    top:calc(70% - 11.3cqw)
}
.gallery-camera{
    position:absolute;
    width:10%;
    height:auto;
    left:11.4%;
    top:calc(70% - 9.4cqw);
    z-index:1;
    pointer-events:none
}
.photography-heading .photography-studio-label{
    display:block;
    color:#dac5a4;
    font-size:18px;
    line-height:1.2;
    margin:9px 0 0
}
#gallery .photography-studio{padding-top:48px}
.gallery-rigging{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    pointer-events:none;
    overflow:visible;
    z-index:-1
}
.js .gallery-rigging{display:block}
.gallery-rope-origin{
    position:absolute;
    top:91.428571%;
    width:0;
    height:0
}
.gallery-rope-origin-left{left:23%}
.gallery-rope-origin-right{left:77%}
#gallery .gallery-print{position:relative}
.gallery-hanger{
    display:block;
    position:absolute;
    top:2.3%;
    left:9%;
    width:26px;
    aspect-ratio:32/42;
    transform:translate(-50%,-50%);
    background:url('/assets/illustrated/arts-picture-hanger-v2.svg') center/100% 100% no-repeat;
    pointer-events:none
}
.gallery-hanger-right{left:91%}
.gallery-rope-eye{
    position:absolute;
    left:50%;
    top:26.190476%;
    width:0;
    height:0
}
@media(min-width:1200px){
    .companion-enabled .cinema-host img,
    .companion-enabled .photo-host img{visibility:visible}
}
@media(min-width:651px) and (max-width:1000px){
    .arts-titlepiece .section-intro{font-size:21px}
    .arts-titlepiece .arts-navigation a{min-width:120px;font-size:19px;padding-inline:19px}
    #cinema .cinema-heading{padding-top:62px;padding-bottom:70px}
    #gallery .photography-heading{padding-top:64px;padding-bottom:62px}
}
@media(max-width:650px){
    #cinema .cinema-heading{
        width:calc(100% + 24px);
        margin-inline:-12px;
        padding:98px 10% 57px
    }
    .js #cinema .cinema-heading{margin-bottom:-25px}
    .arts-titlepiece .arts-eyebrow{font-size:18px;margin-bottom:7px}
    .arts-titlepiece .section-title{font-size:clamp(34px,10cqw,48px);letter-spacing:-1px;margin-bottom:9px}
    .arts-titlepiece .section-intro{font-size:21px;line-height:1.25;margin-bottom:9px}
    .arts-titlepiece .arts-navigation{gap:2px}
    .arts-titlepiece .arts-navigation a{font-size:18px;min-width:106px;min-height:48px;padding:9px 15px 11px}
    .arts-titlepiece .arts-navigation a:last-child{padding-right:21px}
    .cinema-heading .cinema-host{width:78px;left:calc(24% - 39px);top:calc(22.3% - 73px)}
    #gallery .photography-heading{padding:98px 10% 65px}
    .photography-heading .section-title{font-size:clamp(32px,10.3cqw,50px);line-height:1.05}
    .photography-heading .section-title span{display:block}
    .photography-heading .section-title span:first-child{font-size:24px;line-height:1.1;margin-bottom:2px}
    .photography-heading .photo-host{width:82px;left:calc(24% - 41px);top:calc(17.6% - 77px)}
    .gallery-camera{width:21%;left:60%;top:calc(17.6% - 19.7cqw)}
    .photography-heading .photography-studio-label{font-size:17px;margin-top:8px}
    .gallery-rope-origin-left{left:8%}
    .gallery-rope-origin-right{left:92%}
    #gallery .photography-studio{padding-top:45px}
    .gallery-hanger{width:20px}
}

/* A continuous theatre cabinet, from the crown to the carved programme foot. */
.cinema-house{position:relative;isolation:isolate}
.cinema-house::before,.cinema-house::after{
    content:"";
    position:absolute;
    pointer-events:none;
    z-index:-1
}
.cinema-house::before{
    inset:170px 1.5% 48px;
    border-radius:45% 45% 8% 8% / 85px 85px 40px 40px;
    background:radial-gradient(ellipse at 50% 15%,#392044,#21112e 60%,#170b22)
}
.cinema-house::after{
    inset:180px 0 51px;
    background:url('/assets/illustrated/arts-house-pilaster-v2.svg') left top/6.5% 560px repeat-y,
        url('/assets/illustrated/arts-house-pilaster-v2.svg') right top/6.5% 560px repeat-y
}
#cinema .cinema-stage{background-image:url('/assets/illustrated/arts-theatre-frame-v2.svg')}
/* Keep the screen's seven-pixel surround below the curved upper brass rim. */
#cinema .cinema-aperture{top:calc(11% + 14px)}
#cinema .cinema-valance{background-image:url('/assets/illustrated/arts-theatre-valance-v2.svg')}
#cinema .cinema-stage-sign{background-image:url('/assets/illustrated/arts-direction-next-v2.svg')}
#cinema .cinema-stage-floor{display:none}
#cinema .cinema-theatre > .barnacle-cluster{display:none}
#cinema .cinema-now-showing{
    width:100%;
    max-width:none;
    margin:0;
    padding:44px 13% 65px;
    gap:12px 22px;
    background:url('/assets/illustrated/arts-now-showing-v2.svg') center/100% 100% no-repeat
}
#cinema .cinema-now-showing .arts-eyebrow{color:#efcf97;font-size:21px}
#cinema .cinema-now-showing h3{font-size:32px;line-height:1.15;color:#f3e0ff}
#cinemaOpenFilm{
    min-width:140px;
    min-height:54px;
    padding:15px 28px;
    background:url('/assets/illustrated/arts-direction-next-v2.svg') center/100% 100% no-repeat;
    color:#f2d19e;
    font-size:21px;
    text-decoration:none;
    text-align:center
}
#cinemaOpenFilm:hover,#cinemaOpenFilm:focus-visible{text-decoration:underline;text-underline-offset:3px}
#cinema .cinema-credit{color:#e2c9db;font-size:20px;line-height:1.35;align-items:center}
#cinema .cinema-credit a{color:#ead7ed;max-width:100%;text-underline-offset:4px}
#cinema .cinema-status{min-height:0;margin:0;font-size:21px;line-height:1.35}
#cinema .cinema-status:not(:empty){padding:13px 12%}
#cinema .cinema-programme{position:relative;padding:8px 7.5% 130px}
#cinema .cinema-programme::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:130px;
    background:url('/assets/illustrated/arts-house-foot-v2.svg') center/100% 100% no-repeat;
    pointer-events:none
}
#cinema .cinema-programme-heading{
    max-width:none;
    margin:0 -3% 22px;
    padding:43px 24% 52px;
    text-align:center;
    background:url('/assets/illustrated/arts-programme-heading-v2.svg') center/100% 100% no-repeat
}
#cinema .cinema-programme-heading h3{font-size:36px;line-height:1.1;margin-bottom:8px;color:#f2d9ff}
#cinema .cinema-programme-heading p{color:#e2cadb;font-size:22px;line-height:1.3}
#cinema .cinema-films{gap:22px;margin:0;align-items:stretch}
#cinema .cinema-film{
    background-image:url('/assets/illustrated/arts-programme-mount-v2.svg');
    transform:none;
    padding:38px 39px 60px;
    transition:color .15s;
    filter:none
}
#cinema .cinema-film[aria-current=true]{color:#fff}
#cinema .cinema-film[aria-current=true] .cinema-film-art{outline:2px solid #cea36e;outline-offset:3px}
#cinema .cinema-film:hover .cinema-film-title,
#cinema .cinema-film:focus-visible .cinema-film-title{color:#ffe1ad;text-decoration:underline;text-underline-offset:4px}
#cinema .cinema-film-title{font-size:25px;line-height:1.15}
#cinema .cinema-film-art{clip-path:none;border-radius:3px}
#cinema .cinema-film-number{
    background:url('/assets/illustrated/arts-direction-prev-v2.svg') center/100% 100% no-repeat;
    color:#f2d5a0;
    padding:7px 17px;
    top:4px;
    left:2px
}
#cinema .cinema-film-meta{color:#d2b8d3;gap:8px}
#cinema .cinema-film-description{color:#e5d0e8}
#cinema .cinema-film-arrow{right:29px;bottom:27px;color:#efcd92}
#gallery .gallery-print{
    background-image:url('/assets/illustrated/arts-gallery-frame-v2.svg');
    /* Match the native opening as the frame expands through tablet widths. */
    padding:calc(6.8% + 5px) calc(7.6% + 5px) calc(9% + 6px)
}
#gallery .coverflow-btn{
    width:72px;
    height:82px;
    background:url('/assets/illustrated/arts-gallery-arrow-v2.svg') center/100% 100% no-repeat;
    color:#ffe1a7;
    transform:none;
    border:0;
    border-radius:0;
    filter:none
}
#gallery .coverflow-btn svg{width:27px;height:27px;filter:drop-shadow(0 2px 0 #24122d)}
#gallery .coverflow-btn:hover svg{color:#fff0d2}
@media(max-width:900px){
    #cinema .cinema-films{grid-template-columns:1fr;gap:17px}
    #cinema .cinema-film{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;padding:30px calc(9% + 10px) 45px}
    #cinema .cinema-film-art{height:185px;margin:0}
    #cinema .cinema-film-copy{justify-content:center;gap:10px}
    #cinema .cinema-programme-heading{padding-inline:17%;background-image:url('/assets/illustrated/arts-programme-heading-phone-v2.svg')}
    #cinema .cinema-now-showing{background-image:url('/assets/illustrated/arts-now-showing-phone-v2.svg');padding:40px 13% 64px}
    #cinema .cinema-credit{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
    #gallery .coverflow-btn{width:60px;height:69px}
}
@media(max-width:650px){
    .cinema-house{width:calc(100% + 24px);margin-inline:-12px}
    #cinema .cinema-heading{width:100%;margin-inline:0}
    #cinema .cinema-stage{margin-inline:0}
    .cinema-house::after{background-size:6.5% 370px;bottom:32px}
    .cinema-house::before{bottom:35px}
    #cinema .cinema-now-showing{padding:45px 13% 70px;gap:12px}
    #cinema .cinema-now-showing h3{font-size:27px}
    #cinema .cinema-now-showing .arts-eyebrow{font-size:20px}
    #cinemaOpenFilm{min-height:50px;min-width:130px;font-size:20px;padding:14px 25px}
    #cinema .cinema-credit{font-size:20px}
    #cinema .cinema-credit p{margin:0}
    #cinema .cinema-programme{padding:0 7% 82px}
    #cinema .cinema-programme::after{height:82px}
    #cinema .cinema-programme-heading{padding:47px 10% 57px;margin:0 -2% 15px}
    #cinema .cinema-programme-heading h3{font-size:29px}
    #cinema .cinema-programme-heading p{font-size:21px}
    #cinema .cinema-film{grid-template-columns:clamp(70px,21vw,88px) minmax(0,1fr);gap:12px;padding:27px calc(9% + 10px) 47px}
    #cinema .cinema-film-art{height:160px}
    #cinema .cinema-film-title{font-size:22px}
    #cinema .cinema-film-copy{gap:8px}
    #cinema .cinema-film-meta{font-size:15px;flex-wrap:wrap;gap:4px}
    #cinema .cinema-film-description{font-size:20px;line-height:1.25}
    #cinema .cinema-film-arrow{bottom:21px;right:26px}
    #gallery .coverflow-btn{width:46px;height:56px}
    #gallery .coverflow-prev{left:-12px}
    #gallery .coverflow-next{right:-12px}
    #gallery .coverflow-btn svg{width:21px;height:21px}
}