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

main {
	padding-inline: 0 !important;
	& #main {
		padding-inline: var(--gap) !imporant;
		& h1 {
			background: linear-gradient(to bottom, #a00 0%, #700 100%) !important;
			color: #fff;
			margin-bottom: var(--gap) !important;
			& span {
				display: block;
				font-family: inherit;
				color: inherit;
				line-height: 1.2;
				&.h1main {
					font-size: inherit;
					font-size-adjust: 0.65;
					letter-spacing: 1px;
					text-shadow: 1px 1px 1px #000;
				}
			}
		}
		& h2 {
			text-align: center;
			background: linear-gradient(to bottom, #c00 0%, #900 100%) !important;
			color: #fff !important;
			padding: calc(1/2 * var(--gap));
			border-radius: 8px;
		}
		& h4 {
			color: #00517d;
			font-weight: bold;
			line-height: 1.1;
		}
	}
}

#language {
	display: none !important;
}

#grid-reset {
	float:left;
	width: 100%;
}

#quick-nav {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: var(--gap);
	padding-bottom: var(--gap);
	padding-inline: 8px;
	border-bottom: 1px dotted #ddd;
	& .nav-image {
		display: flex;
		flex: 0 0 40px;
		justify-content: flex-start;
		align-items: center;
		& img {
			width: 40px;
			height: 40px;
			filter: invert(18%) sepia(37%) saturate(4890%) hue-rotate(183deg) brightness(94%) contrast(101%) !important;
		}
	}
	& .nav-links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: auto;
		& a {
			display: block;
			text-align: left;
			scroll-behavior: smooth;
		}
	}
}

#thanks {
	display: table;
	margin: 0 auto calc(3/2 * var(--gap));
	& .thanks {
		&.thanks-sr {
			margin-bottom: var(--gap);
			padding-bottom: var(--gap);
			border-bottom: 1px solid #ddd;
		}
		&.thanks-en {
			scroll-snap-align: start;
			scroll-margin-top: 75px;
		}
	}
	& p {
		font-size: 0.9em;
		line-height: 1.2;
		margin-bottom: 10px;
		&:last-of-type {
			margin-bottom: 0;
		}
		& :is(strong, em, ul, ol, li) {
			font-size: inherit;
			line-height: inherit;
		}
	}
}

#petitions {
	display: table;
	margin: calc(2.5 * var(--gap)) auto calc(3/2 * var(--gap));
	& .petition {
		margin-bottom: var(--gap);
		padding-bottom: var(--gap);
		border-bottom: 1px solid #ddd;
		& p {
			font-size: 0.9em;
			line-height: 1.2;
			margin-bottom: 10px;
			&:last-of-type {
				margin-bottom: 0;
			}
			& :is(strong, em, ul, ol, li, a) {
				font-size: inherit;
				line-height: inherit;
			}
			& a {
				word-break: break-word;
			}
		}
		& h4:not(:first-of-type) {
			margin-top: calc(1/2 * var(--gap));
		}
		& hr.pet-spacer {
			height: 0;
			width: 100%;
			margin: var(--gap) 0;
			border-top: none;
			border-left: none;
			border-right: none;
			border-bottom: 1px dotted #ddd;
		}
		&:last-of-type {
			margin-bottom: 0;
			padding-bottom: 0;
			border-bottom: none;
		}
	}
}

#letters {
	display: table;
	margin: calc(2.5 * var(--gap)) auto calc(3/2 * var(--gap));
	& #grid-itemlist {
		display: grid;
		gap: var(--gap);
		scroll-snap-align: start;
		scroll-margin-top: 75px;
		& .grid-item {
			position: relative;
			background: #fff;
			border: 1px solid #ddd;
			box-sizing: border-box;
			outline: 1px solid #0000;
			position: relative;
			overflow: hidden;
			padding: var(--padding);
			border-radius: 4px;
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
			background-image: linear-gradient(to bottom, #fdfdfd, #f7f7f7);
			transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
			transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
			&:hover {
				box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
				transform: translate(var(--dx), calc(var(--dy) - 4px)) scale(1.01) rotate(var(--rot));
				z-index: 10;
			}
			& > h3 {
				font-size-adjust: 0.45;
				line-height: 1;
			}
			& .masked-text {
				overflow: hidden;
				mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
				& > p {
					line-height: 1.2;
					font-size: 0.8em;
					& :is(strong, em, ul, ol, li) {
						font-size: inherit;
						line-height: inherit;
					}
				}
			}
			& .modal-trigger {
				position: absolute;
				inset: 0;
				padding: 0;
				opacity: 0;
			}
		}
	}
}

