/* @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,400italic,700|Roboto:400,400italic,700&subset=latin,cyrillic); */

/* :root {
    --color-green-02: #06b9b133;
    --color-green-03: #06b9b14D;
    --color-green: #06b9b1;
    --color-green-dark: #1d7872;
    --color-red: #eb4247;
    --color-red-02: #eb424733;
    --color-red-03: #eb42474D;
    --color-red-dark: #762124;
} */

@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

@font-face {
	font-family: Merriweather;
	font-display: swap;
	src: url("fonts/Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf") format("truetype");
	font-style: normal;
}
@font-face {
	font-family: Merriweather;
	font-display: swap;
	src: url("fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf") format("truetype");
	font-style: normal;
}
@font-face {
	font-family: Commissioner;
	font-display: swap;
	src: url("fonts/Commissioner-VariableFont_FLAR,VOLM,slnt,wght.ttf") format("truetype");
	font-style: normal;
}

/* ==========================================================================
   Design Tokens — portrait-2026 (Figma)
   Colors + Typography
   ========================================================================== */

:root {
  /* ---- Blue ---- */
  --blue-navy:    #1B1464;
  --blue-dark:    #2233AA;
  --blue-primary: #3366FF;
  --blue-medium:  #5599FF;
  --blue-light:   #77BBFF;
  --blue-pale:    #AAD2FF;

  /* ---- Purple ---- */
  --purple-primary: #8833BB;

  /* ---- Magenta ---- */
  --magenta-primary: #DD22AA;

  /* ---- Green ---- */
  --green-primary: #33CC66;
  --green-lime:    #99DD33;

  /* ---- Orange ---- */
  --orange-primary: #FF8833;

  /* ---- Yellow ---- */
  --yellow-primary: #FFCC00;
  --yellow-pale:    #FFFAED;

  /* ---- Neutral ---- */
  --neutral-white:      #FFFFFF;
  --neutral-light-gray: #CCCCCC;
  --neutral-dark-gray:  #333333;

  /* ---- Fonts ---- */
  --font-heading: "Commissioner", sans-serif;
  --font-body:    "Merriweather", serif;
}


/* body { margin-right: 350px!important; } */

.b-typo.b-typo_post {
  font-family: var(--font-body);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%; /* 30.6px */
}

.b-typo.b-typo_post .lead-text {
	font-size: 24px;
	line-height: 36px;
	font-weight: 700;
	/* margin-top: 45px; */
}

.douchart { 
	width: 100%; 
	margin: 15px 0 30px;
}

#disclaimer { margin-bottom: 30px; }


.b-longread {
	max-width: unset;
}
 
.b-longread .b-post-info,
.b-longread .section-wrapper {
	max-width: 980px;
	margin: 0 auto;
}

.b-longread .b-longread-tech,
.b-longread .tg-promo,
.b-longread .b-post-tags,
.b-longread .b-similar-posts,
.b-longread div:has(.b-lenta),
.b-longread div:has(.b-lenta) + div,
.b-longread div:has(+ .b-similar-posts) {
    max-width: 920px!important;
    margin-left: auto!important;
    margin-right: auto!important;
}

#portrait-2026 {
	box-sizing: border-box;
	margin-bottom: 60px;
}

.b-longread .section-wrapper {
	max-width: 980px;
	margin: 0 auto;
}

