/*
-----------------------------------------------
	www.charlesbourely.ch
	Charles Bourely Architecte, Genève
	by Simon Malz www.lichtsignale.de
----------------------------------------------- */

/*	R E S E T
----------------------------------------------- */

*, *::before, *::after {
	box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption,
dl, dd, ol, ul, menu, fieldset, legend, pre, hr {
	margin: 0;
	padding: 0;
}

ol, ul, menu {
	list-style: none;
}

[hidden] {
	display: none !important;
}

html {
	scroll-padding-block-start: calc(var(--unit) * 3);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color-scheme: light;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg, iframe {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

input, button, textarea, select, p, li, dd, h1, h2, h3, h4, h5, h6 {
	min-inline-size: 0;
	overflow-wrap: break-word;
}

textarea:not([rows]) {
	min-block-size: 8em;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

blockquote, q {
	quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	::details-content {
		transition-duration: 0.01ms !important;
	}
}


/*	W E B F O N T S
----------------------------------------------- */

/* LEGAL DISCLAIMER
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * charlesbourely.ch
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Optimo webfonts are protected by copyright law and provided under license. To modify, alter, translate, convert, decode or reverse engineer in any manner whatsoever, including converting the Font Software into a different format is strictly prohibited. The webfont files are not to be used for anything other than web font use.
 *
 * optimo.ch
 */

@font-face {
	font-family: "Plain";
	src: url("fonts/Plain-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Martina Plantijn";
	src: url("fonts/martina-plantijn-regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/*	V A R I A B L E S
----------------------------------------------- */

:root {
	--scale: 1;
	--type: 1;


	--color-text: #181818;
	--color-bg: #fff;
	--color-grey: #939598;
	--color-field: #f8f7f6;


	--serif: "Martina Plantijn", "Iowan Old Style", Georgia, serif;
	--sans: "Plain", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-size: calc(1rem * var(--scale) * var(--type));
	--font-size-small: calc(0.875rem * var(--scale) * var(--sans-fit) * var(--type));
	--font-size-title: calc(1.125rem * var(--scale) * var(--sans-fit) * var(--type));
	--font-size-fine: calc(0.75rem * var(--scale) * var(--sans-fit) * var(--type));
	--leading: 1.35;

	--sans-fit: 1.058;
	--sans-drop: 0.0965em;


	--line: calc(1.25rem * var(--scale) * var(--type));


	--unit: calc(22.68px * var(--scale));
	--gutter: var(--unit);
	--gutter-v: calc(var(--unit) * 4);
	--margin: var(--unit);
	--width: 100%;


	--column-text: calc(421.78px * var(--scale));
	--gutter-large: calc(var(--unit) * 2);

	--text-width: calc(var(--column-text) - var(--gutter-large));
	--column-first: calc((100% - 2 * var(--gutter-large)) / 3);


	--text-offset: calc(4.6px * var(--scale));
	--fiche-column: calc(5.125rem * var(--scale) * var(--type));


	--stroke: 1.45px;
	--space: 0.252em;
}


/*	B A S I C S
----------------------------------------------- */

body {
	color: var(--color-text);
	background: var(--color-bg);
	font-family: var(--serif);
	font-size: var(--font-size);
	line-height: var(--line);
	font-kerning: normal;

	font-variant-numeric: oldstyle-nums;
	max-inline-size: var(--width);
	margin-inline: auto;
	padding: var(--margin);

	padding-block-end: calc(28.05px * var(--scale));
	text-wrap: pretty;
	hyphens: auto;
	hyphenate-limit-chars: 8 4 4;

	display: flex;
	flex-direction: column;
	min-block-size: 100dvh;
}

a {
	color: inherit;
	text-decoration: none;
}

main p a,
main li a,
main dd a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	inset-block-start: calc(var(--unit) * -4);
	inset-inline-start: var(--margin);
	background: var(--color-bg);
	font-family: var(--sans);
	font-size: var(--font-size-small);
	padding: calc(var(--unit) / 2);
	z-index: 10;
}

.skip-link:focus {
	inset-block-start: var(--unit);
}


/*	H E A D E R
----------------------------------------------- */

header {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: var(--gutter);
	font-family: var(--sans);
	font-size: var(--font-size-small);

	position: sticky;
	inset-block-start: var(--unit);
	z-index: 5;
}


header::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: calc(var(--unit) * -1);
	inset-block-end: calc((var(--unit) + 5.36px * var(--scale) + 1px) * -1);
	inset-inline-start: calc(50% - 50vw);
	inline-size: 100vw;
	background: var(--color-bg);
}


main {
	flex-grow: 1;
	margin-block-start: calc(var(--gutter-v) - var(--line));
}

.brand {
	overflow-wrap: break-word;
}

.brand a {
	display: inline-block;
	padding-block: calc(var(--unit) / 2);
	margin-block: calc(var(--unit) / -2);
}

nav.main ul {
	display: flex;
	gap: var(--gutter);
}

nav.main a {
	color: var(--color-grey);
	display: inline-block;
	padding-block: calc(var(--unit) / 2);
	margin-block: calc(var(--unit) / -2);
}

nav.main a:hover,
nav.main a:focus-visible,
nav.main a[aria-current="page"] {
	color: var(--color-text);
}

.burger {
	display: none;
	background: none;
	border: 0;
	padding: calc(var(--unit) / 2);
	margin: calc(var(--unit) / -2);
	cursor: pointer;
}


.burger span {
	display: block;
	inline-size: calc(18px * var(--scale));
	block-size: calc(var(--stroke) * var(--scale));
	background: var(--color-text);
	margin-block: calc(4px * var(--scale));
	transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(calc((var(--stroke) + 4px) * var(--scale))) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(calc((var(--stroke) + 4px) * var(--scale) * -1)) rotate(-45deg);
}


/*	T I T L E ,   C A P T I O N ,   N U M B E R
----------------------------------------------- */

.brand,
nav.main ul,
h1:not(.serif),
figcaption,
.caption,
.credits,
.note,
.tile .name,
.group-title,
.fiche,
.certification p,
.footer-text,
.pager,
dialog.lightbox .topbar,
dialog.lightbox .caption-line {
	translate: 0 var(--sans-drop);
}

h1 {
	font-family: var(--sans);
	font-size: var(--font-size-title);
	font-weight: normal;
	line-height: var(--line);
	margin-block-end: var(--line);
}

h1.serif {
	font-family: var(--serif);
	font-size: var(--font-size);
}

h1:not(.serif) {
	line-height: 1.2;
	margin-block-start: calc((var(--line) - 1.2em) / 2);
}

figcaption,
.caption,
.credits,
.note {
	font-family: var(--sans);
	font-size: var(--font-size-fine);
	line-height: var(--leading);
	color: var(--color-grey);
}


.caption {
	position: relative;
}


.number {
	position: absolute;
	inset-inline-end: calc(var(--gutter) * -1);
	inset-block-start: 0;
	white-space: nowrap;
}


header,
footer,
h1:not(.serif),
figcaption,
.caption,
.credits,
.note,
.pager,
.tile .name,
.group-title,
.skip-link,
dialog.lightbox {
	font-variant-numeric: lining-nums;
}

.fiche {
	font-variant-numeric: lining-nums;
}


.block.head-block .caption {
	position: absolute;
	inset-block-start: calc(var(--text-offset) * -1);
	inset-inline-start: 0;
	inline-size: var(--column-first);
	padding-inline-end: 0;
}


/*	I M A G E   A N D   C A P T I O N   (Aperçu)
----------------------------------------------- */

figure {
	margin-block-end: var(--gutter-v);
}

figcaption {
	margin-block-start: calc(var(--unit) / 4);
}


figure.field > a {
	display: grid;
	place-items: center;
	isolation: isolate;
	aspect-ratio: var(--w) / var(--h);
	background: var(--field, var(--color-field));
}

figure.field img {
	mix-blend-mode: multiply;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 100%;
	object-fit: contain;
}

figure.field.dark img {
	mix-blend-mode: screen;
	filter: invert(1);
}

.apercu {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--gutter-large);
}

.apercu figure {
	align-self: start;
	cursor: pointer;
	margin-block-end: calc(var(--gutter-v) - var(--unit));
}

.apercu figure.c1 {
	grid-column: 1;
}

.apercu figure.c2 {
	grid-column: 2;
}

.apercu figure.c3 {
	grid-column: 3;
}

.apercu img {
	inline-size: 100%;
	block-size: auto;
}


/*	P R O J E T S   (overview)
----------------------------------------------- */

.grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--gutter-large);
	row-gap: var(--gutter-v);
	padding-block-end: calc(var(--unit) / 4 + var(--font-size-fine) * var(--leading) * 2);
}

.tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
}

.tile img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.tile.field {
	isolation: isolate;
	background: var(--field, var(--color-field));
}

.tile.field img {
	object-fit: contain;
	mix-blend-mode: multiply;
}

.tile.field.dark img {
	mix-blend-mode: screen;
	filter: invert(1);
}

.tile .name {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	padding-block-start: calc(var(--unit) / 4);
	font-family: var(--sans);
	font-size: var(--font-size-fine);
	line-height: var(--leading);
	color: var(--color-text);
}

@media (hover: hover) {
	.tile .name {
		color: var(--color-grey);
	}
	.tile:hover .name,
	.tile:focus-visible .name {
		color: var(--color-text);
	}
}

.group + .group {
	margin-block-start: calc(var(--unit) * 5.8);
}

.group-title {
	font-family: var(--sans);
	font-size: var(--font-size-small);
	font-weight: normal;
	margin-block-end: calc(var(--unit) / 2);
}


/*	P R O J E C T   P A G E
----------------------------------------------- */

.block {
	position: relative;
	display: grid;
	grid-template-columns: var(--column-first) minmax(0, 1fr);
	grid-auto-flow: dense;
	column-gap: var(--gutter-large);
	align-items: start;

	margin-block-end: var(--gutter);
}

.block > .text {
	grid-column: 1;
	margin-block-start: calc(var(--text-offset) * -1);
}
.block > .images {
	grid-column: 2;
	display: grid;
	gap: var(--gutter);
	align-items: start;
}

.images.side-by-side {
	display: flex;
	gap: var(--gutter);
}

.images.side-by-side > * {
	flex-grow: calc(var(--w) / var(--h));
	flex-basis: 0;
	min-inline-size: 0;
}

.images.side-by-side > :only-child {
	max-inline-size: calc(50% - var(--gutter) / 2);
}

.block figure {
	margin-block-end: 0;
}

.block.head-block figure.half {
	max-inline-size: calc(50% - var(--gutter) / 2);
}

.block img {
	inline-size: 100%;
	block-size: auto;
}


.fiche {
	font-family: var(--sans);
	font-size: var(--font-size-fine);
	line-height: var(--leading);
	display: grid;
	grid-template-columns: var(--fiche-column) minmax(0, 1fr);
}

.fiche dt {
	color: var(--color-grey);
}

.text p + p {
	margin-block-start: var(--line);
}

.block .text > :not(.caption) {
	max-inline-size: var(--text-width);
}

.block .caption {
	padding-inline-end: var(--gutter-large);
}




.credits {
	margin-block-start: var(--gutter-v);
	max-inline-size: var(--text-width);
}

.credits p + p,
.column .note p + p {
	margin-block-start: calc(var(--font-size-fine) * var(--leading));
}

.lining-figures {
	font-variant-numeric: lining-nums;
}


/*	B U R E A U ,   C O N T A C T ,   L E G A L
----------------------------------------------- */

.three-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--gutter-large);
	align-items: start;
}

