/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Базовые настройки */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  background-color: #fdf6e3;  /* тёплый бумажный фон */
  color: #2c2c2c;
  line-height: 1.6;
  padding: 0 16px;
}

/* Шапка */
.site-header {
  text-align: center;
  padding: 40px 16px 20px;
  background: linear-gradient(135deg, #ffde59, #ff9a8b);
  border-radius: 0 0 24px 24px;
  margin-bottom: 20px;
}

.site-header h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 #ffffff, 5px 5px 0 rgba(0,0,0,0.1);
  color: #1a1a1a;
}

.tagline {
  font-size: 1.2rem;
  margin-top: 8px;
  opacity: 0.85;
}

/* Навигация */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.site-nav a {
  text-decoration: none;
  background: #ffffff;
  color: #1a1a1a;
  padding: 10px 20px;
  border-radius: 999px;
  border: 3px solid #1a1a1a;
  font-weight: bold;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 3px 3px 0 #1a1a1a;
}

.site-nav a:hover {
  background: #ffde59;
  transform: translate(-1px, -1px);
}

/* Секции */
.section {
  max-width: 960px;
  margin: 0 auto 48px;
  background: #ffffff;
  padding: 28px 24px;
  border-radius: 20px;
  border: 3px solid #1a1a1a;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.12);
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 12px;
  border-bottom: 4px dashed #ff9a8b;
  display: inline-block;
  padding-bottom: 4px;
}

.section-note {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 20px;
}

/* Главная / обложка */
.hero {
  text-align: center;
}

.cover-img {
  max-width: 100%;
  border-radius: 16px;
  border: 3px solid #1a1a1a;
  margin-bottom: 20px;
}

.hero-text {
  font-size: 1.15rem;
  margin-bottom: 24px;
}

.btn {
  display: inline-block;
  background: #ffde59;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 12px 28px;
  border-radius: 999px;
  border: 3px solid #1a1a1a;
  box-shadow: 4px 4px 0 #1a1a1a;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1a1a1a;
}

/* Галерея комикса */
.comic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.comic-card {
  text-decoration: none;
  color: #1a1a1a;
  text-align: center;
  transition: transform 0.15s;
}

.comic-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid #1a1a1a;
  background: #eee;
}

.comic-card span {
  display: block;
  margin-top: 6px;
  font-weight: bold;
  font-size: 0.95rem;
}

.comic-card:hover {
  transform: translateY(-4px);
}

/* Сюжет */
.story-text p {
  margin-bottom: 14px;
  font-size: 1.1rem;
}

/* Об авторе */
.about-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #ff9a8b;
  flex-shrink: 0;
}

.about-box a {
  color: #c0392b;
}

/* Подвал */
.site-footer {
  text-align: center;
  padding: 24px 16px 40px;
  font-size: 0.95rem;
  color: #555;
}

.site-footer a {
  color: #1a1a1a;
  font-weight: bold;
}

/* Адаптивность для маленьких экранов */
@media (max-width: 600px) {
  .site-header h1 {
    font-size: 2.2rem;
  }
  .section {
    padding: 20px 16px;
  }
  .comic-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .about-box {
    justify-content: center;
    text-align: center;
  }
}