.b-longread .b-typo_post .text-tech {
  font-family: var(--font-heading);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.b-longread .b-typo_post .text-tech-s {
  font-family: var(--font-heading);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
}

.b-longread .b-typo_post .text-main {
  font-family: var(--font-body);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%; /* 30.6px */
}

.b-longread .b-typo_post .quote {
  font-family: var(--font-body);
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%; /* 42.5px */
  
  margin: 0 auto;
  padding: 0 5%;
  border-top: 0;
  border-bottom: 0;
}

.b-longread .b-typo_post details { margin-bottom: 8px; }
summary h3, summary h4 { display: inline; }
.b-longread .b-typo_post details .details-holder {
	margin-top: 6px;
	padding: 15px 0 0;
	border-top: 1px solid #d3d3d3;
}
.b-longread .b-typo_post details li, .b-longread .b-typo_post details p {
	margin-bottom: 12px;
	padding-bottom: 0;
}
.b-typo details p+ol, .b-typo details p+ul { margin-top: 0px; }
.b-typo ol.compact li, .b-typo ul.compact li {
    padding-bottom: 0;
}
.b-longread .b-typo_post details li ol,
.b-longread .b-typo_post details li ul {
	margin-top: 0;
	margin-bottom: 12px;
	padding-top: 6px;
	padding-bottom: 0;
}
.b-longread .b-typo_post details li ol li { list-style: lower-alpha; margin-bottom: 8px; }
.b-longread .b-typo_post details li ul li { list-style: circle; margin-bottom: 8px; }
.b-longread .b-typo_post details li ul li::before { display: none; }

.b-longread .b-typo_post h1 {
  font-family: var(--font-heading);
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 112px */
}

.b-longread .b-typo_post h3.subheader {
	/* font-size: 24px;
	font-weight: normal;
	padding-top: 0;
	margin-top: -10px; */

	font-family: var(--font-heading);
	font-size: 25px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 35px */

	padding: 0;
}
.b-longread .b-typo_post h2.section-title {
	/* font-size: 36px; */
	/* padding-top: 36px; */
	/* line-height: 1.20; */
	/* padding-bottom: 15px; */
	/* margin-bottom: 24px; */
	/* border-bottom: 1px solid #303030; */

	font-family: var(--font-heading);
	font-size: 40px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%; /* 56px */

	/* margin-top: 40px; */
	padding: 40px 0 10px;

}
h2 a.anchor {
    text-decoration: none;
    position: absolute;
    left: 0;
    width: 0.8em;
    padding-left: 0.4em;
    margin-left: -1.2em;
    display: none;
}
h2:hover a.anchor { display: block; }
.chapter-title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 10%;
	line-height: 100%;
	text-transform: uppercase;
	padding: 10px 20px;
	border-left: solid 1px var(--blue-medium); 
	border-right: solid 1px var(--blue-medium); 
	color: var(--blue-primary);
	display: block;
	width: fit-content;
	margin: 0 auto;
}





/* .section {
	margin: 0 0 60px;
} */

.dousplit {
	display: flex;
	gap: 40px;
	justify-content: space-between;
	align-items: start;
	margin-top: 60px;
	margin-bottom: 60px;
}
.dousplit.upper { margin-top: 20px; }
.dousplit.options {
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}
.dousplit.options .split-content {
	max-width: unset;
}
.dousplit .split-graphics {
	width: 100%;
	max-width: 540px;
	border-radius: 30px;
	box-shadow: 0 34px 74px 0 hsla(235, 100%, 47%, 0.2);
}
.dousplit .split-graphics.desktop {
	/* max-width: 800px; */
	max-width: unset;
}
.dousplit .split-graphics.mobile {
	display: none;
}
.dousplit .split-content {
	width: 100%;
	max-width: 400px;
}
.dousplit .split-content h3 {
	padding-top: 0;
	margin-bottom: 30px;
}

.row {
	display: flex;
	justify-content: space-between;
}
.row .row-primary {
	width: 100%;
	max-width: 550px;
}
.row .row-secondary {
	width: 100%;
	max-width: 280px;
}
.factoid {
	padding: 20px;
	font-family: var(--font-heading);
	border-left: 1px var(--blue-pale) solid;
	margin-bottom: 20px;
	font-size: 18px;
}
.b-longread .b-typo_post .factoid p { padding-bottom: 0; }
.factoid.small {
	font-size: 14px;
	line-height: 130%;
}
.factoid .value {
	font-size: 40px;
	line-height: 130%;
	display: block;
	white-space: nowrap;
}

#section-summary {
	background: #872118 url(i/header.jpg) top center no-repeat;
	/* background-size: 100%; */
	background-size: cover;
	padding: 160px 0 0;
	color: #fff;
	margin-bottom: 0;
	text-align: center;
}

#section-summary .row {
	margin-top: 80px;
	justify-content: center;
	gap: 20px;
	text-align: left;
}

#section-summary .row .factoid {
	width: 100%;
	max-width: 280px;
	padding: 10px 20px;
	box-sizing: border-box;
	border-left-color: white;
}