.column h2,
.one-column h2 {
	font-size: var(--font-size);
	font-weight: normal;
	margin-block-end: var(--line);
}

.column p + h2,
.one-column p + h2 {
	margin-block-start: var(--line);
}

.one-column {
	max-inline-size: var(--column-text);
}

.one-column p + p,
.column p + p {
	margin-block-start: var(--line);
}


.column > * + * {
	margin-block-start: calc(var(--line) * 2);
}

.column > .page-text + .page-text {
	margin-block-start: var(--gutter-v);
}

.page-text.field {
	padding: var(--unit);
	background: var(--field);
}

.page-text.dark {
	color: var(--color-bg);
}

.page-image {
	margin-block-end: 0;
}

.page-image img {
	inline-size: 100%;
	block-size: auto;
}

.page-image figcaption {
	margin-block-start: calc(var(--unit) / 2);
}

.text-block {
	display: grid;
	padding: var(--unit);
	background: var(--field, transparent);
}

.text-block::before {
	content: "";
	grid-area: 1 / 1;
	padding-block-start: calc(100% * var(--h) / var(--w) + 2 * var(--unit) * (var(--h) / var(--w) - 1));
}

.text-columns {
	grid-area: 1 / 1;
	columns: calc(var(--text-width) * 0.7) 2;
	column-gap: var(--gutter-large);
}

