/* ==========================================================================
   1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ НАСТРОЙКИ
   ========================================================================== */
:root {
  /* Шрифты */
  --font-impact: 'Impact', 'Arial Black', sans-serif;
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-story: 'Times New Roman', Times, serif;

  /* Фирменные цвета по макету */
  --color-primary: #181d68;     /* Темно-синий/индиго для акцентных заголовков и ссылок */
  --color-text: #1a1a1a;        /* Основной темный цвет текста */
  --color-subtle: #4f4f4f;      /* Серый оттенок для подписей */
  --color-border: #181d68;      /* Цвет разделительных линий */
  --color-bg: #ffffff;          /* Фон страницы */

  /* Сетка сайта */
  --max-width: 1200px;
}

/* Сброс базовых браузерных отступов */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Плавная прокрутка при клике на якорные ссылки и кнопку "Наверх" */
}

body {
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Ограничивающий контейнер по центру */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   2. ШАПКА САЙТА (HERO BANNER)
   ========================================================================== */
.hero-banner {
  position: relative;
  width: 100%;
  height: 380px;
  /* Фоновое изображение с затемнением, чтобы белый текст читался четко */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
              url('../images/20260508_171605.webp') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.hero-top-label {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-impact);
  font-size: 56px;
  font-weight: normal;
  text-align: center;
  letter-spacing: 1.5px;
}

/* ==========================================================================
   3. СЕТКА И СЕКЦИИ САЙТА (ДВУХКОЛОНОЧНЫЙ МАКЕТ)
   ========================================================================== */
.site-main {
  padding: 40px 0 60px 0;
}

/* Каждая секция делится на левый столбец (заголовок) и правый (контент) */
.section-row {
  display: flex;
  padding: 30px 0;
}

.col-left {
  width: 28%;
  flex-shrink: 0;
}

.col-right {
  width: 72%;
  padding-left: 20px;
}

/* Разделительная линия между блоками */
.divider-line {
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
  margin: 10px 0;
}

/* Заголовки слева (Impact, синие) */
.section-heading {
  font-family: var(--font-impact);
  color: var(--color-primary);
  font-size: 32px;
  line-height: 1.1;
  font-weight: normal;
  letter-spacing: 0.5px;
}

/* Серая надпись ОБ БЛОГЕ слева */
.label-light {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  text-transform: uppercase;
}

/* ==========================================================================
   4. ТИПОГРАФИКА И ССЫЛКИ
   ========================================================================== */
.about-section p {
  margin-bottom: 16px;
  line-height: 1.6;
}

.inline-link {
  color: inherit;
  text-decoration: underline;
}

.inline-link:hover {
  color: var(--color-primary);
}

/* Ссылки-заголовки разделов и рассказов */
.nav-title-link {
  font-family: var(--font-impact);
  color: var(--color-primary);
  font-size: 20px;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.5px;
  transition: opacity 0.2s ease;
}

.nav-title-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.nav-title-link.center-link {
  display: block;
  text-align: center;
}

/* Иконки соцсетей */
/* Улучшенные стили для блока со значками */
.social-links-wrap {
  display: flex;
  justify-content: flex-end; /* Выравнивание по правому краю */
  align-items: center;      /* Вертикальное выравнивание по центру */
  gap: 16px;                /* Отступ между значками */
  margin-top: 14px;         /* Отступ сверху */
}

/* Стили для самой ссылки-иконки (тега <a>) */
.social-icon-link {
  color: #000000;           /* Основной цвет значков - черный */
  display: inline-flex;     /* Это заставляет <a> подстраиваться под размер SVG */
  align-items: center;      /* Центрируем SVG внутри <a> вертикально */
  justify-content: center;   /* Центрируем SVG внутри <a> горизонтально */
  text-decoration: none;    /* Убираем подчеркивание */
  transition: transform 0.2s ease, color 0.2s ease; /* Плавные эффекты */
  line-height: 0;          /* Это ключевое правило, чтобы убрать лишний отступ снизу */
}

/* Стили при наведении курсора */
.social-icon-link:hover {
  transform: scale(1.08);   /* Легкое увеличение */
  color: var(--color-primary); /* Смена цвета на синий (из переменной) */
}

/* Стили для самих SVG-значков */
.svg-icon {
  display: block;           /* Убираем странные отступы */
  fill: currentColor;      /* Цвет берется из .social-icon-link */
  overflow: visible;        /* Это предотвращает обрезку */
}

/* ==========================================================================
   5. ЭЛЕМЕНТЫ РАЗДЕЛОВ
   ========================================================================== */
/* Дневник путешествий */
.travel-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}

