/* «Обо мне»: основная надпись с исполнителем, паспорт, что сделал, риски, концовка. Перенос _dev/design/about/style.css. */



b, strong { font-weight: 600; }

/* ---------- Кнопки и ссылки ---------- */

/* главное действие: одна синяя кнопка на экран */
.btn-tg { overflow: clip; display: flex; }

.out { gap: 8px; }
.out .ic--arrow { width: 22px; height: 11px; }

/* плейсхолдер: незаполненные данные владельца */
.tbd { font-style: italic; font-size: var(--fs-small); align-self: start; }

/* ---------- Лист ---------- */
/* первый лист не занимает экран: высота — по основной надписи */
.sheet--hero { --hero-min: 0; }
.sheet h2 { max-width: 26ch; margin-bottom: 28px; }
.sheet h2:has(+ .sheet__lead) { margin-bottom: 14px; }
.sheet__lead { max-width: 60ch; margin-bottom: 36px; font-size: var(--fs-body); line-height: 1.4; color: var(--graphite); }

/* ---------- Лист 1: основная надпись ---------- */
.frame--hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 620px;
  column-gap: 64px;
  --hx: 28px;                     /* правое и нижнее поле: штамп выходит в угол рамки на эту величину */
  padding: 34px var(--hx) var(--hx) 34px;
}

/* колонка сверху вниз: заголовок, лид, факт, фраза владельца, переходы; свободный низ — под баннер cookie */
.intro { display: flex; flex-direction: column; padding-bottom: 6px; }
.intro h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -.015em; padding-top: 4px; }
.intro__lead { margin-top: 24px; font-size: var(--fs-body); line-height: 1.45; max-width: 42ch; }

/* проверяемый факт сразу под лидом: одна строка со ссылкой на лист «Что сделал» */
.intro__fact { margin-top: 22px; padding-top: 12px; max-width: 560px; border-top: var(--frame) solid var(--ink); font-size: var(--fs-body); }
.intro__fact a { text-decoration: none; }
.intro__fact b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--thin); }
.intro__fact a:hover b, .intro__fact a:focus-visible b { text-decoration-color: currentColor; }
.intro__fact .num { font-size: 1em; }
.intro__fact .ic--down { margin-left: 4px; }

/* место для одной фразы владельца */
/* фраза владельца — с линией слева; пока её нет (режим правки, подсказка .tbd) — пунктирное место под неё */
.intro__why { margin-top: 20px; max-width: 46ch; padding: 0 0 0 16px; border-left: 1px solid var(--ink); }
.intro__why:has(.tbd) { min-height: 44px; padding-bottom: 12px; border-left: 1px dashed var(--graphite); border-bottom: 1px solid var(--hair); }
.intro__why .tbd { border: 0; padding: 0; white-space: normal; }
.intro__jump { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 2px 26px; font-size: var(--fs-annotation); }
.intro__jump a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; text-decoration-line: underline; }

/* штамп в правом нижнем углу рамки: имя, графы с одной фамилией, фото со связью и ценой, кнопка, статус, малый штамп */
.tb {
  align-self: end;
  margin: 0 calc(-1 * var(--hx)) calc(-1 * var(--hx)) 0;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 112px;
  grid-template-areas:
    "name   name   name"
    "roles  roles  one"
    "photo  reply  reply"
    "photo  cta    cta"
    "photo  alt    alt"
    "status status sheet";
  border-top: var(--frame) solid var(--ink);
  border-left: var(--frame) solid var(--ink);
  background: var(--paper);
}
.tb > * { margin: 0; }
.tb > :not(dl) { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.tb__one, .tb .tb__cta, .tb__alt, .tb__sheet { border-right: 0; }
.tb .tb__cta { border-bottom: 0; }
/* у граф линии рисуют строки, а не список: тонкие линии доходят до вертикали */
.tb__roles div { border-right: 1px solid var(--ink); }
.tb__roles div:last-child, .tb__reply div:last-child { border-bottom: 1px solid var(--ink); }

.tb__photo { grid-area: photo; width: 100%; height: 0; min-height: 100%; object-fit: cover; object-position: 50% 14%; }

.tb__name { grid-area: name; padding: 16px 22px 14px; display: grid; gap: 4px; align-content: center; }
.tb__name strong { font-size: var(--fs-chapter); line-height: 1.1; letter-spacing: -.01em; }
.tb__name span { font-size: var(--fs-body); font-style: italic; color: var(--graphite); }

/* четыре графы — одна фамилия: фамилии видны сразу, движется только скобка */
.tb__roles { grid-area: roles; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 54px); }
.tb__roles div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: stretch; }
.tb__roles div + div { border-top: 1px solid var(--hair); }
.tb__roles dt { display: flex; align-items: center; padding: 6px 16px; font-size: var(--fs-label); line-height: 1.25; font-style: italic; color: var(--graphite); border-right: 1px solid var(--hair); }
.tb__roles dd { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 6px 18px; font-size: var(--fs-body); font-style: italic; }
.tb__roles dd small { font-size: var(--fs-label); font-style: normal; color: var(--graphite); text-align: right; line-height: 1.25; }
.tb__roles dd span { white-space: nowrap; }

