/* =====================================================================
   0. НАСТРОЙКИ — ЗДЕСЬ МЕНЯЕТСЯ ВСЁ: ЦВЕТА, ШРИФТЫ, РАЗМЕРЫ
   Единицы: rem (1rem = 16px). Пример: 1.25rem = 20px.
   Три набора значений:
     • базовый (в :root)       — ТЕЛЕФОНЫ, экран до 640px
     • @media (min-width:640px)  — ПЛАНШЕТЫ
     • @media (min-width:1024px) — КОМПЬЮТЕРЫ
   Набор для планшета и компьютера перезаписывает только те значения,
   которые в нём указаны. Остальные берутся из предыдущего набора.
   ===================================================================== */

/* ---------- 0.1 ТЕЛЕФОНЫ (базовые значения) ---------- */
:root{
  /* Шрифты (семейства) */
  --font-site:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* весь сайт */
  --font-story:Georgia,"PT Serif","Times New Roman",serif;                              /* текст рассказов */

  /* Сайт: главная страница */
  --fs-body:1rem;          /* основной текст */
  --lh-body:1.6;           /* межстрочный интервал основного текста */
  --fs-h1:2.25rem;         /* главный заголовок H1 (Hero) */
  --lh-h1:1.2;
  --fs-h2:1.75rem;         /* заголовки разделов H2 */
  --lh-h2:1.25;
  --fs-h3:1.25rem;         /* заголовки карточек H3 */
  --lh-h3:1.4;
  --fs-lead:1.125rem;      /* вводные абзацы под заголовками, текст в Hero */
  --fs-small:.875rem;      /* мелкий текст: даты, подписи, подвал */
  --fs-nav:.875rem;        /* пункты меню */
  --fs-logo:1rem;          /* имя слева в шапке */
  --fs-card:.9375rem;      /* текст в карточках */
  --fs-button:1rem;        /* текст кнопок */

  /* Рассказ: заголовок-обложка */
  --fs-story-title:2rem;   /* H1 на странице рассказа */
  --fs-story-tag:.75rem;   /* метка «Мир Опеки · История 1» */

  /* Рассказ: основной текст */
  --story-size:1.125rem;   /* размер букв */
  --story-line:1.75;       /* межстрочный интервал */
  --story-width:38rem;     /* ширина колонки текста */
  --story-gap:1.25rem;     /* отступ между абзацами */
  --story-h2:1.5em;        /* заголовки глав (в долях от размера текста) */
  --story-h2-top:2em;      /* отступ над заголовком главы */
  --story-intro:1rem;      /* вступление перед рассказом */
  --story-note:.875rem;    /* строка «Все персонажи вымышлены» */
  --story-end:.9375rem;    /* благодарность в конце рассказа */
  --dropcap:3.4em;         /* размер буквицы (первой большой буквы) */

  /* Цвета */
  --c-bg:#faf6f1;          /* фон страницы */
  --c-text:#4a4540;        /* основной текст */
  --c-text-soft:#5c554e;   /* второстепенный текст */
  --c-muted:#6f665e;       /* мелкий текст, подписи */
  --c-title:#2f2a26;       /* заголовки */
  --c-story-text:#3a352f;  /* текст рассказа */
  --c-accent:#5f7262;      /* кнопки (шалфей) */
  --c-accent-dark:#4e5f51; /* кнопки при наведении */
  --c-rose:#9c5f55;        /* акцент: наведение на ссылки, буквица */
  --c-card:#f1e9e1;        /* фон карточек */
  --c-card-hover:#eadfd4;
  --c-line:#e6dcd2;        /* линии и рамки */
  --c-line-strong:#c9b8a8;
}

/* ---------- 0.2 ПЛАНШЕТЫ (от 640px) ---------- */
@media (min-width:640px){
  :root{
    --fs-body:1.0625rem;
    --fs-h1:2.75rem;
    --fs-h2:2rem;
    --fs-h3:1.375rem;
    --fs-lead:1.1875rem;
    --fs-nav:.9375rem;
    --fs-card:1rem;
    --fs-story-title:2.5rem;

    --story-size:1.1875rem;
    --story-line:1.8;
    --story-width:40rem;
    --story-intro:1.0625rem;
    --story-note:.9375rem;
  }
}