.item-meta {
  font-size: 13px;
  color: #333333;
  text-align: right;
  min-width: 220px;
}

/* Библиотека историй */
.grid-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}

.card-item {
  text-align: center;
}

.card-desc {
  font-size: 13px;
  color: var(--color-subtle);
  margin-top: 12px;
  line-height: 1.4;
  padding: 0 10px;
}

.full-width-card {
  max-width: 540px;
  margin: 0 auto;
}

/* Творческий архив: Галерея */
.archive-links-header {
  margin-bottom: 20px;
}

.gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.preview-item {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.img-wrapper {
  width: 100%;
  height: 190px;
  overflow: hidden;
  background-color: #eee;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Картинка аккуратно заполняет блок без искажения пропорций */
  display: block;
}

.preview-caption {
  font-size: 10.5px;
  line-height: 1.35;
  color: #555555;
  margin-top: 8px;
}

/* ==========================================================================
   6. ПРАВИЛА И УСЛОВИЯ
   ========================================================================== */
.rules-section {
  padding: 40px 0 20px 0;
}

.rules-main-title {
  font-family: var(--font-impact);
  color: var(--color-primary);
  font-size: 26px;
  text-align: center;
  letter-spacing: 0.5px;
  margin-bottom: 30px;
  font-weight: normal;
}

.rules-intro {
  font-weight: 500;
  margin-bottom: 24px;
}

.rules-block {
  margin-bottom: 28px;
}

.rules-block h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.rule-subtitle {
  text-decoration: underline;
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 500;
}

.custom-list {
  list-style-type: square; /* Квадратные маркеры как в макете */
  padding-left: 20px;
  margin-bottom: 14px;
}

.custom-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.rules-bottom-note {
  margin-top: 20px;
  line-height: 1.5;
}

/* ==========================================================================
   7. ПОДВАЛ (FOOTER)
   ========================================================================== */
.site-footer {
  border-top: 1px solid #e0e0e0;
  padding: 30px 0 40px 0;
  font-size: 12px;
  color: #555555;
  line-height: 1.6;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.footer-info p {
  margin-bottom: 4px;
}

.footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex-shrink: 0;
}

.footer-socials {
  display: flex;
  gap: 16px;
}

.scroll-top-btn {
  font-size: 12px;
  color: #222;
  text-decoration: none;
  cursor: pointer;
}

.scroll-top-btn:hover {
  text-decoration: underline;
  color: var(--color-primary);
}
/* ==========================================================================
   8. СТИЛИ ДЛЯ ТЕКСТОВЫХ СТРАНИЦ-СПИСКОВ (Ориджиналы, Фанфикшен)
   ========================================================================== */

/* Общий отступ сверху для текстовых секций */
.text-section-site {
  padding-top: 50px;
}

/* Красное предупреждение 18+ (как на макете) */
.age-warning {
  color: #a04040; /* Приглушенный красный цвет */
  font-size: 11.5px;
  line-height: 1.5;
  text-align: justify; /* Выравнивание по ширине */
  margin-bottom: 50px; /* Большой отступ снизу */
}

/* Красная ссылка внутри предупреждения */
.age-warning .inline-link {
  color: inherit;
  text-decoration: underline;
}

/* Контейнер для одной работы в списке */
.work-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px; /* Отступ между работами */
}

/* Левая колонка - название */
.work-title-col {
  width: 32%;
  flex-shrink: 0;
}

/* Правая колонка - метаданные */
.work-meta-col {
  width: 65%;
  font-weight: 300; /* Inter Тонкий */
  font-size: 13.5px;
  line-height: 1.6;
}

/* Жирные метки метаданных (Статус, Рейтинг и т.д.) */
.meta-label {
  font-weight: 500; /* Inter Средний */
}