dialog {
	position: fixed;
	padding: var(--dgt) var(--gap);
	border: 1px solid #ddd;
	height: var(--dgh);
	max-height: var(--dgh);
	box-sizing: border-box;
	outline: 1px solid #0000;
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
	background: #fcfcfc;
	overflow: hidden;
	display: none;
	&::backdrop {
		background:rgba(0,0,0,0.8);
		backdrop-filter: blur(5px);
	}
	&[open] {
		display: block;
	}
	& form {
		display: block;
		height: 100%;
	}
	& .modal-navbar {
		position: absolute;
		background: #243b6f15;
		width: 100%;
		height: var(--dgt);
		display: flex;
		flex-wrap: wrap;
		padding-inline: var(--gap);
		align-items: center;
		outline: 15px solid #fcfcfc;
		&.modal-close {			
			top: 0;
			left: 0;
			justify-content: flex-start;
			border-bottom: 1px solid #ddd;
			& span.date {
				font-size: 1.25em;
				font-weight: bold;
				color: #00517d;
			}
			& button {
				border: none;
				outline: none;
				background: url('../img/circle-xmark.svg') center center no-repeat;
				filter: invert(18%) sepia(37%) saturate(4890%) hue-rotate(183deg) brightness(94%) contrast(101%) !important;
				color: transparent;
				font-size: 0;
				padding: 0;
				margin: 0 0 0 auto;
				&:hover {
					filter: invert(18%) sepia(76%) saturate(1020%) hue-rotate(336deg) brightness(112%) contrast(96%) !important;
				}
			}
		}
		&.modal-nav {
			bottom: 0;
			left: 0;
			border-top: 1px solid #ddd;
			& a {
				display: flex;
				width: var(--gap);
				height: 100%;
				align-items: center;
				& img {
					width: var(--gap);
					height: var(--gap);
					filter: invert(18%) sepia(37%) saturate(4890%) hue-rotate(183deg) brightness(94%) contrast(101%) !important;
					&:hover {
						filter: invert(18%) sepia(76%) saturate(1020%) hue-rotate(336deg) brightness(112%) contrast(96%) !important;
					}
				}
				&.modal-prev {
					justify-content: flex-start;
				}
				&.modal-next {
					justify-content: flex-end;
					margin-left: auto;
				}
			}
		}
	}
	
	& .modal-text {
		line-height: 1.2;
		height: calc(var(--dgh) - 2 * var(--dgt) - 2px);
		max-height: calc(var(--dgh) - 2 * var(--dgt) - 2px);
		padding-top: 15px;
		padding-right: calc(1/2 * var(--gap));
		width: calc(100% + calc(1/2 * var(--gap)));
		overflow-y: auto;
		& h3 {
			width: 100%;
			font-size-adjust: 0.45;
			line-height: 1;
			text-align: center;
			padding-bottom: var(--gap);
			margin-bottom: var(--gap);
			border-bottom: 1px solid #ddd;
		}
		& p {
			font-size: 0.9em;
			color: #00517d;
			line-height: 1.25;
			font-style: italic;
			& :is(em, strong, span, ul, ol, li) {
				font-style: inherit;
				font-size: inherit;
				color: inherit;
				line-height: inherit;
			}
			& a {
				font-style: inherit;
				font-size: inherit;
				font-weight: bold;
				line-height: inherit;
				color: #c00;
			}
		}
		& :is(ol, ul) {
			padding-left: 25px;
			& li {
				font-size: 0.9em;
				color: #00517d;
				line-height: 1.25;
				margin-bottom: 4px;
				padding-left: 4px;
				& em {
					font-size: inherit;
					color: inherit;
					line-height: inherit;
				}
			}
		}
	}

}