.factoids-row {
	width: 100%;
	justify-content: space-between;
	display: flex;
	gap: 20px;
	margin-bottom: 40px;
}
.factoids-row.column {
	flex-direction: column;
	gap: 20px;
}
.value-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.value-row {
	display: flex;
	gap: 5px;
	align-items: start;
}
.value-box .value {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 100%;
	white-space: nowrap;
}
.value-box .diff {
	padding: 5px;
	border-radius: 50px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 400;
	line-height: 100%;
	color: var(--neutral-white);
	white-space: nowrap;
}
.value-box.small .value {
	font-size: 40px;
}
.value-box.smaller .value {
	font-size: 60px;
}
.value-box.medium { max-width: 220px; }
.value-box.medium .value {
	font-size: 80px;
}
.value-box.big { max-width: 280px; }
.value-box.big .value {
	font-size: 120px;
}
.value-box.biggest .value {
	font-size: 180px;
	line-height: 85%;
}
.value-box.orange .value { color: var(--orange-primary); }
.value-box.orange .diff { background-color: var(--orange-primary); }
.value-box.green .value { color: var(--green-primary); }
.value-box.green .diff { background-color: var(--green-primary); }
.value-box.magenta .value { color: var(--magenta-primary); }
.value-box.magenta .diff { background-color: var(--magenta-primary); }
.value-box.yellow .value { color: var(--yellow-primary); }
.value-box.blue-dark .value { color: var(--blue-dark); }

.value-box.blue .value { color: var(--blue-primary); }

.quote-box {
	border-left: 1px solid var(--blue-primary);
	border-right: 1px solid var(--blue-primary);
	color: var(--blue-primary);
	margin-top: 60px;
}
.quote-box .quote.compact { max-width: 80%; }

.chapter.yellow { background-color: var(--yellow-pale); }
.chapter.yellow .dousplit .split-graphics { box-shadow: 0 34px 74px 0 hsla(25, 100%, 50%, 0.2); }
.chapter.yellow .quote-box {
	border-left-color: var(--orange-primary);
	border-right-color: var(--orange-primary);
	color: var(--orange-primary);
}
.chapter.blue {
	background-color: var(--blue-navy);
	color: var(--neutral-white);
}
.chapter.blue .quote-box {
	border-left-color: var(--blue-light);
	border-right-color: var(--blue-light);
	color: var(--blue-light);
}
.chapter.gray { background-color: hsla(0, 0%, 94%, 1); }

#oborona { 
	color: var(--neutral-white);
	border-left-color: var(--neutral-white);
	border-right-color: var(--neutral-white);
}

.divider {
	width: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin-bottom: -1px;
}
#divider1 {
	/* background: url(i/chapter-top_1white.svg) top center;
	aspect-ratio: 1280/114; */
	background: url(i/chapter-top_1white&illustration-new.png) top center;
	aspect-ratio: 1280/272;
	background-size: 100%;
	margin-top: 40px;
}
#divider2 {
	background: url(i/chapter-top_2yellow.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/101;
	margin-top: 60px;
}
#divider3 {
	background: url(i/chapter-top_3blue.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/82;
}
#divider4 {
	background: url(i/chapter-top_4gray.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/91;
	margin-top: 80px;
}
#divider5 {
	background: url(i/chapter-top_5white.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/114;
}
#divider6 {
	background: url(i/chapter-top_6yellow.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/93;
	margin-top: 90px;
}
#divider7 {
	background: url(i/chapter-top_7blue.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/70;
	margin-top: 90px;
}
#divider8 {
	background: url(i/chapter-top_8gray.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/70;
	margin-top: 90px;
}
#divider9 {
	background: url(i/chapter-top_9white.svg) top center;
	aspect-ratio: 1280/114;
	/* background: url(i/chapter-top_9white&illustration.svg) top center;
	aspect-ratio: 1280/177; */
	background-size: 100%;
	margin-top: 90px;
}
#divider10 {
	background: url(i/chapter-top_10blue.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/70;
	margin-top: 90px;
}
#divider11 {
	background: url(i/chapter-top_11yellow.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/82;
	margin-top: 90px;
}
#divider12 {
	background: url(i/chapter-top_12gray.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/95;
	margin-top: 30px;
}
#divider13 {
	background: url(i/chapter-top_13white.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/70;
	margin-top: 90px;
}
#divider14 {
	background: url(i/chapter-top_14blue.svg) top center;
	aspect-ratio: 1280/94;
	/* background: url(i/chapter-top_14blue&illustration.svg) top center;
	aspect-ratio: 1280/215; */
	background-size: 100%;
	margin-top: 30px;
}
#divider15 {
	background: url(i/chapter-top_15white.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/76;
	margin-top: 90px;
}
#divider16 {
	background: url(i/chapter-top_16gray.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/84;
	margin-top: 30px;
}
#divider17 {
	/* background: url(i/chapter-top_17yellow.svg) top center;
	aspect-ratio: 1280/70; */
	background: url(i/chapter-top_17yellow&illustration.png) top center;
	aspect-ratio: 1280/193;
	background-size: 100%;
	margin-top: 0;
}
#divider18 {
	background: url(i/chapter-top_18gray.svg) top center;
	background-size: 100%;
	aspect-ratio: 1280/73;
	margin-top: 60px;
	display: none;
}
#section-demography .chapter.yellow {
	padding-bottom: 30px;
}
#final-chapter {
	height: 150px;
	/* background: linear-gradient(180deg, #6B7EA7 0%, #5E6085 24.04%, #5D3A4A 48.56%, #B86232 77.4%, #872118 100%); */
	/* background: linear-gradient(180deg, #2F4570 0%, #3F5D8D 15%, #C1676C 45%, #F09F85 70%, #FE8939 90%, #F35D40 100%); */
	/* background: linear-gradient(180deg, #3F5D8D 0%, #C1676C 35%, #F09F85 60%, #FE8939 85%, #F35D40 100%);	 */
	background: linear-gradient(180deg, #3F5D8D 0%, #C1676C 40%, #F09F85 70%, #FE8939 100%);
	display: none;
}

