/* Страница «Об авторе». Макет Claude Design, язык главной: крупные цифры,
   карточки с обводкой и смещённой тенью, кислотный акцент.
   Подключается только на /ob-avtore/ — см. includes/author-page.php. */

.fh-author{
  --fh-author-shadow:5px 5px 0 var(--fh-ink);
  max-width:1320px;margin:0 auto;padding:40px 32px 64px;
}
[data-theme="dark"] .fh-author{--fh-author-shadow:0 6px 22px rgba(0,0,0,.5)}

/* --- Герой: заголовок слева, цифры справа (как в герое главной) --- */
.fh-author-hero{padding-bottom:26px}
.fh-author-title{
  margin:0;font:900 56px/1.02 'Unbounded',system-ui,sans-serif;
  letter-spacing:-.035em;color:var(--fh-ink);
}
.fh-author-lede{
  margin:16px 0 0;max-width:34em;
  font:400 17px/1.5 'Onest',system-ui,sans-serif;color:var(--fh-muted);
}
/* Цифры — отдельный ряд карточек на всю ширину, а не приписка сбоку от
   заголовка: при разной высоте заголовка и лида они висели вразнобой. */
.fh-author-stats{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.fh-author-stats li{
  padding:22px 22px 20px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;min-height:132px;
  background:var(--fh-paper);border:2px solid var(--fh-ink);border-radius:20px;
  box-shadow:var(--fh-author-shadow);
}
.fh-author-stats b{
  display:block;font:900 40px/1 'Unbounded',system-ui,sans-serif;
  letter-spacing:-.03em;color:var(--fh-ink);
}
.fh-author-stats span{
  display:block;margin:10px auto 0;max-width:16em;
  font:600 13.5px/1.35 'Onest',system-ui,sans-serif;color:var(--fh-muted);
}
/* Карточка с подписчиками ведёт в канал: цифра без ссылки выглядит как
   заявление, по которому нечего проверить. */
.fh-author-stat-link{padding:0;transition:border-color .18s ease, box-shadow .18s ease}
.fh-author-stat-link a{
  display:flex;flex-direction:column;justify-content:center;flex:1;
  padding:22px 22px 20px;text-decoration:none;
}
.fh-author-stat-link:hover{border-color:var(--fh-violet);box-shadow:5px 5px 0 var(--fh-violet)}
.fh-author-stat-link:hover b{color:var(--fh-violet)}
[data-theme="dark"] .fh-author-stat-link:hover{border-color:#A98BFF;box-shadow:0 6px 22px rgba(0,0,0,.5)}
[data-theme="dark"] .fh-author-stat-link:hover b{color:#A98BFF}
/* Лаймовая — первая: год основания проекта, главный сигнал страницы. */
.fh-author-stat-acid{background:var(--fh-acid) !important}
.fh-author-stat-acid b{color:#0A0A0A}
.fh-author-stat-acid span{color:rgba(10,10,10,.7)}
/* Третья карточка без цифры — подпись крупнее, чтобы ряд читался ровно. */
.fh-author-stats li:last-child b{font-size:34px;color:var(--fh-violet)}
[data-theme="dark"] .fh-author-stats li:last-child b{color:#A98BFF}

/* --- Карточка с обводкой: био и врезка «Важно» --- */
.fh-author-card{
  margin-top:28px;padding:24px 26px;
  background:var(--fh-paper);border:2px solid var(--fh-ink);border-radius:20px;
  box-shadow:var(--fh-author-shadow);
}
.fh-author-card p{
  margin:0;font:400 16.5px/1.6 'Onest',system-ui,sans-serif;color:var(--fh-ink);
}
.fh-author-bio p{font-size:17px}
.fh-author-note b{
  display:block;margin-bottom:8px;
  font:800 13px/1 'Onest',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fh-violet);
}
[data-theme="dark"] .fh-author-note b{color:#A98BFF}
.fh-author-note p{font-size:15.5px;color:var(--fh-muted)}

/* --- Секции --- */
.fh-author-sec{margin-top:48px}
.fh-author-h2{
  margin:0;font:900 30px/1.1 'Unbounded',system-ui,sans-serif;
  letter-spacing:-.03em;color:var(--fh-ink);
}
.fh-author-sub{
  margin:10px 0 0;font:400 16px/1.5 'Onest',system-ui,sans-serif;color:var(--fh-muted);
}

/* --- «Что на сайте»: три плитки-ссылки --- */
/* grid-auto-rows:1fr держит плитки одной высоты и в три колонки, и в одну:
   иначе высота идёт по длине описания и ряд выглядит рваным. */
.fh-author-grid{
  margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr;gap:18px;
}
.fh-author-tile{
  display:flex;flex-direction:column;padding:22px 20px;text-decoration:none;
  background:var(--fh-paper);border:2px solid var(--fh-ink);border-radius:20px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.fh-author-tile b{
  display:block;font:800 19px/1.2 'Unbounded',system-ui,sans-serif;
  letter-spacing:-.02em;color:var(--fh-ink);
}
.fh-author-tile span{
  display:block;margin-top:8px;
  font:400 14.5px/1.45 'Onest',system-ui,sans-serif;color:var(--fh-muted);
}
.fh-author-tile:hover{
  transform:translate(-2px,-2px);
  border-color:var(--fh-violet);box-shadow:5px 5px 0 var(--fh-violet);
}
.fh-author-tile:hover b{color:var(--fh-violet)}
[data-theme="dark"] .fh-author-tile:hover{border-color:#A98BFF;box-shadow:0 6px 22px rgba(0,0,0,.5)}
[data-theme="dark"] .fh-author-tile:hover b{color:#A98BFF}

/* --- Шаги: крупный номер слева, текст справа --- */
.fh-author-steps{
  margin:22px 0 0;padding:0;list-style:none;counter-reset:fh-step;
  display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  border-top:1px solid var(--fh-line);
}
.fh-author-steps li{
  counter-increment:fh-step;
  display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--fh-line);
}
/* ⚠️ Номер растянут на обе строки сетки. Иначе высоту первой строки задаёт
   цифра 30 px, и описание отъезжает от своего заголовка на её высоту. */
.fh-author-steps li::before{
  content:counter(fh-step,decimal-leading-zero);
  grid-column:1;grid-row:1 / span 2;
  font:900 30px/1 'Unbounded',system-ui,sans-serif;letter-spacing:-.03em;
  color:var(--fh-violet);
}
[data-theme="dark"] .fh-author-steps li::before{color:#A98BFF}
/* ⚠️ Номер шага рисует ::before и занимает первую ячейку сетки. Без явной
   grid-column оба текстовых блока считаются следующими ячейками, и описание
   уезжает в колонку 64 px под номером — текст рвётся по одному слову. */
.fh-author-steps b{
  grid-column:2;
  display:block;font:800 17px/1.3 'Onest',system-ui,sans-serif;color:var(--fh-ink);
}
.fh-author-steps span{
  grid-column:2;
  display:block;margin-top:5px;
  font:400 15.5px/1.55 'Onest',system-ui,sans-serif;color:var(--fh-muted);
}

/* --- Кислотный блок канала --- */
/* Блок канала — по центру: кнопка у правого края читалась как служебная
   ссылка, а это главное действие страницы. */
.fh-author-acid{
  margin-top:48px;padding:44px 26px;text-align:center;
  background:var(--fh-acid);border:2px solid var(--fh-ink);border-radius:20px;
  box-shadow:var(--fh-author-shadow);
}
.fh-author-acid b{
  display:block;font:900 34px/1.12 'Unbounded',system-ui,sans-serif;
  letter-spacing:-.035em;color:#0A0A0A;
}
.fh-author-acid span{
  display:block;margin:12px auto 0;max-width:34em;
  font:400 16.5px/1.5 'Onest',system-ui,sans-serif;color:rgba(10,10,10,.72);
}
.fh-author-acid-btn{
  display:inline-block;margin-top:26px;
  padding:19px 46px;border-radius:999px;white-space:nowrap;
  background:#0A0A0A;color:#fff;border:2px solid #0A0A0A;
  font:700 16px/1 'Onest',system-ui,sans-serif;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.fh-author-acid-btn:hover{background:transparent;color:#0A0A0A}

/* --- Контакт --- */
.fh-author-contact{
  margin-top:28px;padding:26px;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  background:var(--fh-paper);border:2px solid var(--fh-ink);border-radius:20px;
  box-shadow:var(--fh-author-shadow);
}
.fh-author-contact-text b{
  display:block;font:900 24px/1.15 'Unbounded',system-ui,sans-serif;
  letter-spacing:-.03em;color:var(--fh-ink);
}
.fh-author-contact-text span{
  display:block;margin-top:7px;
  font:400 15px/1.45 'Onest',system-ui,sans-serif;color:var(--fh-muted);
}
.fh-author-contact-btns{display:flex;flex-wrap:wrap;gap:10px}
.fh-author-btn{
  padding:14px 26px;border-radius:999px;white-space:nowrap;
  background:transparent;color:var(--fh-ink);border:2px solid var(--fh-ink);
  font:700 14px/1 'Onest',system-ui,sans-serif;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.fh-author-btn:hover{background:var(--fh-ink);color:var(--fh-paper)}
/* Почта показана прямо на кнопке и копируется по клику: `mailto:` открывает
   почтовый клиент, которого у многих нет, и сам адрес при этом не виден. */
.fh-author-btn-mail{
  font-family:'Onest',system-ui,sans-serif;cursor:pointer;
  font-feature-settings:'tnum';letter-spacing:-.01em;
}
.fh-author-btn-mail.is-copied{background:var(--fh-acid);color:#0A0A0A;border-color:#0A0A0A}
.fh-author-btn-mail.is-copied::after{content:attr(data-label)}
.fh-author-btn-mail.is-copied{font-size:0}
.fh-author-btn-mail.is-copied::after{font:700 14px/1 'Onest',system-ui,sans-serif}
/* Лаймовая с чёрной обводкой, как кнопки героя: контурная терялась рядом с соседней. */
.fh-author-btn-tg{background:var(--fh-acid);color:#0A0A0A;border-color:#0A0A0A}
.fh-author-btn-tg:hover{background:#0A0A0A;color:#fff}
/* В тёмной теме ссылки перекрашиваются глобально — на лайме текст уезжал
   в сиреневый и почти не читался. Фон здесь светлый в обеих темах. */
[data-theme="dark"] .fh-author-btn-tg{color:#0A0A0A}
[data-theme="dark"] .fh-author-btn-tg:hover{color:#fff}

/* --- Планшет: цифры под заголовком --- */
@media (max-width:860px){
  .fh-author{padding:28px 20px 48px}
  .fh-author-title{font-size:40px}
  .fh-author-stats{grid-template-columns:1fr;gap:12px}
  .fh-author-stats li{padding:18px;min-height:0}
  .fh-author-stat-link{padding:0}
  .fh-author-stat-link a{padding:18px}
  .fh-author-stats b{font-size:32px}
  .fh-author-stats li:last-child b{font-size:26px}
  .fh-author-stats span{max-width:none}
  .fh-author-grid{grid-template-columns:1fr}
  .fh-author-steps{grid-template-columns:1fr;gap:0}
  .fh-author-contact-text b{font-size:20px}
  .fh-author-h2{font-size:25px}
}

/* --- Телефон --- */
@media (max-width:560px){
  .fh-author-title{font-size:32px}
  .fh-author-lede{font-size:16px}
  .fh-author-stats b{font-size:28px}
  .fh-author-stats span{font-size:12.5px}
  .fh-author-card{padding:20px 18px}
  .fh-author-steps li{grid-template-columns:44px 1fr;gap:14px;padding:16px 0}
  .fh-author-steps li::before{font-size:22px}
  .fh-author-acid{padding:30px 18px}
  .fh-author-acid b{font-size:24px}
  .fh-author-acid span{font-size:15px}
  .fh-author-acid-btn{width:100%;text-align:center;padding:17px 20px}
  .fh-author-contact{padding:22px 18px}
  .fh-author-contact-btns{width:100%}
  .fh-author-btn{flex:1;text-align:center;padding:14px 18px}
}