/* ---------- 0.3 КОМПЬЮТЕРЫ (от 1024px) ---------- */
@media (min-width:1024px){
  :root{
    --fs-body:1.125rem;
    --fs-h1:3.25rem;
    --lh-h1:1.1;
    --fs-h2:2.25rem;
    --fs-h3:1.5rem;
    --fs-lead:1.25rem;
    --fs-nav:1rem;
    --fs-logo:1.125rem;
    --fs-card:1.0625rem;
    --fs-story-title:3rem;

    --story-size:1.25rem;
    --story-line:1.85;
    --story-width:42rem;
    --story-intro:1.125rem;
    --story-note:1rem;
    --story-end:1rem;
  }
}

/* =====================================================================
   1. СБРОС БРАУЗЕРНЫХ СТИЛЕЙ (не менять)
   ===================================================================== */
*,::before,::after{box-sizing:border-box;border:0 solid var(--c-line)}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,p,ul,figure{margin:0}
ul{list-style:none;padding:0}
h1,h2,h3{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
img{display:block;max-width:100%}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =====================================================================
   2. ОСНОВА САЙТА: фон, шрифт, заголовки
   ===================================================================== */
body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-site);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:800;color:var(--c-title)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;color:var(--c-title)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;color:var(--c-title)}
h3 a:hover{color:var(--c-rose)}

/* Секции главной: центрирование и отступы */
section{margin:0 auto;max-width:64rem;padding:3.5rem 1rem}