/* выносная скобка: все четыре графы — один человек */
.tb__one { grid-area: one; position: relative; display: flex; align-items: center; padding: 8px 10px 8px 34px; }
.tb__one::before {
  content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 12px;
  border: 1px solid var(--ink); border-left: 0;
  transform-origin: 50% 50%;
  animation: brace .6s var(--ease) .3s both;
}
.tb__one::after { content: ""; position: absolute; left: 22px; top: 50%; width: 8px; border-top: 1px solid var(--ink); }
.tb__one span { font-size: var(--fs-annotation); font-style: italic; line-height: 1.2; }
@keyframes brace { from { transform: scaleY(0); }
}

.tb__reply { grid-area: reply; margin: 0; padding: 0; display: grid; }
.tb__reply div { padding: 8px 18px 9px; }
.tb__reply div + div { border-top: 1px solid var(--hair); }
.tb__reply dt { font-size: var(--fs-label); line-height: 1.3; font-style: italic; color: var(--graphite); }
.tb__reply dd { margin: 2px 0 0; font-size: var(--fs-small); line-height: 1.35; }
.tb__reply small { display: block; margin-top: 2px; font-size: var(--fs-label); color: var(--graphite); }

.tb .tb__cta { grid-area: cta; }
.tb__alt { grid-area: alt; }

/* запасной путь — тихой строкой под кнопкой */
.tb__alt { padding: 7px 18px; font-size: var(--fs-label); color: var(--graphite); }
.tb__alt a { color: var(--ink); text-decoration-line: underline; }
.tb__alt a:hover, .tb__alt a:focus-visible { color: var(--blue); }

.tb__status { grid-area: status; display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; padding: 9px 18px; font-size: var(--fs-label); }
.tb__k { font-style: italic; color: var(--graphite); }
.tb__sheet { grid-area: sheet; display: grid; align-content: center; gap: 2px; padding: 7px 14px; font-size: var(--fs-label); color: var(--graphite); font-variant-numeric: tabular-nums; }
.tb__sheet b { font-weight: 400; color: var(--ink); }

/* ---------- Лист 2: кто я ---------- */

/* слева рассказ владельца (главное), справа — компактный паспорт */
.frame--about { display: grid; grid-template-columns: minmax(0, 1fr) 500px; column-gap: 72px; align-items: start; }
.frame--about h2 { margin-bottom: 28px; }

/* колонка ~60ch: первая строка — известные факты, ниже место под рассказ с ориентиром длины */
.bio { max-width: 60ch; display: grid; gap: 18px; }
.bio__known { font-size: var(--fs-title); line-height: 1.4; }
.bio__slot > * + * { margin-top: 1em; }
.bio__slot:has(.tbd) { min-height: 216px; padding: 2px 0 12px 16px; border-left: 1px dashed var(--graphite); border-bottom: 1px solid var(--hair); }
.bio__slot .tbd { border: 0; padding: 0; white-space: normal; }

/* паспорт: графы одной сетки, значения — коротко */
.card { margin: 0; border-top: var(--frame) solid var(--ink); }
.card > div:last-child { border-bottom: 1px solid var(--ink); }
.card > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.card > div + div { border-top: 1px solid var(--hair); }
.card dt { padding: 12px 16px 12px 0; font-size: var(--fs-label); font-style: italic; color: var(--graphite); border-right: 1px solid var(--hair); line-height: 1.3; }
.card dd { margin: 0; padding: 10px 0 11px 18px; display: grid; justify-items: start; align-content: start; gap: 4px; font-size: var(--fs-small); line-height: 1.4; }
.card dd a:not(.out) { text-decoration-line: underline; }

/* ---------- Лист 3: что сделал ---------- */