/* Ссылка-заголовок работы (Impact, Синий, как на макете) */
.work-nav-link {
  font-family: var(--font-impact);
  color: var(--color-primary);
  font-size: 24px;
  text-decoration: none;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.work-nav-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Класс для красных выделений в тексте (напр., Предупреждения) */
.text-danger {
  color: #a04040;
  font-weight: 500;
}

/* Ссылка "Вернуться на главную" */
.return-home-link-wrap {
  text-align: center;
  margin: 60px 0 30px 0;
}

.return-home-link {
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
}

.return-home-link:hover {
  text-decoration: underline;
}
/* ==========================================================================
   9. СТИЛИ ДЛЯ ГАЛЕРЕИ ПЕРСОНАЖЕЙ
   ========================================================================== */

.gallery-warning {
  color: #a04040;
  font-size: 11px;
  text-align: center;
  margin-bottom: 35px;
}

.gallery-section-title {
  font-family: var(--font-impact);
  color: var(--color-primary);
  font-size: 22px;
  text-align: center;
  display: block;
  text-decoration: none;
  margin-bottom: 25px;
  letter-spacing: 0.5px;
}

.gallery-section-title:hover {
  text-decoration: underline;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.character-card {
  display: flex;
  flex-direction: column;
}

.character-image-box {
  width: 100%;
  aspect-ratio: 210 / 297;
  background-color: #efefef;
  border: 1px dashed #d0d0d0;
  overflow: hidden;
  margin-bottom: 10px;
}

.character-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Раскрывающийся аккордеон */
.character-details {
  width: 100%;
}

.character-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1.5px solid #222222;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.character-summary::-webkit-details-marker {
  display: none;
}

.char-spacer {
  width: 12px;
}

.character-name {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  text-align: center;
  flex-grow: 1;
}

/* Стрелочка */
.dropdown-arrow {
  width: 12px;
  height: 12px;
  border-right: 1.5px solid #222;
  border-bottom: 1.5px solid #222;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-bottom: 3px;
}

.character-details[open] .dropdown-arrow {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}

.character-description {
  font-family: var(--font-inter);
  font-size: 11.5px;
  font-weight: 300;
  color: #333333;
  padding-top: 6px;
  line-height: 1.4;
  margin: 0;
}
/* ==========================================================================
   10. СТИЛИ КАРТОЧКИ ПРОИЗВЕДЕНИЯ (ХАБ ИСТОРИИ)
   ========================================================================== */

/* Блок обложки и описания */
.story-header-grid {
  display: flex;
  gap: 32px;
  margin-bottom: 40px;
}

.story-cover-col {
  width: 28%;
  flex-shrink: 0;
}

/* Пропорции стандартного листа А4 (1 : √2 ≈ 1 / 1.414) */
.story-cover-box {
  width: 60%;
  aspect-ratio: 1 / 1.414;
  background-color: #efefef;
  border: 1px dashed #d0d0d0;
  overflow: hidden;
}

.story-cover-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-info-col {
  width: 72%;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
}

.story-info-col p {
  margin-bottom: 10px;
}

/* Ссылки без подчеркиваний */
.clean-link {
  color: var(--color-primary);
  text-decoration: none;
}

.clean-link:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* Список глав */
.chapter-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}

.chapter-link {
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.chapter-link:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* Двухколоночный блок кнопок возврата */
.double-return-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 40px 0 20px 0;
}

.return-col {
  text-align: center;
}

.return-btn-clean {
  font-size: 11px;
  color: var(--color-primary);
  text-decoration: none;
}

.return-btn-clean:hover {
  text-decoration: none;
  opacity: 0.8;
}
/* ==========================================================================
   10.1 РАСШИРЕННАЯ ВЕРСТКА КАРТОЧКИ ПРОИЗВЕДЕНИЯ (ХАБ ИСТОРИИ)
   ========================================================================== */