/* Ссылка «К содержимому» для клавиатуры и скринридеров */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.sr-only:focus{position:absolute;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;padding:.75rem;background:var(--c-accent);color:#fff}

/* =====================================================================
   3. ШАПКА САЙТА И МЕНЮ
   Липкой (sticky) становится только шапка, лежащая прямо в <body>.
   ===================================================================== */
body>header{
  position:sticky;top:0;z-index:10;
  background:rgba(250,246,241,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom-width:1px;
}
/* Заголовок рассказа и другие <header> внутри страницы — обычные блоки */
main header,article header{position:static}

nav{margin:0 auto;max-width:64rem;display:flex;align-items:center;justify-content:space-between;padding:1rem}
nav>a{font-size:var(--fs-logo);font-weight:700;color:var(--c-title)}
nav ul{display:flex;gap:1.25rem;font-size:var(--fs-nav);line-height:1.25rem}
nav a:hover{color:var(--c-rose)}

/* =====================================================================
   4. ГЛАВНАЯ: HERO (первый экран)
   ===================================================================== */
main>section:first-child{display:grid;gap:2.5rem;align-items:center;padding-top:4rem;padding-bottom:4rem}
main>section:first-child p{margin-top:1.25rem;font-size:var(--fs-lead);line-height:1.6;color:var(--c-text-soft)}
main>section:first-child>div>div{margin-top:2rem;display:flex;gap:.75rem;flex-wrap:wrap}
main>section:first-child>div>div a{border-radius:.5rem;padding:.75rem 1.25rem;font-size:var(--fs-button);font-weight:600}
/* Кнопка 1: залитая */
main>section:first-child>div>div a:first-child{background:var(--c-accent);color:#fff}
main>section:first-child>div>div a:first-child:hover{background:var(--c-accent-dark)}
/* Кнопка 2: контурная */
main>section:first-child>div>div a:last-child{border:1px solid var(--c-line-strong);color:var(--c-text);background:#f3ebe3}
main>section:first-child>div>div a:last-child:hover{background:var(--c-card-hover)}

/* =====================================================================
   5. ГЛАВНАЯ: «ОБО МНЕ»
   ===================================================================== */
#about>p{margin-top:1rem;max-width:48rem;color:var(--c-text-soft)}
#about>div{margin-top:2rem;display:grid;gap:1rem}
#about article{border-radius:.75rem;border:1px solid var(--c-line);padding:1.25rem;background:var(--c-card)}
#about article p{margin-top:.5rem;font-size:var(--fs-card);line-height:1.5}
/* Цвет каждой из трёх карточек */
#about article:nth-child(1){background:#e9eee7} /* мятная */
#about article:nth-child(2){background:#f4e6e1} /* розовая */
#about article:nth-child(3){background:#eeeaf3} /* лавандовая */

/* =====================================================================
   6. ГЛАВНАЯ: КАРТОЧКИ РАССКАЗОВ
   ===================================================================== */
.lead{margin-top:1rem;max-width:48rem;font-size:var(--fs-lead);color:var(--c-text-soft)}
.story-list{margin-top:2rem;display:grid;gap:1.25rem}

.story-card{position:relative;overflow:hidden;border-radius:.75rem;border:1px solid var(--c-line);background:var(--c-card);transition:transform .2s,box-shadow .2s}
.story-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(74,69,64,.10)}

/* Цветная обложка карточки (для новых рассказов: cover-3, cover-4 …) */
.story-card .cover{height:9rem;display:flex;align-items:flex-end;padding:1rem 1.5rem;font-size:var(--fs-story-tag);letter-spacing:.08em;text-transform:uppercase;color:var(--c-text)}
.cover-1{background:linear-gradient(135deg,#d9e3d6,#eeeaf3)}
.cover-2{background:linear-gradient(135deg,#f4e6e1,#f3e4c9)}
.cover-3{background:linear-gradient(135deg,#e3e9f3,#e9eee7)}

.story-card .card-body{padding:1.25rem 1.5rem 1.5rem}
.story-card h3 a::after{content:"";position:absolute;inset:0} /* вся карточка кликабельна */
.story-card .card-body p{margin-top:.5rem;font-size:var(--fs-card);line-height:1.5}
.story-card .more{margin-top:1rem;font-weight:600;color:var(--c-accent)}

/* =====================================================================
   7. ГЛАВНАЯ: БЛОГ
   ===================================================================== */
.blog-list{margin-top:2rem;display:grid;gap:1.25rem}
#blog article{border-radius:.75rem;border:1px solid var(--c-line);padding:1.5rem;background:var(--c-card)}
#blog article p{margin-top:.75rem;font-size:var(--fs-card);line-height:1.5}
/* Дата статьи — первая строка в карточке */
#blog article p:first-of-type{margin-top:.5rem;font-size:var(--fs-small);line-height:1.25rem;color:var(--c-muted)}



/* =====================================================================
   9. ПОДВАЛ
   ===================================================================== */
footer{border-top-width:1px;padding:2rem 1rem;text-align:center;font-size:var(--fs-small);line-height:1.25rem;color:var(--c-muted)}

/* =====================================================================
   10. СТРАНИЦА РАССКАЗА: обёртка, хлебные крошки, обложка
   ===================================================================== */
.story-page{max-width:48rem;margin:0 auto;padding:2rem 1rem 4rem}

.crumbs{font-size:var(--fs-small);line-height:1.25rem;color:var(--c-muted)}
.crumbs a:hover{color:var(--c-rose);text-decoration:underline}

/* Цветная обложка с названием */
.story-head{margin-top:1.25rem;border-radius:1rem;padding:3rem 1.5rem;background:linear-gradient(135deg,#d9e3d6,#eeeaf3)}
.story-head.tess{background:linear-gradient(135deg,#f4e6e1,#f3e4c9)}
.story-head .tag{font-size:var(--fs-story-tag);letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-soft)}
.story-head h1{margin-top:.75rem;font-size:var(--fs-story-title)}
.story-head .meta{margin-top:1rem;font-size:var(--fs-small);color:var(--c-text-soft)}

/* Строка «Все персонажи вымышлены» */
.story-note{margin-top:2rem;padding-left:1rem;border-left:3px solid var(--c-line-strong);font-size:var(--story-note);line-height:1.5;font-style:italic;color:var(--c-muted)}

/* Вступление автора перед текстом */
.story-intro{margin:2rem auto 0;max-width:var(--story-width);font-size:var(--story-intro);line-height:1.7;color:var(--c-text-soft)}
.story-intro p+p{margin-top:1rem}

/* =====================================================================
   11. СТРАНИЦА РАССКАЗА: ТЕКСТ
   Размер, интервал и ширина задаются переменными из раздела 0.
   ===================================================================== */
.story{
  max-width:var(--story-width);
  margin:0 auto;
  font-family:var(--font-story);
  font-size:var(--story-size);
  line-height:var(--story-line);
  color:var(--c-story-text);
  overflow-wrap:break-word;
  hyphens:auto;
}
.story p+p{margin-top:var(--story-gap)}

/* Заголовки глав */
.story h2{font-size:var(--story-h2);line-height:1.3;margin:var(--story-h2-top) 0 .75em;color:var(--c-title)}
.story>h2:first-child{margin-top:2.5rem}
.story h3{font-size:1.2em;line-height:1.35;margin:1.5em 0 .5em}

/* Буквица: первая буква первого абзаца */
.story>p:first-of-type::first-letter{
  float:left;
  font-size:var(--dropcap);
  line-height:.85;
  font-weight:700;
  color:var(--c-rose);
  padding:.05em .12em 0 0;
}

/* Цитата и разделитель внутри рассказа */
.story blockquote{margin:2rem 0 0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--c-line-strong);font-style:italic;color:var(--c-text-soft)}
.story hr{margin:2.5rem auto;width:4rem;border-top:2px solid var(--c-line-strong)}

/* Иллюстрации внутри рассказа */
.story-img{margin:2rem 0}
.story-img img{width:100%;height:auto;border-radius:.75rem;background:var(--c-card-hover)}
.story-img figcaption{margin-top:.5rem;font-size:var(--fs-small);line-height:1.4;text-align:center;color:var(--c-muted)}

/* =====================================================================
   12. СТРАНИЦА РАССКАЗА: КОНЕЦ (благодарность, кнопка, навигация)
   ===================================================================== */
.story-end{margin:3rem auto 0;max-width:var(--story-width);text-align:center;font-size:var(--story-end);line-height:1.6;color:var(--c-muted)}
.story-end .copy{margin-top:1rem;font-size:var(--fs-small)}

.vk-btn{display:inline-block;margin-top:2.5rem;border-radius:.5rem;background:var(--c-accent);color:#fff;padding:.75rem 1.25rem;font-size:var(--fs-button);font-weight:600}
.vk-btn:hover{background:var(--c-accent-dark)}

/* Блок «Предыдущая / следующая история» */
.story-nav{margin-top:3rem;display:grid;gap:1rem;border-top:1px solid var(--c-line);padding-top:1.5rem}
.story-nav a{display:block;border-radius:.75rem;background:var(--c-card);padding:1rem 1.25rem}
.story-nav a:hover{background:var(--c-card-hover)}
.story-nav small{display:block;font-size:var(--fs-story-tag);color:var(--c-muted)}
.story-nav strong{color:var(--c-title)}

/* =====================================================================
   13. КНОПКА «НАВЕРХ»
   ===================================================================== */
.to-top{
  position:fixed;right:1rem;bottom:1rem;z-index:20;
  width:3rem;height:3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-accent);color:#fff;border:0;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,transform .3s,visibility .3s,background .2s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--c-accent-dark)}
.to-top:focus-visible{outline:3px solid var(--c-rose);outline-offset:2px}
.to-top svg{width:1.5rem;height:1.5rem}

/* =====================================================================
   14. АДАПТИВНАЯ СЕТКА (расположение блоков, не размеры текста)
   ===================================================================== */
/* Планшеты: от 640px */
@media (min-width:640px){
  #about>div{grid-template-columns:repeat(3,minmax(0,1fr))}
  .story-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-nav{grid-template-columns:1fr 1fr}
  .story-head{padding:4rem 2rem}
}
/* От 768px: Hero в две колонки, блог в две колонки */
@media (min-width:768px){
  main>section:first-child{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}



/* =====================================================================
   15. ФОТО В РАССКАЗАХ (красивые, с эффектами при наведении)
   Варианты: .story-img (обычное), .wide (шире текста),
             .narrow (узкое по центру), .story-duo (два рядом)
   ===================================================================== */
.story-img{
  position:relative;margin:2.5rem 0;overflow:hidden;
  border-radius:1rem;background:linear-gradient(135deg,#eadfd4,#eeeaf3);
  box-shadow:0 6px 20px rgba(74,69,64,.12);
  transition:box-shadow .4s,transform .4s;
  cursor:zoom-in;
}
.story-img img{
  width:100%;height:auto;border-radius:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s;
}
.story-img:hover{box-shadow:0 18px 40px rgba(74,69,64,.22)}
.story-img:hover img{transform:scale(1.06)}

/* Подпись: выезжает снизу при наведении */
.story-img figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:2.5rem 1.25rem 1rem;
  font-size:var(--fs-small);line-height:1.4;text-align:left;
  color:#fff;background:linear-gradient(to top,rgba(30,25,22,.78),rgba(30,25,22,0));
  transform:translateY(100%);opacity:0;
  transition:transform .4s ease,opacity .4s ease;
}
.story-img:hover figcaption,
.story-img:focus-visible figcaption{transform:none;opacity:1}
.story-img:focus-visible{outline:3px solid var(--c-rose);outline-offset:3px}

/* На телефонах и планшетах без мыши подпись видна всегда */
@media (hover:none){
  .story-img figcaption{transform:none;opacity:1}
}

/* Широкое: шире колонки текста */
.story-img.wide{
  width:min(46rem,calc(100vw - 2rem));
  position:relative;left:50%;transform:translateX(-50%);
  border-radius:1.25rem;
}

/* Узкое: по центру, лёгкий наклон при наведении */
.story-img.narrow{width:min(24rem,100%);margin-left:auto;margin-right:auto}
.story-img.narrow:hover{transform:translateY(-6px) rotate(-1deg)}

/* Два фото рядом */
.story-duo{
  display:grid;gap:1rem;margin:2.5rem 0;
  width:min(46rem,calc(100vw - 2rem));
  position:relative;left:50%;transform:translateX(-50%);
}
.story-duo .story-img{margin:0}
.story-duo .story-img:hover{transform:translateY(-6px)}
/* Соседнее фото затемняется, когда наводим на одно из них */
.story-duo:hover .story-img:not(:hover) img{filter:brightness(.72) saturate(.8)}
@media (min-width:640px){
  .story-duo{grid-template-columns:1fr 1fr}
}

/* Полноэкранный просмотр */
.lightbox{
  border:0;padding:0;background:transparent;
  max-width:96vw;max-height:94vh;overflow:visible;
}
.lightbox::backdrop{background:rgba(30,25,22,.88);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox img{
  max-width:96vw;max-height:88vh;width:auto;height:auto;margin:0 auto;
  border-radius:.75rem;box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:lb-in .35s ease;
}
.lightbox p{margin:.75rem 0 0;text-align:center;font-size:var(--fs-small);color:#f3ebe3}
.lightbox button{
  position:absolute;top:-2.5rem;right:0;width:2.25rem;height:2.25rem;
  border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--c-title);font-size:1.25rem;line-height:1;
}
@keyframes lb-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .story-img,.story-img img,.story-img figcaption{transition:none}
  .lightbox img{animation:none}
}



/* ===== 16. ОБЛОЖКА РАССКАЗА С ФОТО ===== */
.story-head.has-photo{
  position:relative;overflow:hidden;padding:0;
  min-height:16rem;display:flex;align-items:flex-end;
  background:#2f2a26;
  box-shadow:0 10px 30px rgba(74,69,64,.18);
}
.story-head-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;   /* object-position:center top — если нужно поднять кадр */
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.story-head.has-photo:hover .story-head-img{transform:scale(1.04)}
/* Затемнение снизу: текст всегда читается */
.story-head.has-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,16,14,.85) 0%,rgba(20,16,14,.55) 45%,rgba(20,16,14,.15) 100%);
}
.story-head-text{position:relative;z-index:1;padding:5rem 1.5rem 1.75rem;width:100%}
.story-head.has-photo .tag,
.story-head.has-photo .meta{color:rgba(255,255,255,.85)}
.story-head.has-photo h1{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
@media (min-width:640px){
  .story-head.has-photo{min-height:22rem}
  .story-head-text{padding:6rem 2rem 2rem}
}
@media (min-width:1024px){.story-head.has-photo{min-height:26rem}}







/* ===== 17. ОБЛОЖКА КАРТОЧКИ С ФОТО ===== */
.story-card .cover{position:relative;overflow:hidden}
.story-card .cover.has-photo{height:12rem;background:#2f2a26}
.story-card .cover img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.story-card:hover .cover img{transform:scale(1.07)}
.story-card .cover.has-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,16,14,.75),rgba(20,16,14,0) 65%);
}
.story-card .cover.has-photo span{position:relative;z-index:1;color:#fff}




/* ===== 18. ШАПКА НА ТЕЛЕФОНЕ ===== */
nav>a,nav ul a{white-space:nowrap}




/* ===== 19. ФОТО В HERO: компактное, с анимацией ===== */
.hero-photo{
  position:relative;
  width:min(17rem,70%);          /* РАЗМЕР ФОТО: меняйте 17rem (на ПК см. ниже) */
  margin:0 auto;
  animation:hero-in .9s cubic-bezier(.2,.7,.2,1) both,
            hero-float 6s ease-in-out 1s infinite;
}
/* Цветная подложка, сдвинутая за фото */
.hero-photo::before{
  content:"";position:absolute;inset:0;
  transform:translate(.9rem,.9rem) rotate(3deg);
  border-radius:1.5rem;
  background:linear-gradient(135deg,#d9e3d6,#f4e6e1);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  z-index:0;
}
.hero-photo img{
  position:relative;z-index:1;
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:1.5rem;
  box-shadow:0 14px 34px rgba(74,69,64,.22);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s;
}
.hero-photo:hover img{transform:scale(1.03) rotate(-1deg);box-shadow:0 22px 46px rgba(74,69,64,.3)}
.hero-photo:hover::before{transform:translate(1.3rem,1.3rem) rotate(6deg)}

@keyframes hero-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

@media (min-width:768px){
  .hero-photo{width:min(19rem,100%);justify-self:center}
}
@media (min-width:1024px){
  .hero-photo{width:min(21rem,100%)}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo{animation:none}
  .hero-photo img,.hero-photo::before{transition:none}
}



/* ===== 20. КОНТАКТЫ: карточки с иконками ===== */
.contact-grid{margin-top:2rem;display:grid;gap:1rem}
.contact-card{
  position:relative;display:flex;align-items:center;gap:1rem;
  padding:1rem 1.25rem;border-radius:1rem;
  background:var(--c-card);border:1px solid var(--c-line);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s,background .3s;
}
.contact-card:hover{
  transform:translateY(-4px);background:#fff;
  border-color:var(--c-line-strong);
  box-shadow:0 12px 26px rgba(74,69,64,.12);
}
.contact-card:focus-visible{outline:3px solid var(--c-rose);outline-offset:3px}

/* Круглая иконка */
.ci{
  flex:none;width:3rem;height:3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.ci svg{width:1.4rem;height:1.4rem}
.contact-card:hover .ci{transform:scale(1.1) rotate(-6deg)}
.ci-phone{background:#e9eee7;color:#4e5f51}
.ci-mail{background:#f4e6e1;color:#9c5f55}
.ci-vk{background:#e3e9f3;color:#4a6491}
.ci-group{background:#eeeaf3;color:#6d5a8c}

/* Текст */
.ct{min-width:0;display:flex;flex-direction:column}
.ct small{font-size:var(--fs-small);line-height:1.3;color:var(--c-muted)}
.ct strong{font-size:var(--fs-card);line-height:1.35;color:var(--c-title);font-weight:600;overflow-wrap:anywhere}

/* Стрелка «откроется в новой вкладке» */
.go{
  margin-left:auto;font-size:1.25rem;color:var(--c-muted);
  transition:transform .3s,color .3s;
}
.contact-card:hover .go{transform:translate(3px,-3px);color:var(--c-rose)}

@media (min-width:640px){
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .contact-card,.ci,.go{transition:none}
}




/* ===== 21. МОБИЛЬНОЕ МЕНЮ (бургер) ===== */
.nav-toggle{display:none}

@media (max-width:639px){
  nav{position:relative;padding:.75rem 1rem}

  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:2.75rem;height:2.75rem;border-radius:.75rem;cursor:pointer;
    background:var(--c-card);border:1px solid var(--c-line);
    transition:background .3s;
  }
  .nav-toggle:hover{background:var(--c-card-hover)}
  .nav-toggle span{
    display:block;width:1.25rem;height:2px;border-radius:2px;background:var(--c-title);
    transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .2s;
  }
  /* Полоски превращаются в крестик */
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Выпадающая панель */
  nav ul{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;padding:.25rem 1rem .75rem;
    background:var(--c-bg);border-bottom:1px solid var(--c-line);
    box-shadow:0 16px 28px rgba(74,69,64,.12);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1),visibility .3s;
  }
  nav ul.open{opacity:1;visibility:visible;transform:none}
  nav ul li:first-child{display:block}
  nav ul a{
    display:block;padding:1rem .25rem;font-size:1.0625rem;font-weight:500;
    border-bottom:1px solid var(--c-line);color:var(--c-title);
  }
  nav ul li:last-child a{border-bottom:0}
  nav ul a:hover{color:var(--c-rose);padding-left:.75rem;transition:padding .25s,color .25s}
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle span,nav ul{transition:none}
}



/* ===== 22. ГЛАВНАЯ НА ТЕЛЕФОНЕ: фото и отступы ===== */
@media (max-width:767px){
  .hero-photo{width:min(19rem,80%)}             /* размер фото: было 17rem/70% */
  main>section:first-child{gap:1.75rem;padding-top:1.5rem;padding-bottom:.9rem}
  #about{padding-top:3rem}                      /* отступ между фото и «Кто такой…» */
}