/* ведомость работ без оси времени: Минпань — строкой во всю ширину со снимком, ниже три работы; подпись величины — под цифрой */
.record { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; border-top: var(--frame) solid var(--ink); }
/* строки общие для трёх работ: цифры и переходы стоят на одной высоте */
.record li { position: relative; display: grid; grid-row: 2 / span 3; grid-template-rows: subgrid; justify-items: start; gap: 16px; padding: 32px 28px 26px; border-bottom: 1px solid var(--ink); }
.record li + li + li { border-left: 1px solid var(--hair); }
.record__k { font-size: var(--fs-label); font-style: italic; color: var(--graphite); line-height: 1.3; }
.record h3 { font-size: var(--fs-title); line-height: 1.15; }
.record h3 small { display: block; margin-top: 4px; font-size: var(--fs-label); font-weight: 400; font-style: italic; color: var(--graphite); line-height: 1.3; }
/* главная строка: имя и срок, состав с адресом, снимок главной */
.record .record__main { grid-column: 1 / -1; grid-row: 1; grid-template-rows: none; grid-template-columns: 250px auto minmax(0, 1fr) 352px; column-gap: 48px; align-items: center; padding: 28px 28px 28px; }
.record .record__main h3 { font-size: var(--fs-chapter); line-height: 1.1; align-self: center; }
.record .record__main h3 small { font-size: var(--fs-small); }
.record__parts { display: grid; gap: 8px; justify-items: start; }
.record__parts ul { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
/* пункты состава — строка через точку, без оформления строк ведомости */
.record .record__parts li { display: inline; grid-row: auto; padding: 0; border: 0; white-space: nowrap; }
/* точка — в конце пункта: перенос не начинает строку с разделителя */
.record .record__parts li:not(:last-child)::after { content: "·"; padding: 0 10px; font-weight: 400; color: var(--thin); }
.record__shot { width: 352px; height: auto; border: 1px solid var(--ink); }
/* цифра, под ней — подпись величины, ниже — откуда цифра */
.record__fig { display: grid; gap: 4px; align-content: start; justify-items: start; }
.record__fig b { font-size: var(--fs-chapter); line-height: 1; white-space: nowrap; margin-bottom: 2px; }
.record__fig .record__k { font-style: normal; font-size: var(--fs-small); color: var(--ink); }
.record__fig i { font-style: normal; font-size: var(--fs-label); color: var(--graphite); line-height: 1.35; max-width: 34ch; text-wrap: pretty; }
/* «Смотреть кейс» главнее адреса сайта: заливка тушью над ссылкой */
.record__go { display: grid; gap: 10px; justify-items: start; align-content: end; }
.btn--case { font-size: var(--fs-small); padding: 10px 16px; }
.btn--case .ic--arrow { width: 22px; height: 11px; transition: transform .35s var(--ease); }
.btn--case:hover .ic--arrow, .btn--case:focus-visible .ic--arrow { transform: translateX(4px); }
.record__note { margin-top: 18px; font-size: var(--fs-small); color: var(--graphite); }
.record__note a { color: var(--ink); text-decoration-line: underline; }

/* ---------- Синяя лента (как на главной) ---------- */

/* ---------- Лист 4: риски и условия (калька) ---------- */

.frame--risk { display: grid; grid-template-columns: minmax(0, 1fr) 560px; column-gap: 64px; align-items: end; padding-bottom: 64px; }
.risk__answer { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; max-width: 40ch; padding-left: 18px; border-left: 1px solid var(--ink); }
.risk__list { margin: 32px 0 0; border-top: var(--frame) solid var(--ink); }
.risk__list div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.risk__list dt { font-weight: 600; }
.risk__list dd { margin: 0; font-size: var(--fs-annotation); max-width: 56ch; }

/* условия — таблица со сплошной сеткой, подпись на уровне заголовка листа */
.terms { width: 100%; border-collapse: collapse; border: var(--frame) solid var(--ink); }
/* подпись таблицы — как шапка граф, не второй заголовок листа */
.terms caption { text-align: left; font-style: italic; font-size: var(--fs-label); color: var(--graphite); line-height: 1.3; padding: 0 0 8px; }
.terms th, .terms td { border: 1px solid var(--ink); padding: 16px 18px; text-align: left; vertical-align: baseline; }
.terms th { width: 124px; font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); }
.terms td { font-size: var(--fs-annotation); line-height: 1.45; }

