@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title01{
	display : block;
	align-content : center;
	font-weight : 700;
	text-align : center;
	background : url( "../images/ui/bg/title.webp" ) center top / cover no-repeat;
	@media screen and ( width <= 768px ){
		height : calc( 198 * var( --remBase ) );
		margin-inline : calc( 12 * var( --viewportBase ) );
		margin-top : calc( 18 * var( --remBase ) );
		font-size : calc( 28 * var( --remBase ) );
		line-height : calc( 44 / 28 );
		border-radius : calc( 24 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		height : calc( 224 * var( --remBase ) );
		margin-inline : calc( 40 * var( --viewportBase ) );
		margin-top : calc( 16 * var( --remBase ) );
		font-size : calc( 40 * var( --remBase ) );
		line-height : calc( 60 / 40 );
		border-radius : calc( 24 * var( --remBase ) );
	}
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
#breadcrumbs{
	margin-inline : auto;
	ol{
		display : flex;
		flex-wrap : wrap;
		justify-content : end;
	}
	li{
		font-weight : 500;
		&:not( :last-child ){
			display : grid;
			grid-auto-flow : column;
			align-items : start;
			justify-content : start;
			&::after{
				white-space : pre;
				content : " > ";
			}
		}
	}
	a{
		text-decoration : underline;
		text-decoration-color : transparent;
		text-underline-offset : calc( ( 1lh - 1em ) / 2 );
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 10 * var( --remBase ) );
		padding-bottom : calc( 32 * var( --remBase ) );
		li{
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
	}
	@media print , screen and ( width > 768px ){
		width : calc( 1100 * var( --viewportBase ) );
		padding-top : calc( 10 * var( --remBase ) );
		padding-bottom : calc( 28 * var( --remBase ) );
		li{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 21 / 14 );
		}
	}
}
@media ( hover : hover ){
	#breadcrumbs a:hover{
		text-decoration-color : currentColor;
		opacity : .8;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#breadcrumbs a{
		transition : text-decoration .3s linear , opacity .3s linear;
	}
}

/* --------------------------------------------
COLUMNS
--------------------------------------------- */
#columns{
	--borderColor : #e4e2db;
	--bgColor : #f5f4ed;
	> section:not( #posts ){
		position : relative;
		z-index : 0;
		background-color : var( --bgColor );
		border-color : var( --bgColor );
		border-style : solid;
		&::before{
			position : absolute;
			inset : 0;
			z-index : -1;
			display : block;
			margin : 0;
			overflow : hidden;
			pointer-events : none;
			content : "";
			background-color : white;
			outline : solid 1px var( --borderColor );
			outline-offset : -1px;
		}
	}
	h2{
		font-weight : 700;
		line-height : 1.2;
	}
	hgroup p , .lede{
		font-weight : 500;
		line-height : 1.4;
		letter-spacing : .05em;
	}
	.archiveLink{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : start;
		font-weight : 500;
		color : var( --blue02 );
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 80 * var( --remBase ) );
		> section:not( #posts ){
			+ section:not( #posts ){
				margin-top : calc( 64 * var( --remBase ) );
			}
			padding-inline : calc( 20 * var( --viewportBase ) );
			padding-top : calc( 40 * var( --remBase ) );
			padding-bottom : calc( 44 * var( --remBase ) );
			border-block-width : calc( 20 * var( --remBase ) );
			border-inline-width : calc( 12 * var( --remBase ) );
			&::before{
				border-radius : calc( 12 * var( --remBase ) );
			}
		}
		h2{
			font-size : calc( 30 * var( --remBase ) );
		}
		.lede{
			font-size : calc( 18 * var( --remBase ) );
		}
		hgroup + .lede , h2 + .lede{
			margin-top : calc( 16 * var( --remBase ) );
		}
		.archiveLink{
			font-size : calc( 20 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 40 * var( --remBase ) );
		> section:not( #posts ){
			+ section:not( #posts ){
				margin-top : calc( 48 * var( --remBase ) );
			}
			padding-block : calc( 40 * var( --remBase ) );
			padding-inline : calc( 40 * var( --viewportBase ) );
			border-radius : calc( 20 * var( --remBase ) );
			border-block-width : calc( 40 * var( --remBase ) );
			border-inline-width : calc( 40 * var( --remBase ) );
			&::before{
				border-radius : calc( 16 * var( --remBase ) );
			}
		}
		h2{
			font-size : calc( 28 * var( --remBase ) );
		}
		.lede{
			font-size : calc( 16 * var( --remBase ) );
		}
		hgroup + .lede , h2 + .lede{
			margin-top : calc( 12 * var( --remBase ) );
		}
		.archiveLink{
			font-size : calc( 18 * var( --remBase ) );
		}
	}
}
#columnCounts{
	dl > div{
		background-color : var( --bgColor );
		box-shadow : 1px 1px 0 var( --borderColor );
	}
	dt{
		font-weight : 500;
		color : #666;
	}
	dd{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : end;
		> span{
			&:nth-of-type( 1 ){
				font-family : Roboto , sans-serif;
				font-weight : 900;
			}
			&:nth-of-type( 2 ){
				font-weight : 500;
			}
		}
	}
	@media screen and ( width <= 768px ){
		hgroup{
			p{
				margin-bottom : calc( 8 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		dl{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 202 * 100% / 416 ) );
			row-gap : calc( 12 * var( --remBase ) );
			justify-content : space-between;
			margin-top : calc( 28 * var( --remBase ) );
			> div{
				padding-inline : calc( 12 * 100% / 202 );
				padding-top : calc( 16 * var( --remBase ) );
				padding-bottom : calc( 24 * var( --remBase ) );
				border-radius : calc( 8 * var( --remBase ) );
			}
		}
		dt{
			font-size : calc( 22 * var( --remBase ) );
		}
		dd{
			margin-top : calc( 12 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 48 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 22 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		hgroup{
			p{
				margin-bottom : calc( 8 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
			}
		}
		dl{
			display : grid;
			grid-template-columns : repeat( 4 , calc( 265 * 100% / 1120 ) );
			justify-content : space-between;
			margin-top : calc( 40 * var( --remBase ) );
			> div{
				padding-inline : calc( 20 * 100% / 265 );
				padding-top : calc( 20 * var( --remBase ) );
				padding-bottom : calc( 24 * var( --remBase ) );
				border-radius : calc( 8 * var( --remBase ) );
			}
		}
		dt{
			font-size : calc( 20 * var( --remBase ) );
		}
		dd{
			margin-top : calc( 12 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 64 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 20 * var( --remBase ) );
				}
			}
		}
	}
}