:root {
	--f_sans: "Inter", "Roboto", "Arial", sans-serif;
	--f_serif: "STIX Two Text", "PT Serif", "Georgia", serif;

	--text-size-biggest: clamp(11rem, 10.8rem + 1vw, 12rem);
	--text_size_extrabig: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--text_size_big: clamp(1.4rem, 1rem + 0.5vw, 1.6rem);
	--text_size_main: clamp(1.2rem, 0.9rem + 0.5vw, 1.4rem);
	--text_size_secondary: clamp(1.15rem, 0.9rem + 0.5vw, 1.2rem);
	--text_size_third: clamp(1rem, 0.9rem + 0.3vw, 1.15rem);
	--text_size_info: clamp(0.9rem, 0.87rem + 0.15vw, 1.05rem);
	--text_size_small: clamp(0.7rem, 0.66rem + 0.2vw, 0.9rem);
	--text_size_extrasmall: clamp(0.6rem, 0.56rem + 0.2vw, 0.8rem);
	--text_size_ultrasmall: clamp(0.5rem, 0.46rem + 0.2vw, 0.7rem);

	--font_weight_ultralight: 100;
	--font_weight_extralight: 200;
	--font_weight_light: 300;
	--font_weight_main: 400;
	--font_weight_bold: 600;
	--font_weight_extrabold: 700;
	--font_weight_ultrabold: 800;
	--font_weight_maximum: 900;
}

p {
	font-size: var(--text_size_main);
	font-weight: 400;
	line-height: 1.3;
}

p a {
	text-decoration: none;
	color: inherit;
	border-bottom: 2px solid var(--color_brand_main);
	-webkit-box-shadow: inset 0 -2px 0 var(--color_brand_main);
	box-shadow: inset 0 -2px 0 var(--color_brand_main);
	-webkit-transition: background 0.1s linear;
	-o-transition: 0.1s linear background;
	transition: background 0.1s linear;
	padding-top: 1px;
	&:hover {
		color: white;
		background: var(--color_brand_main);
	}
}

h1 {
	font-size: clamp(2rem, 2vw + 1.5rem, 3.5rem);
	line-height: 1.03;
	font-weight: 800;
	white-space: pre-wrap;
}

h2 {
	font-size: clamp(1.6rem, 2vw + 0.5rem, 2rem);
	font-weight: 300;
	line-height: 1.15;
	white-space: pre-wrap;
}

.frontpage_block--title {
	text-align: center;
	font-size: var(--text_size_info);
	color: var(--color_brand_main);
	font-weight: var(--font_weight_light);
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	padding-block-end: var(--padding_main);
	&.padding-block-end--none {
		padding-block-end: 0;
	}
}

.rubric_bar {
	font-weight: var(--font_weight_bold);
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	line-height: 1;
	color: var(--color_const_light);
	background: var(--color_brand_main);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: calc(var(--padding_ultrasoft) / 1.5);
	padding-block: calc(var(--padding_ultrasoft) / 2.5);
	display: inline-block;
	& a {
		all: unset;
		cursor: pointer;
		line-height: 1;
		padding: 0;
		margin: 0;
		&:focus,
		&:focus-visible {
			outline: 2px dotted var(--color_brand_soft);
			outline-offset: 0.3rem;
		}
	}
}

.rubric_pulse {
	display: inline-block;
	color: var(--color_brand_soft);
}

.button_link {
	all: unset;
	cursor: pointer;
	font-weight: 600;
	line-height: 1;
	text-wrap: nowrap;
	color: var(--color_const_light);
	background: var(--color_brand_main);
	padding-inline: var(--padding_ultrasoft);
	padding-block: var(--padding_ultrasoft);
	position: relative;
	transition: all 0.2s ease-in-out;
	&:after {
		position: absolute;
		opacity: 0;
		content: "\2192";
		color: var(--color_brand_main);
		font-weight: var(--font_weight_bold);
		inset-inline-end: 0;
	}
	@media (hover: hover) {
		&:hover {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
		}
		&:hover:after {
			opacity: 1;
			inset-inline-end: -1.4ch;
			transition: all 0.3s ease-out;
		}
	}
	&:focus-within {
		&:after {
			opacity: 1;
			right: -1.4ch;
			transition: all 0.3s ease-out;
		}
	}
}

