@charset "UTF-8";

/* Vanilla CSS — migrated off the (now broken) style.scss build.
 * Base styles come from common.css; the layer ORDER is declared
 * inline and first by MoXoW itself (m:head-layers, html-head-body.xsl),
 * so no stylesheet states it. The exhibition theme is loaded
 * separately, into @layer theme, via data/layout/defaults.xml.
 * This file is @layer site, near the last of them, so it has the
 * last word without out-specifying anything. */
@import url("/common/style/common.css");

@layer site {


/* The poster scales as one object, artwork and annotations together.
 *
 * The address, the times panel and the way in are placed by hand on the
 * home page, in pixels measured against the picture at full size:
 * top: 410px on a 380x570 picture. Let the picture shrink and they stay
 * where they were — measured at 320, the times panel still ended 472px
 * from the left of a 320px window, which was the whole of that page's
 * 152px of overflow.
 *
 * --poster-px is one pixel of that picture's own space: 1px while there
 * is room for it at full size, proportionally less once the column is
 * narrower. The frame adds 30px of mat and border, the same 30 at every
 * width, so the picture is what is left of the column after it.
 *
 * Each exhibition writes its own: the arithmetic is the same but the
 * picture is not (390 on invitation-au-japon). The font-size hands the
 * space to every annotation inside, 16 poster-px being the 1rem they
 * inherited at full size. */
.m-exhibition-poster {
    --poster-px: min(1px, calc((100cqi - 30px) / 380));

    font-size: calc(16 * var(--poster-px));

    /* nested, so the override cannot drift away from the declaration
       it overrides — as a second top-level block its win depended on
       source order alone (see the placard note below) */
    @container exhibition (inline-size < 470px) {
        --poster-px: min(1px, calc((100cqi - 30px - 36px) / 380));

        margin-inline-end: 36px;
    }
}


/* The times placard is laid across the right edge of the picture rather
 * than inside it: at full size it is 217 poster-px wide, starts at 200,
 * and so ends 37 past the 380 of artwork — 22 past the framed edge,
 * which a centred poster on a wide page has room for.
 *
 * Once the poster is as wide as the column there is no such room, and
 * the placard falls out of the window. Nor does it shrink in step: its
 * 1px borders stay 1px and its type rounds, so it measured 217 poster-px
 * at full size and 231 at 412, which is why the overflow came and went
 * with the width — 9px at 412, none at 390, 1px at 320.
 *
 * So where the poster is column-width, 36px is set aside for it: the
 * placard wants (231 + 200) - 395 = 36 poster-px past the frame, and a
 * poster-px is never more than a pixel. The picture is measured after
 * the reservation, which is why --poster-px is restated here — the two
 * have to agree or the composition drifts, and it did: stated only
 * above, the annotations kept placing themselves against a picture
 * 36px wider than the one being drawn.
 *
 * The threshold is 470 and not 410, the poster width: between the
 * two the poster is still full size but the column no longer has
 * the 22px the placard hangs over by, and one pixel of it showed
 * at 452. Above 470 there is room without reserving any.
 *
 * The override itself is nested in the .m-exhibition-poster rule
 * above, where the query wins structurally instead of by standing
 * after the rule it overrides. */

} /* @layer site */