/* ═══ Mobile (touch) devices portrait ═══ */
@media screen and (hover: none) and (pointer: coarse) and (orientation: portrait) {
    :root {
		--gap: 15px;
		--padding: 15px;
		--dgh: 90vh;
		--dgt: calc(3 * var(--gap));
    }
	article {
		transform: none !important;
	}
	.h1sub {
		font-size: 0.55em;
		margin: calc(1 / 2 * var(--gap)) 0 calc(4 / 3 * var(--gap));
		&:last-of-type {
			margin-bottom: 0;
		}
	}
}

/* ═══ Mobile (touch) devices portrait (small resolution) ═══ */
@media screen and (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width:0) and (max-width:639px) {
	#grid-itemlist {
		grid-template-columns: 1fr;
		& .grid-item {
			aspect-ratio: 4 / 3;
			& .masked-text {
				max-height: 40vw;
			}
		}
	}
	.modal-navbar {
		& button {
			width: calc(3 / 2 * var(--gap));
			height: calc(3 / 2 * var(--gap));
		}
	}
}

/* ═══ Mobile (touch) devices portrait (mid resolution) ═══ */
@media screen and (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width:640px) and (max-width:767px) {
	#grid-itemlist {
		grid-template-columns: 1fr 1fr;
		& .grid-item {
			aspect-ratio: 4 / 3;
			& .masked-text {
				max-height: 40vw;
			}
		}
	}
	.modal-navbar {
		& button {
			width: calc(3 / 2 * var(--gap));
			height: calc(3 / 2 * var(--gap));
		}
	}
}

/* ═══ Mobile (touch) devices portrait (high resolution) ═══ */
@media screen and (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width:768px) {
	#grid-itemlist {
		grid-template-columns: 1fr 1fr 1fr;
		& .grid-item {
			aspect-ratio: 210 / 297;
		}
	}
	.modal-navbar {
		& button {
			width: calc(3 / 2 * var(--gap));
			height: calc(3 / 2 * var(--gap));
		}
	}
}

/* ═══ Mobile (touch) devices landscape ═══ */
@media screen and (hover: none) and (pointer: coarse) and (orientation: landscape) {
    :root {
		--dgh: 90vh;
		--dgt: calc(2 * var(--gap));
    }
	#grid-itemlist {
		grid-template-columns: 1fr 1fr 1fr;
		& .grid-item {
			aspect-ratio: 1;
		}
	}
	.modal-navbar {
		& button {
			width: calc(5 / 4 * var(--gap));
			height: calc(5 / 4 * var(--gap));
		}
	}
}

/* ═══ FALLBACK: Mobile (touch) devices small res ═══ */
@media screen and (orientation: portrait) and (min-width:0) and (max-width:639px) {
    :root {
		--gap: 15px;
		--padding: 15px;
		--dgh: 85vh;
		--dgt: calc(3 * var(--gap));
    }
	.h1sub {
		font-size: 0.55em;
		margin: calc(1 / 2 * var(--gap)) 0 var(--gap);
		&:last-of-type {
			margin-bottom: 0;
		}
	}
	article {
		transform: none !important;
	}
	#grid-itemlist {
		grid-template-columns: 1fr;
		& .grid-item {
			aspect-ratio: 4 / 3;
			& .masked-text {
				max-height: 40vw;
			}
		}
	}
	.modal-navbar {
		& button {
			width: calc(3 / 2 * var(--gap));
			height: calc(3 / 2 * var(--gap));
		}
	}
}