.text-columns > * {
	max-inline-size: calc(var(--text-width) * 1.5);
}

.text-block p + p {
	margin-block-start: var(--line);
}

.text-block.dark {
	color: var(--color-bg);
}


/*	C E R T I F I C A T I O N S
----------------------------------------------- */

.certifications {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--gutter-large);
	row-gap: var(--gutter);
	align-items: start;

	grid-column: 2;
}

.certification img {
	inline-size: calc(var(--unit) * 5);
	block-size: auto;
	margin-block-end: calc(var(--unit) / 2);
}

.certification p {
	font-family: var(--sans);
	font-size: var(--font-size-fine);
	line-height: var(--leading);
}


/*	F O O T E R
----------------------------------------------- */

footer {
	display: grid;
	grid-template-columns: var(--column-first) minmax(0, 1fr);
	column-gap: var(--gutter-large);
	align-items: start;
	font-family: var(--sans);
	font-size: var(--font-size-fine);
	line-height: var(--leading);
	margin-block-start: var(--gutter-v);
	border-block: 1px solid var(--color-grey);
	padding-block: calc(var(--gutter) - var(--unit) / 6) calc(var(--gutter) + var(--unit) / 6);
}

.pager-row {
	display: grid;
	grid-template-columns: var(--column-first) minmax(0, 1fr);
	column-gap: var(--gutter-large);
	margin-block-start: var(--gutter-v);
}