.compact-cards {
	display: flex;
	gap: 30px;
	justify-content: space-between;
}
.compact-cards .card-info,
.compact-cards .card-text {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

nav#menu {
    color: var(--blue-navy);
    background: var(--blue-pale);
	width: fit-content;
    margin: -20px auto 0;
	border-radius: 25px;

    position: sticky;
    z-index: 1000;
    bottom: 10px;
    left: 0;
    right: 0;
	
    display: flex;
    justify-content: center;
    align-items: center;
	gap: 1px;
    
	overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

	box-sizing: border-box;
}
#portrait-2025 .menu::-webkit-scrollbar { display: none; } /* Chrome/Safari */
#menu .anchor {
	width: fit-content;
	padding: 15px 20px;
	cursor: pointer;
	line-height: 100%;
	white-space: nowrap;
}
#menu .anchor:hover { background: var(--blue-light); }
#menu .anchor.active { background: var(--blue-primary); color: var(--neutral-white); }

#portrait-2026 .illustration {
	margin-top: 30px;
	width: 100%;
	max-width: 400px;
}
.illustration#illustration-less_tech {
	aspect-ratio: 1185 / 895;
}
.illustration#illustration-thumbs_down {
	aspect-ratio: 826 / 940;
	max-width: 300px;
}
.illustration#illustration-money_catch {
	aspect-ratio: 1187 / 1067;
}
.illustration#illustration-long_bill {
	aspect-ratio: 974 / 963;
	/* mix-blend-mode: multiply; */
}
.illustration#illustration-new_designer {
	aspect-ratio: 1397 / 885;
}
.illustration#illustration-layoffs {
	aspect-ratio: 1435 / 744;
}
.illustration#illustration-aux_power {
	aspect-ratio: 546 / 236;
}
.illustration#illustration-rambo {
	aspect-ratio: 1300 / 891;
}
.illustration#illustration-remote {
	aspect-ratio: 762 / 931;
	max-width: 280px;
}

@media screen and (max-width:1080px) {
	.dousplit {
		flex-direction: column;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.dousplit .split-content {
		max-width: unset;
		order: 2;
	}
	.dousplit .split-graphics {
		order: 1;
	}
	.quote-box {
		margin-top: 30px;
	}
	.factoids-row.column { 
		flex-direction: row;
		justify-content: center;
		gap: 40px;
	}
	.factoids-row {
		justify-content: center;
		gap: 40px;
	}
	.dousplit .split-graphics { align-self: center; }
	.dousplit .split-graphics.desktop { display: none;} 
	.dousplit .split-graphics.mobile { display: block; }
	
	#portrait-2026 .illustration {
		margin-left: auto;
		margin-right: auto;
	}

	.value-box.small .value,
	.value-box.smaller .value,
	.value-box.big .value {
		font-size: 80px;
	}

	.value-box.big {
		width: 100%;
		max-width: 200px;
	}

	.compact-cards .card-info {
		flex-direction: column-reverse;
		margin-bottom: 30px;
	}

	h3:has(+ .factoids-row) {
		text-align: center;
	}

}

