/* Art accents: visual rest for text-heavy pages (Biennale 14 preview).
   Decorative imagery only. Every image has alt="" and sits outside the reading flow,
   and none of them is tied to a place, so event and city pages never look as if
   they were photographed at the event. Classes:
     .art-int      interlude band (optional epigraph), full colour or tinted
     .art-ribbon   slim strip used as a section break
     .art-mosaic   four-tile collage
     .art-top      chapter-opening banner above an article
     .art-hero-side  faded art at the right of a page masthead                      */
.art-int,.art-ribbon,.art-top,.art-mosaic{--art-tint:#2b2622;--art-ink:#fff;position:relative;overflow:hidden;isolation:isolate;background:var(--art-tint);margin:clamp(2rem,5vw,3.4rem) 0;display:block}
.art-int>img,.art-ribbon>img,.art-top>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.art-int{height:clamp(190px,26vw,300px)}
.art-ribbon{height:clamp(54px,7vw,92px)}
.art-top{height:clamp(120px,17vw,210px);margin:clamp(1.6rem,4vw,2.6rem) 0 0}
/* tinted: the photograph becomes a tone of the page's own accent colour */
.art-tint>img{mix-blend-mode:luminosity;opacity:.82}
/* scrim for any text laid on art */
.art-int::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,14,18,.78) 0%,rgba(14,14,18,.5) 48%,rgba(14,14,18,.1) 100%);pointer-events:none}
.art-int--bare::after{display:none}
.art-q{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:.7rem;padding:0 clamp(1.25rem,5vw,3rem);max-width:min(34rem,86%);text-decoration:none;color:var(--art-ink)}
.art-q q{quotes:none;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.22;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.art-q cite{font:600 .6rem/1.4 Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:rgba(255,255,255,.78)}
.art-q:hover cite{color:#fff}
/* mosaic: one large tile, two small, one block of colour */
.art-mosaic{height:clamp(170px,24vw,250px);display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;background:transparent;overflow:visible}
.art-mosaic>*{position:relative;overflow:hidden;background:var(--art-tint)}
.art-mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art-mosaic>:nth-child(1){grid-row:1 / span 2}
.art-mosaic>:nth-child(4){grid-column:2 / span 2}
.art-mosaic .art-block{background:var(--art-block,#9c2a13)}
@media(max-width:640px){.art-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.art-mosaic>:nth-child(1){grid-row:auto;grid-column:1 / span 2}.art-mosaic>:nth-child(4){grid-column:auto}.art-mosaic{height:auto;grid-auto-rows:110px}.art-mosaic>:nth-child(1){height:160px}}
/* masthead art: fades into the ivory page, hidden on narrow screens */
.art-hero-side{position:absolute;top:0;right:0;height:min(100%,330px);width:min(40%,520px);z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(180deg,#000 62%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(180deg,#000 62%,transparent 100%);mask-composite:intersect}
.art-hero-side img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.masthead>*:not(.art-hero-side){position:relative;z-index:1}
@media(max-width:900px){.art-hero-side{display:none}}
@media print{.art-int,.art-ribbon,.art-top,.art-mosaic,.art-hero-side{display:none}}

/* quiet mode (.art-s): small accents for the dense event and country pages */
.art-int.art-s,.art-ribbon.art-s,.art-mosaic.art-s{width:min(1080px,calc(100% - 48px));margin-left:auto;margin-right:auto}
.art-int.art-s{height:clamp(76px,7vw,96px);margin-top:2.2rem;margin-bottom:2.2rem}
.art-int.art-s .art-q{gap:.35rem;max-width:min(40rem,92%)}
.art-int.art-s .art-q q{font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.25}
.art-int.art-s .art-q cite{font-size:.54rem}
.art-ribbon.art-s{height:clamp(20px,2.2vw,28px);margin-top:2rem;margin-bottom:2rem}
.art-mosaic.art-s{height:clamp(54px,5.5vw,72px);grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;margin-top:2rem;margin-bottom:2rem}
.art-mosaic.art-s>:nth-child(1){grid-row:auto}
.art-mosaic.art-s>:nth-child(4){grid-column:auto}
.art-hero-side.art-s{height:min(100%,210px);width:min(26%,340px);opacity:.6}
@media(max-width:640px){.art-mosaic.art-s{grid-template-columns:repeat(2,1fr);height:auto}.art-mosaic.art-s>*{height:54px}.art-mosaic.art-s>.art-block{display:none}}

/* quiet mode: imagery reads as colour and texture, never as a featured work */
.art-s img{transform:scale(1.7);transform-origin:center}
.art-s.art-tint img,.art-mosaic.art-s.art-tint img{mix-blend-mode:luminosity;opacity:.78}
.art-mosaic.art-s>span:not(.art-block){background:var(--art-tint)}
.art-hero-side.art-s{opacity:.7}
.art-hero-side.art-s img{filter:blur(1.2px) saturate(.8)}

/* faded art behind dark blocks (My Biennale band, country-page breakers) */
.art-bg{position:relative;isolation:isolate;overflow:hidden}
.art-bg::before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.55;transform:scale(1.5)}
.art-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,18,24,.82) 0%,rgba(18,18,24,.55) 55%,rgba(18,18,24,.28) 100%);pointer-events:none}
section.myb.art-bg>*,.m-breaker.art-bg>*{position:relative;z-index:1}
.art-bg-1::before{background-image:url(../img/art/art-layered-arch.jpg)}
.art-bg-2::before{background-image:url(../img/art/art-pastel-blocks.jpg)}
.art-bg-3::before{background-image:url(../img/art/art-color-panels.jpg)}
.art-bg-4::before{background-image:url(../img/art/art-faceted-paper.jpg)}
.art-bg-5::before{background-image:url(../img/art/art-glowing-orbs.jpg)}
.art-bg-6::before{background-image:url(../img/art/art-color-grid.jpg)}
.art-bg-7::before{background-image:url(../img/art/art-green-glass.jpg)}
.art-bg-8::before{background-image:url(../img/art/art-pale-stairs.jpg)}
@media print{.art-bg::before,.art-bg::after{display:none}}

/* single scattered squares: visual accents that sit in the text like a drop cap */
.art-sq{display:block;float:left;width:var(--s,20px);height:var(--s,20px);margin:.28em 14px 4px 0;background:var(--b,#999)}
.art-sq.r{float:right;margin:.34em 0 4px 18px}
.art-sq.f{background-color:#ddd;background-image:var(--i);background-size:var(--z);background-position:var(--p)}
.art-sq.o{background:transparent;box-shadow:inset 0 0 0 2px var(--b)}
.art-sq.n{background:transparent;box-shadow:inset 0 0 0 2px var(--b);position:relative}
.art-sq.n::after{content:"";position:absolute;inset:24%;box-shadow:inset 0 0 0 2px var(--b)}
.art-sq.n::before{content:"";position:absolute;inset:44%;background:var(--b)}
@media(max-width:700px){.art-sq{width:calc(var(--s,20px)*.6);height:calc(var(--s,20px)*.6)}}
@media print{.art-sq{display:none}}