.pager-row + footer {
	margin-block-start: var(--gutter-large);
}


.pager {
	font-family: var(--sans);
	font-size: var(--font-size-small);
}

.footer-text {
	grid-column: 1;
	max-inline-size: var(--text-width);
}

footer .legal,
footer .legal a {
	color: var(--color-grey);
}

.pager a {
	display: inline-block;
	padding-block: calc(var(--unit) / 2);
	margin-block: calc(var(--unit) / -2);
}

footer .legal a:hover,
footer .legal a:focus-visible {
	color: var(--color-text);
}


.pager {
	grid-column: 2;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	column-gap: calc(var(--unit) * 3.4);
}

.pager .prev { grid-column: 1; justify-self: end; }
.pager .middle { grid-column: 2; }
.pager .next { grid-column: 3; justify-self: start; }


.pager .middle,
.pager span {
	color: var(--color-grey);
}

.pager .prev span {
	margin-inline-start: var(--space);
}

.pager .next span {
	margin-inline-end: var(--space);
}

.pager a:hover span,
.pager a:focus-visible span {
	color: var(--color-text);
}

.pager .middle:hover,
.pager .middle:focus-visible {
	color: var(--color-text);
}


/*	L I G H T B O X
----------------------------------------------- */

dialog.lightbox {
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--sans);
	font-size: var(--font-size-small);
	line-height: var(--line);
	overscroll-behavior: contain;
}

dialog.lightbox::backdrop {
	background: var(--color-bg);
}

dialog.lightbox .stage {
	position: relative;
	block-size: 100dvh;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	padding: var(--margin);

	touch-action: pinch-zoom;
	user-select: none;
}

dialog.lightbox .topbar {
	display: flex;
	justify-content: space-between;
	align-items: start;
	color: var(--color-grey);
	padding-block-end: calc(var(--unit) / 2);
}


dialog.lightbox button.text.close {
	display: block;
	line-height: 0;
	color: var(--color-grey);
}

dialog.lightbox button.text.close svg {
	display: block;
	inline-size: calc(12px * var(--scale));
	block-size: calc(12px * var(--scale));
	margin-block-start: calc(4.36px * var(--scale));
	overflow: visible;
	stroke: currentColor;
	stroke-width: var(--stroke);
	stroke-linecap: butt;
	fill: none;
}

dialog.lightbox button.text.close:hover,
dialog.lightbox button.text.close:focus-visible {
	color: var(--color-text);
}

dialog.lightbox .frame {
	position: relative;
	min-block-size: 0;
}


dialog.lightbox img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
}

