/* Блок «Обо мне» на главной. Использует общую дизайн-систему style.css;
   все правила ограничены #about, чтобы не затрагивать другие блоки. */
#about .about__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 72px;
	align-items: start;
}
#about .about__intro { position: static; display: flex; flex-direction: column; gap: 18px; }
#about .about__title em { color: var(--accent-dark); font-weight: 500; }
#about .about__lead { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
#about .about__story {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 6px 0;
	padding: 2px 0 2px 22px;
	border-left: 1px solid var(--accent);
}
#about .about__story p {
	margin: 0;
	font-family: var(--sans);
	font-style: normal;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--ink-soft);
}
#about .about__story strong { font-weight: 500; color: var(--accent-dark); }
#about .about__list { display: flex; flex-direction: column; gap: 18px; }
#about .about__requests { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
#about .about__requests li {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 78px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line-strong);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
}
#about .about__number { flex: 0 0 30px; font: italic 500 25px/1.2 var(--serif); color: var(--muted); }
#about .about__list-note { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
#about .about__facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	margin-top: 32px;
	padding-top: 22px;
	border-top: 1px solid var(--line-strong);
}
#about .about__fact { background: transparent; border: 0; border-radius: 0; padding: 0; }
#about .about__fact summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	list-style: none;
	cursor: pointer;
}
#about .about__fact summary::-webkit-details-marker { display: none; }
#about .about__fact summary:focus-visible,
#about .about__actions a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
#about .about__fact-title { display: block; font-size: 16px; font-weight: 500; }
#about .about__fact-note { display: block; margin-top: 5px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
#about .about__toggle { position: relative; flex: 0 0 18px; height: 18px; color: var(--accent); }
#about .about__toggle::before,
#about .about__toggle::after { content: ''; position: absolute; background: currentColor; }
#about .about__toggle::before { width: 14px; height: 1.5px; left: 2px; top: 8px; }
#about .about__toggle::after { width: 1.5px; height: 14px; left: 8px; top: 2px; }
#about .about__fact[open] .about__toggle::after { display: none; }
#about .about__fact p {
	margin: 16px 0 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ink-soft);
}
#about .about__invitation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	margin-top: 32px;
	padding: 26px 30px;
	background: var(--bg);
	border-radius: 18px;
}
#about .about__invitation p { margin: 7px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
#about .about__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#about .about__education-link { font-size: 14px; font-weight: 500; text-underline-offset: 4px; }
#about .about__education-link:hover { text-decoration: underline; }
@media (max-width: 1023px) {
	#about .about__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 600px) {
	#about .about__requests li { gap: 16px; min-height: 72px; font-size: 16px; padding: 18px 0; }
	#about .about__facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	#about .about__fact + .about__fact { border-top: 1px solid var(--line-strong); padding-top: 20px; }
	#about .about__invitation { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px; }
	#about .about__actions { align-items: stretch; text-align: center; }
}
