/*

CPMA Placeholder CSS

Version:       251001 (October 1, 2025)
Author:        Dmitri Bekasov

*/

/* Global reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}
ul[role='list'],
ol[role='list'] {
	list-style: none;
}
html:focus-within {
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}
a:not([class]) {
	text-decoration-skip-ink: auto;
}
img,
picture {
	max-width: 100%;
	display: block;
}
input,
button,
textarea,
select {
	font: inherit;
}
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Debug */

.color01 { background-color: rgba(228,72,72,.5) }
.color02 { background-color: rgba(228,128,72,.5) }
.color03 { background-color: rgba(228,191,72,.5) }
.color04 { background-color: rgba(228,228,72,.5) }
.color05 { background-color: rgba(191,228,72,.5) }
.color06 { background-color: rgba(128,228,72,.5) }
.color07 { background-color: rgba(72,228,72,.5) }
.color08 { background-color: rgba(72,228,128,.5) }
.color09 { background-color: rgba(72,228,191,.5) }
.color10 { background-color: rgba(72,228,228,.5) }
.color11 { background-color: rgba(72,191,228,.5) }
.color12 { background-color: rgba(72,128,228,.5) }
.color13 { background-color: rgba(72,72,228,.5) }
.color14 { background-color: rgba(128,72,228,.5) }
.color15 { background-color: rgba(191,72,228,.5) }
.color16 { background-color: rgba(228,72,228,.5) }
.color17 { background-color: rgba(228,72,191,.5) }
.color18 { background-color: rgba(228,72,128,.5) }

.color19 { background-color: rgba(0,0,0,.1) }
.color20 { background-color: rgba(0,0,0,.2) }
.color21 { background-color: rgba(0,0,0,.3) }
.color22 { background-color: rgba(0,0,0,.4) }
.color23 { background-color: rgba(0,0,0,.5) }
.color24 { background-color: rgba(0,0,0,.6) }
.color25 { background-color: rgba(0,0,0,.7) }

/* Variables */

:root {
	
	/* Mapple Leaf */
	
	--mapple-leaf: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI4LjI4NDIgOC40MTMwOUMyOC4zMzU1IDguNTE1NjcgMjguNDA3MiA4LjYwNjk2IDI4LjQ5NTEgOC42ODA2NkMyOC41ODMgOC43NTQyOSAyOC42ODUxIDguODA5MTMgMjguNzk0OSA4Ljg0MThDMjguOTA0OSA4Ljg3NDQzIDI5LjAyMDkgOC44ODM5MSAyOS4xMzQ4IDguODcwMTJDMjkuMjQ4NyA4Ljg1NjI5IDI5LjM1OSA4LjgxOTcgMjkuNDU4IDguNzYxNzJMMzMuNjc3NyA2LjMyMjI3TDMxLjA0NDkgMTkuODk2NUMzMS4wMTA3IDIwLjA3NDYgMzEuMDM0OCAyMC4yNTk4IDMxLjExNDMgMjAuNDIyOUMzMS4xOTM3IDIwLjU4NTggMzEuMzI0MSAyMC43MTg5IDMxLjQ4NTQgMjAuODAxOEMzMS42NDY3IDIwLjg4NDYgMzEuODMxIDIwLjkxMjMgMzIuMDA5OCAyMC44ODE4QzMyLjE4ODUgMjAuODUxMyAzMi4zNTI4IDIwLjc2MzQgMzIuNDc3NSAyMC42MzE4TDM3LjkzNTUgMTQuNzc0NEwzOS4yOSAxNy45NjA5QzM5LjM2NjMgMTguMTM4NyAzOS41MDIyIDE4LjI4NDYgMzkuNjczOCAxOC4zNzRDMzkuODQ1NSAxOC40NjM0IDQwLjA0MyAxOC40OTA3IDQwLjIzMjQgMTguNDUxMkw0Ny4yMjU2IDE2Ljk2NzhMNDQuODI2MiAyNC4zNDg2QzQ0Ljc2MjYgMjQuNTQyOCA0NC43NzE4IDI0Ljc1MzcgNDQuODUyNSAyNC45NDE0QzQ0LjkzMzQgMjUuMTI4OSA0NS4wOCAyNS4yODA5IDQ1LjI2NDYgMjUuMzY4Mkw0OCAyNi42NDU1TDM1Ljg1ODQgMzYuNDc3NUMzNS43MjI0IDM2LjU4NzkgMzUuNjI0NCAzNi43MzgzIDM1LjU3ODEgMzYuOTA3MkMzNS41MzE5IDM3LjA3NTkgMzUuNTM5MSAzNy4yNTQ4IDM1LjU5OTYgMzcuNDE4OUwzNy4wOTY3IDQxLjU0ODhMMjYuMDEyNyAzOS41OTk2QzI0LjkzNzEgMzkuNDE0OSAyMy4wNzQ3IDM5LjQxMjkgMjEuOTg3MyAzOS41OTk2TDEwLjkwMzMgNDEuNTQ4OEwxMi40MDA0IDM3LjQxODlDMTIuNDYwOSAzNy4yNTQ4IDEyLjQ2ODEgMzcuMDc1OSAxMi40MjE5IDM2LjkwNzJDMTIuMzc1NiAzNi43MzgzIDEyLjI3NzYgMzYuNTg3OSAxMi4xNDE2IDM2LjQ3NzVMMCAyNi42NDU1TDIuNzM1MzUgMjUuMzY4MkMyLjkxOTk4IDI1LjI4MDkgMy4wNjY2NSAyNS4xMjg5IDMuMTQ3NDYgMjQuOTQxNEMzLjIyODIyIDI0Ljc1MzcgMy4yMzczOSAyNC41NDI4IDMuMTczODMgMjQuMzQ4NkwwLjc3NDQxNCAxNi45Njc4TDcuNzY3NTggMTguNDUxMkM3Ljk1NzA1IDE4LjQ5MDcgOC4xNTQ0OSAxOC40NjM0IDguMzI2MTcgMTguMzc0QzguNDk3NzYgMTguMjg0NiA4LjYzMzY3IDE4LjEzODcgOC43MDk5NiAxNy45NjA5TDEwLjA2NDUgMTQuNzc0NEwxNS41MjI1IDIwLjYzMThDMTUuNjQ3MiAyMC43NjM0IDE1LjgxMTUgMjAuODUxMyAxNS45OTAyIDIwLjg4MThDMTYuMTY5IDIwLjkxMjMgMTYuMzUzMyAyMC44ODQ2IDE2LjUxNDYgMjAuODAxOEMxNi42NzU5IDIwLjcxODkgMTYuODA2MyAyMC41ODU4IDE2Ljg4NTcgMjAuNDIyOUMxNi45NjUyIDIwLjI1OTggMTYuOTg5MyAyMC4wNzQ2IDE2Ljk1NTEgMTkuODk2NUwxNC4zMjIzIDYuMzIyMjdMMTguNTQyIDguNzYxNzJDMTguNjQxIDguODE5NyAxOC43NTEzIDguODU2MjkgMTguODY1MiA4Ljg3MDEyQzE4Ljk3OTEgOC44ODM5MSAxOS4wOTUxIDguODc0NDMgMTkuMjA1MSA4Ljg0MThDMTkuMzE0OSA4LjgwOTEzIDE5LjQxNyA4Ljc1NDI5IDE5LjUwNDkgOC42ODA2NkMxOS41OTI4IDguNjA2OTYgMTkuNjY0NSA4LjUxNTY3IDE5LjcxNTggOC40MTMwOUwyNCAwTDI4LjI4NDIgOC40MTMwOVoiIGZpbGw9IiNmZjAwMDAiIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbDpjb2xvcihkaXNwbGF5LXAzIDEuMDAwMCAwLjAwMDAgMC4wMDAwKTtmaWxsLW9wYWNpdHk6MTsiLz48L3N2Zz4=");
	--mapple-leaf--size: clamp(1.5rem, calc(2vw + 1rem), 3rem);
		
	/* Fonts */
	
	--font-stack: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

	/* Typography */
	
	--font-size--title: clamp(1.5rem, calc(2vw + 1rem), 3rem);
	--font-size--message: clamp(2rem, calc(8vw + 0rem), 8rem);
	--font-size--comment: clamp(1rem, calc(1vw + 1rem), 2rem);
	
	--line-height--title: 1.125;
	--line-height--message: 0.875;
	--line-height--comment: 1.1428571429;

	/* Layout */
	
	--flex-row--gap: clamp(1rem, calc(2vw + 1rem), 3rem);
	
	/* Colors */
	
	--white: #ffffff;
	--red: #ff0000;
	--navy: #0f204d;
	
	@media (color-gamut: p3) {
	  @supports (color: color(display-p3 0 0 0 / 1)) {
			:root {
				--white: color(display-p3 1 1 1);
				--red: color(display-p3 1 0 0);
				--navy: color(display-p3 0.0588 0.1255 0.3020);
			}
		}
  	}
}