dialog.lightbox.dark img {
	filter: url(#lightbox-dark);
}


dialog.lightbox .half {
	position: absolute;
	inset-block: 0;
	inline-size: 50%;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: transparent;
}

dialog.lightbox .half:focus,
dialog.lightbox .half:focus-visible {
	outline: none;
}

dialog.lightbox .half.prev {
	inset-inline-start: 0;
	cursor: url("arrow-prev.svg") 16 16, w-resize;
}

dialog.lightbox .half.next {
	inset-inline-end: 0;
	cursor: url("arrow-next.svg") 16 16, e-resize;
}


dialog.lightbox .caption-line {
	font-family: var(--sans);
	font-size: var(--font-size-fine);
	line-height: var(--leading);
	color: var(--color-grey);
	min-block-size: var(--line);
	text-align: center;
	padding-block-start: calc(18.79px * var(--scale));
}


dialog.lightbox .stage:focus {
	outline: none;
}

a.no-ring:focus-visible {
	outline: none;
}

dialog.lightbox button.text {
	background: none;
	border: 0;
	font: inherit;
	cursor: pointer;
	padding: calc(var(--unit) / 2);
	margin: calc(var(--unit) / -2);
}


html:has(dialog.lightbox[open]) {
	overflow: hidden;
}


/*	S M A L L E R   S C R E E N S
----------------------------------------------- */

@media (max-width: 1100px) {
:root {
	--scale: 0.95;
}
}

@media (max-width: 860px) {
.block, footer {
	grid-template-columns: minmax(0, 1fr);
	row-gap: calc(var(--unit) / 2);
}

.block.head-block figure.half {
	max-inline-size: none;
}

.apercu {
	grid-template-columns: minmax(0, 1fr);
}

.apercu figure.c1,
.apercu figure.c2,
.apercu figure.c3 {
	grid-column: 1;
}

.block > .text, .block > .images,
.footer-text, .certifications,
.pager-row, .pager {
	grid-column: 1;
}

.pager-row {
	grid-template-columns: minmax(0, 1fr);
}

.block:not(.head-block) > .images {
	order: -1;
}

.block.head-block > .text {
	order: -1;
}


.block .caption + p {
	margin-block-start: calc(var(--line) * 2);
}

.block {
	margin-block-end: calc(var(--line) * 2);
}

.number {
	display: none;
}

.block.head-block .caption {
	position: static;
}

.block .text > :not(.caption),
.credits {
	max-inline-size: none;
}

.block > .text {
	margin-block-start: 0;
}

.block.head-block {
	row-gap: calc(var(--line) * 2);
}

.head-block .fiche {
	margin-block-end: 0;
}

h1 {
	font-size: calc(1rem * var(--scale) * var(--sans-fit) * var(--type));
}

.head-block .text > p:not(.caption) {
	font-size: var(--font-size-fine);
	line-height: var(--leading);
}


.pager {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	column-gap: 0;
	white-space: normal;
}

.pager a {
	display: flex;
	align-items: start;
	gap: 0.25em;
	margin-block: 0;
}

.pager .prev {
	grid-column: 1;
	justify-self: start;
	text-align: start;
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.pager .prev span,
.pager .next span {
	margin-inline: 0;
}

.pager .middle {
	grid-column: 1;
	justify-self: start;
	text-align: start;
}

.pager .next {
	grid-column: 1;
	justify-self: start;
	text-align: start;
}

footer {
	row-gap: var(--gutter);
}

.three-columns {
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--gutter-v);
}

.three-columns > .column:not(:has(*)) {
	display: none;
}

.certifications {
	grid-template-columns: minmax(0, 1fr);
}

.grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--gutter);
}

.one-column {
	max-inline-size: none;
}
}

@media (max-width: 620px) {
:root {
	--scale: 0.9;
	--type: 1.25;
	--gutter-v: calc(var(--unit) * 3);
}

.burger {
	display: block;
}

nav.main {
	display: none;
}


nav.main.open {
	display: block;
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: calc(50% - 50vw);
	inline-size: 100vw;
	padding: var(--unit) var(--margin) calc(var(--unit) * 2);
	background: var(--color-bg);
}

nav.main ul {
	flex-direction: column;
	gap: 0;
}


nav.main a {
	display: block;
	line-height: calc(var(--line) * 1.5);
	padding-block: 0;
	margin-block: 0;
}


.grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.images.side-by-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.images.side-by-side > :only-child {
	max-inline-size: none;
}


.block:not(.head-block) > .images,
.block:not(.head-block) > .text {
	display: contents;
}

.block:not(.head-block) > .images > figure:nth-child(1) { order: 1; }
.block:not(.head-block) > .text > .caption:nth-child(1) { order: 2; }
.block:not(.head-block) > .images > figure:nth-child(2) { order: 3; margin-block-start: calc(var(--line) * 1.5); }
.block:not(.head-block) > .text > .caption:nth-child(2) { order: 4; margin-block-start: 0; }
.block:not(.head-block) > .text > :not(.caption) { order: 5; }
}


/*	L A R G E R   S C R E E N S
----------------------------------------------- */

@media (min-width: 1900px) {
:root {
	--scale: 1.275;
	--width: 1900px;
}
}


/*	P R I N T
----------------------------------------------- */

@media print {
header nav, .pager, .burger, dialog.lightbox {
	display: none;
}

body {
	max-inline-size: none;
}
}