@charset "UTF-8";

/* --------------------------------------------
BACKGROUND COLOR
--------------------------------------------- */
.bg{
	background-color : rgb( 128 128 128 / .5 );
}

/* --------------------------------------------
TEXT NAGATIVE MARGIN with LINE HEIGHT
--------------------------------------------- */
.adjustment::before{
	display : block;
	width : 100%;
	margin-top : calc( ( -1lh + 1em ) / 2 );
	content : "";
}

/* --------------------------------------------
DIALOG
--------------------------------------------- */
dialog:not( [open] ){
	display : none;
}
dialog{
	position : fixed;
	top : 0;
	left : 0;
	display : grid;
	place-items : center;
	width : 100%;
	height : 100dvh;
	overflow-y : auto;
	background : transparent;
}
dialog::backdrop{
	background-color : rgb( 0 0 0 / .9 );
}
dialog .close{
	position : fixed;
}
dialog picture{
	text-align : center;
}
dialog picture img{
	width : 100%;
	max-width : 100%;
	height : auto;
	pointer-events : none;
	user-select : none;
}
dialog video{
	width : 100%;
	max-width : 100%;
	height : auto;
	margin-inline : auto;
	user-select : none;
}
@media screen and ( width <= 750px ){
	dialog{
		padding-block : calc( 40 var( --remBase ) );
		padding-inline : calc( 40 var( --percentBase ) );
	}
	dialog .close{
		top : calc( 20 var( --remBase ) );
		right : calc( 20 var( --viewportBase ) );
	}
	dialog .close img{
		height : calc( 20 var( --remBase ) );
	}
	dialog h2{
		font-size : 2.4rem;
	}
	dialog picture , dialog video{
		margin-top : calc( 32 var( --remBase ) );
	}
	dialog p{
		margin-top : calc( 20 var( --remBase ) );
		font-size : 1.8rem;
		line-height : calc( 30 / 18 );
	}
}
@media print , screen and ( width > 750px ){
	dialog{
		padding-block : calc( 40 var( --remBase ) );
	}
	dialog .close{
		top : calc( 20 var( --remBase ) );
	}
	dialog .close img{
		height : calc( 28 var( --remBase ) );
	}
	dialog h2{
		font-size : 2.8rem;
		color: #fff;
	}
	dialog picture , dialog video{
		margin-top : calc( 40 var( --remBase ) );
	}
	dialog p{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
}
@media screen and ( 750px < width < 1270px ){
	dialog{
		padding-inline : calc( 40 var( --viewportBase ) );
	}
	dialog .close{
		right : calc( 20 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	dialog{
		padding-inline : 80px;
	}
	dialog .close{
		right : calc( 40px + var( --scrollbarWidth ) );
	}
}
body:has( dialog ){
	transform-origin : center top;
}
body:has( dialog[open] ){
	padding-right : var( --scrollbarWidth );
	overflow : hidden;
}
@media print , screen and ( width >= 1270px ){
	body:has( dialog[open] ){
		background-position : left calc( 50% + 140px - var( --scrollbarWidth ) ) top 0;
	}
	body:has( dialog[open] )::before{
		left : calc( 50% - (var( --scrollbarWidth ) / 2) );
	}
	body:has( dialog[open] )::after{
		right : calc( 50% + (var( --scrollbarWidth ) / 2) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	body:has( dialog[open] ){
		animation : scaleBack .5s ease forwards;
	}
	body:has( dialog.close ){
		animation : scaleForward .5s ease forwards;
	}
	dialog[open]{
		animation : modalOpen 1s ease forwards;
	}
	dialog.close{
		animation : modalClose 1s ease forwards;
	}
}
@media ( prefers-reduced-motion : reduce ){
	body:has( dialog[open] ){
		transform : scale( .975 );
	}
	body:not( :has( dialog[open] ) ):has( dialog.close ){
		transform : scale( 1 );
	}
	dialog[open]{
		opacity : 1;
	}
	dialog.close{
		opacity : 0;
	}
}
@keyframes scaleBack{
	0%{
		transform : scale( 1 );
	}
	100%{
		transform : scale( .975 );
	}
}
@keyframes scaleForward{
	0%{
		transform : scale( .975 );
	}
	100%{
		transform : scale( 1 );
	}
}
@keyframes modalOpen{
	0%{
		opacity : 0;
	}
	100%{
		opacity : 1;
	}
}
@keyframes modalClose{
	0%{
		opacity : 1;
	}
	100%{
		opacity : 0;
	}
}