.post_headline--wrapper {
	/* &:not(:last-child) {
		border-block-end: 1px solid var(--color_separator_main);
	} */
	& a {
		all: unset;
		cursor: pointer;
		@media (hover: hover) {
			& :hover > .post_titlegroup > * {
				text-decoration: underline;
				text-decoration-color: var(--color_brand_main);
			}
		}
		&:focus-within .post_titlegroup * {
			text-decoration: underline;
			text-decoration-color: var(--color_brand_main);
		}
	}
	& .post_headline__grid {
		padding-block: var(--padding_main);
		display: grid;
		grid-template-columns: 0.8fr 2fr;
		gap: 1rem;

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: 0.5rem;
		}

		& .post_headline {
			& .post_titlegroup {
				&.post_article {
					& .post_subtitle {
						color: var(--color_text_main);
					}
				}
			}
		}
	}
	& .post_headline {
		margin-block: var(--padding_main);
		text-wrap: pretty;
		& .post_titlegroup {
			& .post_title,
			.post_subtitle {
				padding-block-end: var(--padding_ultrasoft);
			}
			& .post_title {
				font-size: var(--text_size_secondary);
				line-height: 1.2;
			}
			&.post_article {
				& .post_title {
					font-size: var(--text_size_big);
					line-height: 1.15;
				}
				& .post_subtitle {
					font-size: var(--text_size_secondary);
					font-family: var(--f_serif);
					font-weight: var(--font_weight_light);
					font-style: italic;
					line-height: 1;
					color: var(--color_text_extrasoft);
					opacity: 0.8;
				}
			}
		}

		& .post_indicators {
			display: grid;
			grid-template-columns: auto 1fr auto;
			grid-template-areas: "iconcontainer datatime comments";
			& .post_iconcontainer {
				grid-area: iconcontainer;
				width: max-content;
				display: flex;
				& > * {
					padding-inline-end: 0.7rem;
				}
				& svg {
					flex-shrink: 0;
					width: var(--text_size_secondary);
					fill: none;
					stroke: var(--color_brand_main);
					stroke-linecap: round;
					stroke-linejoin: round;
					stroke-width: 1;
				}
			}
			& time {
				grid-area: datatime;
				font-size: var(--text_small);
				& .datetime_time {
					font-weight: 700;
					padding-inline-end: var(--padding_extrasoft);
					color: var(--color_brand_extrasoft);
					filter: saturate(0.4);
				}
				& .datetime_date {
					font-weight: 300;
					padding-inline-end: var(--padding_extrasoft);
					color: var(--color_text_extrasoft);
					opacity: 0.6;
				}
			}
			& .indicator_comments--wrapper {
				grid-area: comments;
				color: var(--color_brand_extrasoft);
				filter: saturate(0.4);
				position: relative;
			}
		}
	}
}
.post_indicators {
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	grid-template-areas: "iconcontainer datatime comments";
	& .post_iconcontainer {
		grid-area: iconcontainer;
		width: max-content;
		display: flex;
		& > * {
			padding-inline-end: 0.7rem;
		}
		& svg {
			width: var(--text_size_secondary);
			fill: none;
			stroke: var(--color_brand_main);
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-width: 1;
		}
	}
	& time {
		grid-area: datatime;
		font-size: var(--text_small);
		& .datetime_time {
			font-weight: 700;
			padding-inline-end: var(--padding_extrasoft);
			color: var(--color_brand_extrasoft);
			filter: saturate(0.4);
		}
		& .datetime_date {
			font-weight: 300;
			padding-inline-end: var(--padding_extrasoft);
			color: var(--color_text_extrasoft);
			opacity: 0.6;
		}
	}
	& .indicator_comments--wrapper {
		grid-area: comments;
		color: var(--color_brand_extrasoft);
		filter: saturate(0.4);
		position: relative;
	}
}

.indicator_comments {
	max-width: 3rem;
	max-height: 1rem;
	font-size: var(--text_size_extrasmall);
	line-height: 1;
	position: absolute;
	inset-block-start: 0.15rem;
	right: 0;
	padding-block: 0.1rem;
	padding-inline: 0.2rem;
	border-block: 0.1rem solid currentColor;
	border-inline-end: 0.1rem solid currentColor;
	&::before {
		content: "";
		position: absolute;
		inset-inline-start: 0.05rem;
		inset-block-start: 0.2rem;
		height: 60%;
		transform: rotate(90deg);
		transform-origin: top;
		border-inline-end: 0.1rem solid currentColor;
	}
	&::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: -0.1rem;
		height: 66%;
		transform: rotate(-60deg);
		transform-origin: bottom;
		border-inline-end: 0.1rem solid currentColor;
	}
	& .indicator_comments--leftborder {
		inset: 0;
		&::before {
			content: "";
			position: absolute;
			inset-inline-start: 0;
			inset-block-end: 0;
			height: 51%;
			border-inline-end: 0.1rem solid currentColor;
		}
	}
	& a {
		all: unset;
		cursor: pointer;
		@media (hover: hover) {
			&:hover {
				font-weight: var(--font_weight_extrabold);
			}
		}
		&:focus-visible {
			font-weight: var(--font_weight_extrabold);
			outline: 1px dotted currentColor;
			outline-offset: 0.4rem;
		}
	}
}

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