/* Corner compositions. Each is drawn from the same top-left origin, then
   reflected into the chosen corner. A rounded outer edge keeps the silhouettes crisp. */
[data-content-art] {
    --edge: 1px;
    --estuary:
        radial-gradient(ellipse 105% 134% at -12% -73%, transparent 80%, #84bcab38 calc(80% + var(--edge)) 93%, transparent calc(93% + var(--edge))),
        radial-gradient(ellipse 108% 115% at -14% -39%, #a3cbbb33 74%, transparent calc(74% + var(--edge)));
    --sail:
        radial-gradient(ellipse 98% 148% at -37% -50%, #9e95c337 78%, transparent calc(78% + var(--edge))),
        radial-gradient(ellipse 96% 69% at -5% -14%, #adc8bd38 90%, transparent calc(90% + var(--edge)));
    --canopy:
        radial-gradient(ellipse 114% 61% at -7% -14%, #94c0a436 90%, transparent calc(90% + var(--edge))),
        radial-gradient(ellipse 49% 107% at -12% -17%, #bbd4a752 73%, transparent calc(73% + var(--edge)));
    --terrace:
        linear-gradient(151deg, #91afbd3d 17%, transparent calc(17% + var(--edge))),
        linear-gradient(154deg, #c4dadd5c 25%, transparent calc(25% + var(--edge))),
        linear-gradient(157deg, #d2dedb50 31%, transparent calc(31% + var(--edge)));
    --inlet:
        radial-gradient(ellipse 101% 140% at 83% 115%, transparent 86%, #9bc4cd33 calc(86% + var(--edge)) 94%, transparent calc(94% + var(--edge))),
        radial-gradient(ellipse 88% 80% at 0 0, #b4d4c62b 65%, transparent calc(65% + var(--edge)));
    --shell:
        radial-gradient(ellipse 92% 66% at -7% -9%, #b8caad40 92%, transparent calc(92% + var(--edge))),
        radial-gradient(ellipse 68% 79% at -8% -7%, #8db3a135 90%, transparent calc(90% + var(--edge))),
        radial-gradient(ellipse 45% 94% at -5% -8%, #c4cdd937 90%, transparent calc(90% + var(--edge)));
    --horizon:
        radial-gradient(ellipse 122% 126% at 61% 144%, transparent 95%, #719baf40 calc(95% + var(--edge)) calc(95% + 2px), transparent calc(95% + 2px + var(--edge))),
        radial-gradient(ellipse 108% 98% at 63% 120%, transparent 95%, #92b8bc38 calc(95% + var(--edge)) 100%, transparent calc(100% + var(--edge))),
        radial-gradient(ellipse 78% 96% at 0 0, #b4ced32b 66%, transparent calc(66% + var(--edge)));
    --art: var(--estuary);
    --companion: var(--horizon);
    /* Keep the approved desktop proportions; use the extra margin on wide screens. */
    --wide-width: clamp(0px, calc(18vw - 346px), 180px);
    --wide-height: clamp(0px, calc(8vw - 154px), 80px);
    --fluid-width: min(76vw, calc(40vw + 138px));
    --fluid-height: min(42vw, calc(23vw + 82px));
    --span: 620px;
    --rise: 360px;
    --x: 0%;
    --translate: 0%;
    --mirror: 1;
    --top: 0;
    --bottom: auto;
    --flip: 1;
    overflow-x: clip;
}

[data-content-art] :is(.content-main, .awards-framework, .awards-legal, .awards-faq) {
    /* Reach the outer page edge from a centred, max-width reading column. */
    --outset: calc((100% - 100vw) / 2);
}
[data-content-art] :is(.content-main, .awards-framework, .awards-categories, .awards-legal, .awards-faq, .auth-main, .member-portal),
[data-content-art] :is(.website-terms-of-use-page, .business-ethics-policy-page) > section:last-child {
    position: relative;
    isolation: isolate;
}
[data-content-art] :is(.content-main, .awards-framework, .awards-categories, .awards-legal, .awards-faq, .auth-main, .member-portal)::before,
[data-content-art] :is(.content-main, .awards-framework, .awards-categories, .awards-legal, .awards-faq)::after,
[data-content-art] :is(.website-terms-of-use-page, .business-ethics-policy-page) > section:last-child::before,
[data-content-art] :is(.website-terms-of-use-page, .business-ethics-policy-page) > section:last-child::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    left: calc(var(--x) + var(--mirror) * var(--outset, 0px));
    top: var(--top);
    bottom: var(--bottom);
    width: min(calc(var(--span) + var(--wide-width)), var(--fluid-width));
    height: min(calc(var(--rise) + var(--wide-height)), var(--fluid-height), 100%);
    opacity: var(--art-opacity, 1);
    transform: translateX(var(--translate)) scale(var(--mirror), var(--flip));
    background: var(--art);
    border-bottom-right-radius: 100%;
}

/* Use the opposite horizontal and vertical edges of the first motif.
   A short section gets a zero-height companion. As the actual copy wraps or
   an accordion expands, the second motif grows into the available space. */
[data-content-art] :is(.content-main, .awards-framework, .awards-categories, .awards-legal, .awards-faq)::after,
[data-content-art] :is(.website-terms-of-use-page, .business-ethics-policy-page) > section:last-child::after {
    --span: var(--companion-width, 550px);
    left: auto;
    right: calc(var(--x) + var(--mirror) * var(--outset, 0px));
    top: var(--bottom);
    bottom: var(--top);
    height: clamp(0px, calc(100% - 640px), min(var(--fluid-height), calc(var(--companion-height, 290px) + var(--wide-height))));
    transform: translateX(calc(-1 * var(--translate))) scale(calc(-1 * var(--mirror)), calc(-1 * var(--flip)));
    background: var(--companion);
}

/* Editorial compositions and their paired motifs. */
[data-content-page='about'] {
    --art: var(--estuary);
    --companion: var(--canopy);
    --companion-width: 510px;
    --companion-height: 300px;
    --span: 720px;
    --rise: 420px;
}
[data-content-page='consultancy'] {
    --art: var(--sail);
    --companion-width: 600px;
    --companion-height: 240px;
    --span: 740px;
    --rise: 360px;
}
[data-content-page='contact'] {
    --art: var(--inlet);
    --companion: var(--canopy);
    --span: 560px;
    --rise: 320px;
}
[data-inner-page='digital-sustainability'] {
    --art: var(--terrace);
    --companion: var(--inlet);
    --span: 600px;
    --rise: 310px;
}
[data-inner-page='insights'] {
    --art: var(--shell);
    --companion: var(--estuary);
    --span: 690px;
    --rise: 330px;
}
[data-inner-page='insight'] {
    --art: var(--sail);
    --span: 560px;
    --rise: 370px;
}
[data-inner-page='reports'] {
    --art: var(--horizon);
    --companion: var(--shell);
    --span: 780px;
    --rise: 280px;
}
[data-inner-page='report'] {
    --art: var(--terrace);
    --companion: var(--inlet);
    --span: 590px;
    --rise: 270px;
}
[data-inner-page='insight-author'], [data-inner-page='public-jury-profile'] {
    --art: var(--canopy);
    --companion: var(--sail);
    --span: 540px;
    --rise: 380px;
}
[data-inner-page='public-jury'] {
    --art: var(--shell);
    --companion: var(--estuary);
    --span: 600px;
    --rise: 280px;
}

[data-content-page='website-terms'], [data-inner-page='website-terms-of-use'] {
    --art: var(--horizon);
    --companion: var(--shell);
}
[data-content-page='privacy'] {
    --art: var(--inlet);
    --companion: var(--canopy);
    --span: 580px;
    --rise: 280px;
}
[data-content-page='business-ethics'], [data-inner-page='business-ethics-policy'] {
    --art: var(--sail);
    --span: 540px;
}
[data-content-page='diversity-equity-inclusion'] {
    --art: var(--shell);
    --companion: var(--estuary);
    --rise: 410px;
}
[data-content-page='environmental-sustainability'] {
    --art: var(--canopy);
    --companion: var(--sail);
    --span: 680px;
}
[data-content-page='impact-measurement-reporting'] {
    --art: var(--terrace);
    --companion: var(--inlet);
    --rise: 250px;
}
[data-content-page='supplier-responsibility'] {
    --art: var(--canopy);
    --companion: var(--sail);
    --span: 510px;
    --rise: 430px;
}
[data-content-page='responsible-claims-communications'] {
    --art: var(--estuary);
    --span: 700px;
    --rise: 260px;
}
[data-content-page='awards-programme-framework'] {
    --art: var(--horizon);
    --companion: var(--shell);
    --span: 670px;
}

[data-content-art] .awards-framework {
    --art: var(--canopy);
    --companion: var(--sail);
    --span: 740px;
    --rise: 430px;
}
[data-inner-page='awards-criteria'] .awards-framework {
    --art: var(--terrace);
    --companion: var(--inlet);
    --span: 700px;
}
[data-inner-page='awards-apply'] .awards-framework {
    --art: var(--sail);
    --rise: 320px;
}
[data-content-art] .awards-categories {
    --art: var(--shell);
    --companion: var(--estuary);
    --span: 660px;
    --rise: 370px;
}
[data-inner-page='awards-categories'] .awards-categories {
    --art: var(--estuary);
    --rise: 450px;
}
[data-content-art] #programme-terms {
    --art: var(--terrace);
    --companion: var(--inlet);
    --span: 540px;
    --rise: 270px;
}
[data-content-art] #confidentiality-principles {
    --art: var(--inlet);
    --companion: var(--canopy);
    --span: 690px;
    --rise: 370px;
}
[data-content-art] .awards-faq {
    --art: var(--horizon);
    --companion: var(--shell);
    --span: 740px;
    --rise: 310px;
}

[data-content-art] .auth-main { --art: var(--inlet); --span: 410px; --rise: 280px; }
[data-inner-page^='register'] .auth-main { --art: var(--canopy); }
[data-inner-page='forgot-password'] .auth-main { --art: var(--sail); }
[data-inner-page='reset-password'] .auth-main { --art: var(--terrace); }
[data-content-art] .member-portal { --art: var(--horizon); --span: 680px; --rise: 320px; }
[data-inner-page^='application-'] .member-portal { --art: var(--terrace); }
[data-inner-page^='jury'] .member-portal { --art: var(--canopy); }

/* Right-hand corners. Reflection keeps the origin on the actual page edge. */
:is([data-content-page='consultancy'], [data-content-page='privacy'], [data-content-page='environmental-sustainability'],
    [data-content-page='awards-programme-framework'], [data-content-page='impact-measurement-reporting'],
    [data-inner-page='insights'], [data-inner-page='report'], [data-inner-page='public-jury-profile'], [data-inner-page='reset-password']),
[data-content-art] :is(.awards-categories, #confidentiality-principles, .auth-main, .member-portal),
[data-inner-page='awards-criteria'] .awards-framework {
    --x: 100%; --translate: -100%; --mirror: -1;
}

/* At the framework/category seam the closing and opening accents sit on
   opposite edges, so they read as two separate sections. */
[data-inner-page='awards'] #general-framework + .awards-categories {
    --x: 0%;
    --translate: 0%;
    --mirror: 1;
}

/* Bottom-hand corners meet the section boundary without entering the next section. */
:is([data-content-page='contact'], [data-content-page='business-ethics'], [data-content-page='privacy'],
    [data-content-page='supplier-responsibility'], [data-content-page='responsible-claims-communications'],
    [data-inner-page='digital-sustainability'], [data-inner-page='insight'], [data-inner-page='reports']),
[data-content-art] :is(#confidentiality-principles, .awards-faq, .auth-main, .member-portal),
[data-inner-page='awards-categories'] .awards-categories {
    --top: auto; --bottom: 0; --flip: -1;
}

/* Adjacent legal rows share one paper surface. Only its two outer corners
   carry artwork, even when the text wraps into tall mobile sections. */
#programme-terms:has(+ #confidentiality-principles)::after,
#programme-terms + #confidentiality-principles::after {
    content: none;
}

/* Keep mid-page accents in the outer margins when space allows. */
@media (min-width: 1600px) {
    #general-framework .awards-framework-section:nth-child(8n + 6):not(:last-child),
    [data-content-art] .content-detail-layout,
    [data-content-art] .about-page .corporate-work {
        position: relative;
    }
    #general-framework .awards-framework-section:nth-child(8n + 6):not(:last-child)::after,
    [data-content-art] .content-detail-layout::after,
    [data-content-art] .about-page .corporate-work::after {
        content: '';
        position: absolute;
        pointer-events: none;
        top: 50%;
        right: calc((100% - 100vw) / 2);
        width: min(440px, calc((100vw - 100%) / 2 - 20px));
        height: clamp(0px, calc(100% - 760px), 350px);
        transform: translateY(-50%);
        background: radial-gradient(ellipse 84% 47% at 111% 50%, transparent 81%, #a6cec23b calc(81% + var(--edge)) 97%, transparent calc(97% + var(--edge)));
    }
    #general-framework .awards-framework-section:nth-child(8n + 6):not(:last-child)::after {
        left: calc((100% - 100vw) / 2);
        right: auto;
        height: min(320px, 56%);
        transform: translateY(-50%) scaleX(-1);
    }
    [data-content-art] .about-page .corporate-work::after {
        height: min(280px, 45%);
    }
}

/* Keep the transition to clear paper within a device pixel on Retina. */
@media (min-resolution: 2dppx) {
    [data-content-art] { --edge: .5px; }
}

@media (max-width: 1024px) {
    [data-content-art] { --art-opacity: .85; }
}
@media (max-width: 700px) {
    [data-content-art] { --art-opacity: .72; }
}

[data-content-art] .hero-art-form,
[data-content-art] .about-page .content-hero::before,
[data-content-art] .about-page .content-hero::after { animation: none; }