/* ═══ Desktop devices ═══ */
@media screen and (any-pointer: fine) and (any-hover: hover) and (min-width:1024px) {
    :root {
		--dgh: 90vh;
		--dgt: calc(2 * var(--gap));
    }
	.h1sub {
		font-size: 0.45em;
		margin: calc(1/4 * var(--gap)) 0 calc(2/3 * var(--gap));
		&:last-of-type {
			margin-bottom: 0;
		}
	}
	#quick-nav {
		display: none;
	}
	#thanks, #petitions, #letters {
		width: 80vw;
	}
	#grid-itemlist {
		width: 80vw;
		& .grid-item {
			aspect-ratio: 210 / 297;
			&:nth-child(30n + 1)  { --rot: -1.6deg; --dx: -2px; --dy: 1px;  }
			&:nth-child(30n + 2)  { --rot:  1.3deg; --dx:  1px; --dy: -1px; }
			&:nth-child(30n + 3)  { --rot:  0.8deg; --dx: -1px; --dy: 2px;  }
			&:nth-child(30n + 4)  { --rot: -0.9deg; --dx:  2px; --dy: 0px;  }
			&:nth-child(30n + 5)  { --rot:  2.2deg; --dx: -3px; --dy: -2px; }
			&:nth-child(30n + 6)  { --rot: -2.0deg; --dx:  3px; --dy: 1px;  }
			&:nth-child(30n + 7)  { --rot:  1.7deg; --dx: -1px; --dy: -3px; }
			&:nth-child(30n + 8)  { --rot: -1.2deg; --dx:  1px; --dy: 3px;  }
			&:nth-child(30n + 9)  { --rot:  0.5deg; --dx:  0px; --dy: -2px; }
			&:nth-child(30n + 10) { --rot: -2.4deg; --dx:  2px; --dy: 2px;  }
			&:nth-child(30n + 11) { --rot:  1.9deg; --dx: -2px; --dy: 0px;  }
			&:nth-child(30n + 12) { --rot: -0.7deg; --dx:  3px; --dy: -1px; }
			&:nth-child(30n + 13) { --rot:  2.4deg; --dx: -3px; --dy: 1px;  }
			&:nth-child(30n + 14) { --rot: -1.5deg; --dx:  1px; --dy: -3px; }
			&:nth-child(30n + 15) { --rot:  0.9deg; --dx: -1px; --dy: 3px;  }
			&:nth-child(30n + 16) { --rot: -2.1deg; --dx:  2px; --dy: -2px; }
			&:nth-child(30n + 17) { --rot:  1.1deg; --dx:  0px; --dy: 2px;  }
			&:nth-child(30n + 18) { --rot: -0.4deg; --dx: -2px; --dy: -1px; }
			&:nth-child(30n + 19) { --rot:  2.0deg; --dx:  3px; --dy: 1px;  }
			&:nth-child(30n + 20) { --rot: -1.8deg; --dx: -3px; --dy: 0px;  }
			&:nth-child(30n + 21) { --rot:  0.6deg; --dx:  1px; --dy: 2px;  }
			&:nth-child(30n + 22) { --rot: -2.3deg; --dx: -1px; --dy: -2px; }
			&:nth-child(30n + 23) { --rot:  1.5deg; --dx:  2px; --dy: -1px; }
			&:nth-child(30n + 24) { --rot: -0.8deg; --dx: -2px; --dy: 1px;  }
			&:nth-child(30n + 25) { --rot:  2.3deg; --dx:  0px; --dy: -3px; }
			&:nth-child(30n + 26) { --rot: -1.1deg; --dx:  3px; --dy: 2px;  }
			&:nth-child(30n + 27) { --rot:  0.7deg; --dx: -3px; --dy: -1px; }
			&:nth-child(30n + 28) { --rot: -2.2deg; --dx:  1px; --dy: 0px;  }
			&:nth-child(30n + 29) { --rot:  1.8deg; --dx: -1px; --dy: 3px;  }
			&:nth-child(30n + 30) { --rot: -0.5deg; --dx:  2px; --dy: -2px; }
		}
		dialog {
			aspect-ratio: 210 / 297;
		}
	}
	.modal-navbar {
		& button {
			width: var(--gap);
			height: var(--gap);
		}
	}
}

/* ═══ 1280x720, 1366x768, 1440x900, 1680x1050 ═══ */
@media screen and (min-width:1200px) and (max-width:1680px) {
    :root {
			--gap: 30px;
		--padding: 15px;
    }
	#grid-itemlist {
		grid-template-columns: 1fr 1fr 1fr;
		& .masked-text {
			max-height: 62%;
		}
	}
}

/* ═══ FHD, 4K ═══ */
@media screen and (min-width:1681px) {
    :root {
			--gap: 30px;
		--padding: 15px;
    }
	#grid-itemlist {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		& .masked-text {
			max-height: 70%;
		}
	}
}