@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 placard and the way in are placed by hand on the
 * home page, in pixels measured against the picture at full size. Let the
 * picture shrink and they stay where they were: measured before this, at
 * 390 the artwork came down to 324x473 while the placard held its 231x119
 * at the same offset, and the page scrolled 54px sideways -- 124px at 320.
 *
 * --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.
 *
 * The artwork is 390x570 here and not the 380 of nacelles, carnaval and
 * et-la-lumiere-fut: the theme fixes the height and this poster's source
 * is 411x600 rather than 400x600. The arithmetic is shared, the picture is
 * not, which is why each site writes its own. 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) / 390));

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

/* The map and the climate chart were 600x300 boxes stated inline, and a
 * 600px box does not fit a 390px phone: the page measured 710px wide at
 * every viewport below 700.
 *
 * The chart needed only to have that inline style taken off it —
 * mxw-climate-chart.css states its own 100% / max 600 / 200 tall sizing,
 * which the inline width was overriding. (Its inline floor is
 * min(300px, 100%), so it never passes the column.)
 *
 * The map states the same shape here: 600 as a CEILING, the column when
 * there is less, and the height from an aspect-ratio rather than a stated
 * length, so OpenLayers always has a definite box to draw into.
 *
 * block-size: auto is the load-bearing line. The component's own sheet
 * defaults it to 400px, and a stated height leaves nothing for the
 * aspect-ratio to decide: measured at a 320px viewport the map was
 * 284 x 400 — an aspect ratio of 0.7 where this asks for 2. Hand the
 * height back and the ratio derives it from the used width. */
mxw-map {
	display:		block;
	inline-size:		100%;
	max-inline-size:	600px;
	block-size:		auto;
	aspect-ratio:		2;
	margin-inline:		auto;
}


/* The table of contents as one quiet line under the heading, not the
 * theme's placard on the rail: five short entries need no column, and
 * the placard held a whole band of the page with nothing beside it —
 * the rail's cost, paid by the tallest element on the page. The mat,
 * the brass rule and the shadow stay, so it still reads as the same
 * furniture; the handle leads the line the way the link-references
 * label does. Site-layer override; the theme's rail default stands. */
.mxw-toc {
	display:		flex;
	flex-wrap:		wrap;
	align-items:		baseline;
	gap:			0.3em 1.5em;
	inline-size:		auto;
	max-inline-size:	none;
	margin-inline-start:	0;
	margin-block-end:	1em;
	padding-block:		0.5em 0.6em;

	& > div:first-child {
		margin-block-end:	0;
		padding-block-end:	0;
		border-block-end:	none;
	}

	& ul {
		display:	flex;
		flex-wrap:	wrap;
		gap:		0.3em 1.5em;

		& li + li { border-block-start: none; }
	}
}


/*
 * Guide (links)
 */
/* The references row: the book covers grow on the left, the guides
 * placard stands on the right — a flex row instead of the float that
 * was measured overhanging the following section and the footer band
 * whenever its own section ran short (floats are gone sitewide; the
 * .mxw-toc story in the theme). The covers come first in the source,
 * so reading and tab order match the picture, and the pair wraps to a
 * stack when the column can no longer hold both. */
.references-row {
	display:	flex;
	flex-wrap:	wrap;
	justify-content: space-between;
	align-items:	flex-start;
	gap:		1em 2em;

	/* the left column: the covers with the santé line under them,
	   at their own width — space-between holds the placard to the
	   right edge and leaves the middle open */
	& > .references-main {
		flex:		0 1 auto;
		min-inline-size: 0;
	}

	& > .guide-links {
		flex:		0 0 auto;
		margin:		0;
	}
}

/* Country guides: a documentation placard — flag on top, one labelled
 * row per guide. Tokens come from exhibition-standard.css; the a:link /
 * a:visited selectors outweigh the theme's generic link colors. */
.guide-links {
	margin:			0 1em;
	padding:		0.8em 1em;
	color:			var(--color-mat-ink);
	background-color:	var(--color-mat);
	border-top:		3px solid var(--color-brass);
	box-shadow:		var(--shadow-placard);
}
.guide-links .flag {
	margin-bottom:		0.4em;
	padding-bottom:		0.5em;
	text-align:		center;
	border-bottom:		1px solid rgb(36 31 26 / 0.2);
}
.guide-links .flag img {
	width:			90px;
}
.guide-links ul {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.guide-links li + li {
	border-top:		1px solid rgb(36 31 26 / 0.1);
}
.guide-links a,
.guide-links a:link,
.guide-links a:visited {
	display:		flex;
	align-items:		center;
	gap:			0.6em;
	padding:		0.25em 0;
	font-family:		var(--font-body);
	font-size:		0.85rem;
	color:			var(--color-mat-ink);
	text-decoration:	none;
}
.guide-links a:hover,
.guide-links a:focus-visible {
	color:			var(--color-mat-brass);
	text-decoration:	none;
}
.guide-links a img {
	width:			24px;
	height:			24px;
}

} /* @layer site */