/* ---------- Лист 5: концовка — штамп исполнителя в углу рамки ---------- */

/* две колонки одной высоты: слева заголовок и шаги, справа ответ над штампом — без пустой четверти */
.frame--me { --me-b: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 600px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "h side" "text side"; column-gap: 64px; padding-bottom: var(--me-b); }
.frame--me h2 { grid-area: h; font-size: var(--fs-headline); line-height: .98; max-width: none; margin-bottom: 0; }
/* правая колонка прижата к низу: ответ стоит прямо над штампом, без пустой четверти */
.me__side { grid-area: side; display: flex; flex-direction: column; justify-content: flex-end; }
.me__lead { margin-top: 6px; padding-left: 18px; border-left: 1px solid var(--ink); font-size: var(--fs-title); font-weight: 600; line-height: 1.3; max-width: 34ch; }
.me__text { grid-area: text; display: flex; flex-direction: column; padding-bottom: 4px; }
.steps__t { margin-top: 36px; font-size: var(--fs-title); line-height: 1.15; }
.steps { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: step; border-top: var(--frame) solid var(--ink); max-width: 620px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
/* номер шага — Caption графитом */
.steps li::before { content: counter(step); grid-row: 1 / 3; align-self: start; padding-top: 4px; font: 400 var(--fs-caption)/1.4 var(--sans); color: var(--graphite); font-variant-numeric: tabular-nums; }
.steps b { font-size: var(--fs-body); }
.steps li > span { font-size: var(--fs-small); color: var(--graphite); }
.steps a { color: var(--ink); text-decoration-line: underline; }

.stamp { --stamp-photo: 36px; --stamp-seal-room: 20px; margin: 28px calc(-1 * var(--frame-x)) calc(-1 * var(--me-b)) 0; grid-template-columns: minmax(0, 1fr) 80px 150px; grid-template-areas: "who who who" "cta reply reply" "alt alt alt" "facts facts sheet"; }
/* подпись исполнителя: мини-фото 36px рядом с фамилией */
.stamp__who { padding: 16px 22px; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.stamp__photo { grid-row: 1 / 3; width: var(--stamp-photo); height: var(--stamp-photo); object-position: 50% 18%; border: 1px solid var(--ink); }
.stamp__who span { font-size: var(--fs-small); }
.stamp .stamp__cta { grid-area: cta; }
.stamp .tb__alt { grid-area: alt; border-right: 0; }
.stamp__reply { grid-area: reply; align-self: stretch; padding: 14px 18px; border-left: 1px solid var(--ink); font-size: var(--fs-small); line-height: 1.35; }
.stamp__reply .tnum { white-space: nowrap; }
.stamp__facts { align-self: stretch; display: flex; align-items: center; padding: 9px 20px; border-bottom: 0; border-right: 1px solid var(--ink); font-size: var(--fs-small); }
.stamp__sheet { display: grid; align-content: center; gap: 2px; padding: 8px 16px; border-bottom: 0; font-size: var(--fs-label); }
.stamp__sheet b { font-weight: 400; color: var(--ink); }


/* ---------- Низкое окно: штамп с кнопкой целиком в 768 ---------- */

@media (max-height: 820px) and (min-width: 1180px) {
  .frame--hero { padding-top: 24px; }
  .intro__lead { margin-top: 16px; }
  .intro__fact { margin-top: 18px; }
  .intro__why { margin-top: 16px; }
  .intro__jump { margin-top: 14px; }
  .tb__name { padding: 10px 22px 9px; }
  .tb__roles { grid-template-rows: repeat(4, 46px); }
  .tb__reply div { padding-top: 5px; padding-bottom: 6px; }
  .tb .tb__cta { padding-top: 10px; padding-bottom: 10px; }
  .tb__alt { padding-top: 5px; padding-bottom: 5px; }
  .tb__status { padding-top: 6px; padding-bottom: 6px; }
  .tb__sheet { padding-top: 5px; padding-bottom: 5px; }
}

/* ---------- Узкие экраны ---------- */

.frame--hero { container: hero / inline-size; }
.frame:has(> .record) { container: record / inline-size; }
.me__side { container: side / inline-size; }
.card, .risk__list { container-type: inline-size; }

/* разворот складывается: колонки листов встают друг под друга, штамп — последним блоком в углу рамки */
@media (max-width: 1179px) {
  .frame--hero { grid-template-columns: minmax(0, 1fr); row-gap: 40px; --hx: var(--pad); padding: var(--pad) var(--hx) var(--hx) var(--pad); }
  .intro { padding-bottom: 0; }
  .frame--about { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .frame--about .card { max-width: 680px; }
  .frame--risk { grid-template-columns: minmax(0, 1fr); row-gap: 40px; align-items: start; }
  .frame--me { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "text" "side"; --me-b: var(--frame-b); padding-bottom: var(--me-b); }
  .me__side { margin-top: 36px; }
  .stamp { margin-left: auto; width: min(600px, calc(100% + var(--frame-x))); }
}

/* штамп первого листа во всю рамку уже 640: фото рядом со связью, скобка — под графами */
@container hero (width < 640px) {
  .tb { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "name name" "roles roles" "one one" "photo reply" "cta cta" "alt alt" "status status" "sheet sheet"; }
  .tb__name strong { font-size: var(--fs-title); }
  .tb__name { padding: 12px 18px 10px; }
  .tb__roles { grid-template-rows: none; }
  .tb__roles div { grid-template-columns: 112px minmax(0, 1fr); border-right: 0; }
  .tb__roles dt { padding: 8px 12px; }
  .tb__roles dd { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 8px 14px; }
  .tb__roles dd small { text-align: left; }
  .tb__roles div:last-child { border-bottom: 0; }
  /* скобка лёжа: все графы над ней — один человек */
  .tb__one { justify-content: center; padding: 18px 12px 8px; border-right: 0; }
  .tb__one::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 8px; border: 1px solid var(--ink); border-top: 0; transform-origin: 50% 0; animation-name: brace-x; }
  .tb__one::after { left: 50%; top: 8px; width: 0; height: 8px; border-top: 0; border-left: 1px solid var(--ink); }
  .tb__reply div { padding: 8px 14px 9px; }
  .tb__alt, .tb__status { padding-left: 14px; padding-right: 14px; }
  .tb__sheet { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--hair); }
  .tb__status { border-right: 0; }
}
@keyframes brace-x { from { transform: scaleX(0); } }
@container hero (width < 400px) {
  .tb { grid-template-columns: 96px minmax(0, 1fr); }
  .tb__roles div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* паспорт в узкой колонке: подпись графы уже */
@container (width < 480px) {
  .card > div { grid-template-columns: 112px minmax(0, 1fr); }
  .card dd { padding-left: 14px; }
  .card .tbd { white-space: normal; }
  .risk__list div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ведомость: главная строка — имя и цифра над составом, снимок справа; три работы — в строку, пока помещаются */
@container record (width < 1140px) {
  .record .record__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h shot" "fig shot" "parts shot"; row-gap: 18px; align-items: start; }
  .record__main h3 { grid-area: h; }
  .record__main .record__fig { grid-area: fig; }
  .record__main .record__parts { grid-area: parts; }
  .record__shot { grid-area: shot; width: 100%; align-self: center; }
}
@container record (width < 820px) {
  .record { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .record li { grid-row: auto; grid-template-rows: none; padding: 24px var(--pad) 22px; }
  .record li + li + li { border-left: 0; }
}
@container record (width < 620px) {
  .record .record__main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "fig" "parts" "shot"; padding: 24px var(--pad); }
  .record .record__parts li { white-space: normal; }
}

/* штамп концовки в узкой рамке: графы друг под другом */
@container side (width < 480px) {
  .stamp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "cta" "reply" "alt" "facts" "sheet"; }
  .stamp__reply { border-left: 0; }
  .stamp__facts { border-right: 0; border-bottom: 1px solid var(--ink); }
  .stamp__sheet { display: flex; justify-content: space-between; gap: 12px; }
}

/* узкий лист: таблица условий складывается — подпись графы над текстом */
@media (max-width: 719px) {
  .terms, .terms tbody, .terms tr, .terms th, .terms td { display: block; width: auto; }
  /* рамка — у строк, подпись таблицы остаётся над ней */
  .terms { border: 0; }
  .terms tbody { border: var(--frame) solid var(--ink); }
  .terms tr + tr { border-top: 1px solid var(--ink); }
  .terms th, .terms td { border: 0; padding: 12px 14px 0; }
  .terms td { padding: 4px 14px 14px; }
  .frame--risk { padding-bottom: var(--frame-b); }
  .intro__jump { gap: 2px 18px; }
  /* длинный плейсхолдер переносится, а не уходит за рамку */
  .tbd { white-space: normal; }
}