body {
	font-family: var(--font-stack);
	background-color: var(--white);
	color: var(--navy);
	transition: background-color 0.3s, color 0.3s;
	min-width: 22.5rem;
	display: flex;
	flex-flow: column;
}
@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--navy);
		color: var(--white);
	}
}
.placeholder-header {
	padding-top: calc(var(--flex-row--gap) - 0.75rem);
}
.flex-row {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0 var(--flex-row--gap);
}
.placeholder-header--title {
	font-size: var(--font-size--title);
	line-height: var(--line-height--title);
}
.placeholder-header--title > * {
	display: block;
}
.placeholder-header--title-english,
.placeholder-header--title-french,
.placeholder-main--message-english,
.placeholder-main--message-french,
.placeholder-main--comment-english,
.placeholder-main--comment-french {
	flex: 1 0 0;
	max-width: clamp(10rem, calc(35vw + 0rem), 35rem);
}
.placeholder-main--message-english,
.placeholder-main--message-french,
.placeholder-main--comment-english,
.placeholder-main--comment-french {
	padding-top: var(--flex-row--gap);
}
.placeholder-header--title-english,
.placeholder-main--message-english,
.placeholder-main--comment-english {
	text-align: right;
}
.placeholder-header--divider,
.placeholder-main--divider {
	width: 0.125rem;
	min-width: 0.125rem;
	background-color: var(--red);
	position: relative;
}
.placeholder-header--divider::after {
	display: block;
	width: var(--mapple-leaf--size);
	height: var(--mapple-leaf--size);
	background-image: var(--mapple-leaf);
	background-repeat: no-repeat;
	position: absolute;
	content: "";
	top: -0.125rem;
	left: calc((var(--mapple-leaf--size) - 0.0625rem) / -2);
}
.placeholder-main {
	flex: 1 0 0;
	display: flex;
	flex-flow: column;
}
.placeholder-main--message {
	font-weight: 800;
	font-style: italic;
	font-size: var(--font-size--message);
	line-height: var(--line-height--message);
	letter-spacing: -0.02em;
}
.placeholder-main--comment {
	font-style: italic;
	font-size: var(--font-size--comment);
	line-height: var(--line-height--comment);
	flex: 1 0 0;
}