/* Разделительная линия во всю ширину */
.story-divider {
  border: none;
  border-top: 1.5px solid var(--color-primary, #181d68);
  margin: 40px 0;
  width: 100%;
}

/* Оформление блока для чтения с боковыми полями */
.story-content {
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.6;
  color: #111111;
  text-align: justify;
  
  /* Боковые поля: сверху/снизу 0, слева/справа по 60px */
  padding: 0 60px;
  box-sizing: border-box;
}

.story-content p {
  margin-bottom: 1.2em;
  text-indent: 2em; /* Красная строка */
}

/* Красный цвет для всей строки */
.text-danger {
  color: #a04040;
}

/* Жирный шрифт для названия метки */
.meta-label {
  font-weight: 700; /* или 500 в зависимости от используемой гарнитуры Inter */
}
/* ==========================================================================
   11. СТИЛИ ДЛЯ СТРАНИЦ ГЛАВ (ЧТЕНИЕ)
   ========================================================================== */

/* Заголовок главы */
.chapter-title {
  font-family: var(--font-impact);
  color: var(--color-primary);
  font-size: 32px;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 40px;
  letter-spacing: 0.5px;
}

/* Контейнер текста для чтения */
.chapter-text-container {
  font-family: 'Times New Roman', Times, serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #111111;
  text-align: justify;
  padding: 0 40px;
  box-sizing: border-box;
}

.chapter-text-container p {
  margin-bottom: 1.1em;
  text-indent: 2em; /* Красная строка */
}

/* Навигационная панель под текстом */
.chapter-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px 0 30px 0;
  padding: 0 10px;
}

.chapter-nav-item {
  width: 32%;
  font-size: 11px;
}

.chapter-nav-item.left {
  text-align: left;
}

.chapter-nav-item.center {
  text-align: center;
}

.chapter-nav-item.right {
  text-align: right;
}

.chapter-nav-link {
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-inter);
  font-weight: 500;
}

.chapter-nav-link:hover {
  text-decoration: underline;
}

.epigraph-wrap {
  text-align: right;        /* Выравнивание по правому краю */
  margin: 20px 40px 30px 0; /* Отступ справа и снизу */
}

.epigraph-text {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;       /* Наклонный шрифт */
  display: inline-block;
}

/* ==========================================
   АРХИВ ФОТОГРАФИЙ
   ========================================== */

/* Сам элемент года */
.year-toggle {
    cursor: pointer;
}


/*
   ВАЖНО:
   work-item содержит:
   1. work-title-col
   2. work-meta-col
   3. year-gallery

   Поэтому явно задаём ему 2 колонки.
*/
.work-item {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}


/* Левая колонка — год */
.work-title-col {
    grid-column: 1 !important;
    grid-row: 1 !important;
}


/* Правая колонка — точки */
.work-meta-col {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


/* ==========================================
   ГАЛЕРЕЯ
   ========================================== */

.year-gallery {
    /* ОБЯЗАТЕЛЬНО занимает всю ширину */
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 25px;

    width: 100%;

    box-sizing: border-box;

    /* Закрыто */
    max-height: 0;
    overflow: hidden;

    opacity: 0;

    margin: 0;
    padding: 0;

    transition:
        max-height 0.5s ease,
        opacity 0.3s ease,
        margin-top 0.5s ease;
}


/* ==========================================
   ОТКРЫТАЯ ГАЛЕРЕЯ
   ========================================== */

.year-gallery.open {
    max-height: 5000px;

    opacity: 1;

    margin-top: 20px;
}


/* ==========================================
   КАРТОЧКА
   ========================================== */

.photo-card {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ==========================================
   ФОТО
   ========================================== */

.photo-card img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;
}


/* ==========================================
   ПОДПИСЬ
   ========================================== */

.photo-card figcaption {
    display: block;

    width: 100%;

    margin: 10px 0 0;
    padding: 0;

    text-align: center;

    font-size: 16px;
    line-height: 1.4;
}


/* ==========================================
   ТЕЛЕФОН
   ========================================== */

@media (max-width: 700px) {

    .work-item {
        grid-template-columns: 1fr !important;
    }

    .work-title-col {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .work-meta-col {
        display: none;
    }

    .year-gallery {
        grid-column: 1 !important;
        grid-row: 2 !important;

        grid-template-columns: 1fr;
    }

}

.work-item.travel-item {
  flex-direction: column;
  display: flex;
}

.work-item.travel-item .work-title-col {
  width: 100%;
  margin-bottom: 10px;
}

.work-item.travel-item .year-gallery {
  width: 100%;
}