@media screen and (max-width:960px) {
	.b-longread .b-typo_post h2 { font-family: var(--font-heading) !important; }
	.b-longread {
        margin: 0!important;
    }
	.b-longread .b-longread-tech,
	.b-longread .tg-promo,
	.b-longread .b-post-tags,
	.b-longread .b-similar-posts,
	.b-longread div:has(.b-lenta),
	.b-longread div:has(.b-lenta) + div,
	.b-longread div:has(+ .b-similar-posts) {
		max-width: 920px!important;
		margin-left: 20px!important;
		margin-right: 15px!important;
	}
	.b-longread .b-post-info {
		margin-left: 20px!important;
		margin-right: 15px!important;
	}
	.b-longread .section-wrapper {
		max-width: 800px;
		margin: 0 auto;
	}
	.divider {
		margin-bottom: -1px;
	}
	.factoids-row {
		flex-wrap: wrap;
	}
}

@media screen and (max-width:780px) {
	.b-longread .section-wrapper {
		margin: 0 30px;
	}
}

@media screen and (max-width:560px) {
	.b-longread .section-wrapper {
		margin: 0 20px;
	}
	.b-longread .b-typo_post h1 { font-size: 42px; }
	.b-longread .b-typo_post h2.section-title { font-size: 28px; }
	.b-typo.b-typo_post h4 { font-size: 24px; }
	.b-longread .b-typo_post li, .b-longread .b-typo_post p {
		font-size: 16px;
		line-height: 150%;
	}
	.b-typo.b-typo_post .lead-text {
		font-size: 20px;
    	line-height: 150%;
	}

	.factoids-row { gap: 20px; }
	.value-box {
		max-width: 180px!important;
	}
	.value-box.small .value,
	.value-box.smaller .value,
	.value-box.medium .value,
	.value-box.big .value {
		font-size: 60px;
	}

	.b-longread .b-typo_post .factoids-row .text-tech {
		font-size: 14px;
	}
	.b-longread .b-typo_post .quote {
		font-size: 20px;
	}

	#menu .anchor {
		padding: 15px 10px;
	}
	#menu .anchor:first-child { padding-left: 15px; }
	#menu .anchor:last-child { padding-right: 15px; }

	#section-summary {
		background-size: cover;
		padding-top: 80px;
	}
	#section-summary .row {
		flex-direction: column;
		max-width: fit-content;
		margin: 40px auto 0;
	}
	#section-summary .row .factoid {
		margin-bottom: 0;
	}
	#divider1 {
		background: url(i/chapter-top_1white&illustration-new_mobile.png) top center;
    	aspect-ratio: 600 / 259;
		background-size: 100%;
		margin-top: 30px;
	}
	#divider17 {
		background: url(i/chapter-top_17yellow&illustration_mobile.png) top center;
    	aspect-ratio: 600 / 193;
		background-size: 100%;
		margin-top: 30px;
	}
}

@media screen and (max-width:460px) {
	/* .b-longread .b-typo_post h1 { font-size: 42px; } */
	.value-box {
		max-width: 140px!important;
	}
	.value-box.small .value,
	.value-box.smaller .value,
	.value-box.medium .value,
	.value-box.big .value {
		font-size: 40px;
	}

	#menu .anchor {
		padding: 15px 5px;
	}
	#menu .anchor:first-child { padding-left: 15px; }
	#menu .anchor:last-child { padding-right: 15px; }
	.b-longread .b-typo_post .quote {
		font-size: 18px;
	}
}

@media screen and (max-width:420px) {
	#menu .anchor.text-tech-s {
		font-size: 12px;
		flex-shrink: 0; 
		white-space: nowrap;
		-webkit-text-size-adjust: 100%; 
	}
	.chapter-title {
		text-align: center;
    	line-height: 120%;
	}
}

.b-longread .b-typo_post li a, .b-longread .b-typo_post p a,
.b-longread .b-typo_post li a:visited, .b-longread .b-typo_post p a:visited {
	color: var(--blue-primary);
    border-bottom-color: var(--blue-primary);
}
.b-longread .b-typo_post li a:hover, .b-longread .b-typo_post p a:hover {
	color: var(--magenta-primary);
    border-bottom-color: var(--magenta-primary);
}