/* ============================================
   pages.css — Стили страниц: header, footer, hero,
   biography, works, media, links, legacy, contacts
   ============================================ */

/* --- Header (sticky) --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(253, 248, 240, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
  height: var(--header-height);
}

.header--scrolled {
  box-shadow: var(--shadow-md);
  background-color: rgba(253, 248, 240, 0.98);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.header__logo {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  z-index: 101;
}

.header__logo span {
  color: var(--color-accent-dark);
}

/* --- Бургер-меню --- */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 101;
  background: none;
  border: none;
  padding: 0;
}

.burger__line {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}

/* Анимация бургера в крестик */
.burger--active .burger__line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.burger--active .burger__line:nth-child(2) {
  opacity: 0;
}

.burger--active .burger__line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

/* --- Навигация --- */
.nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-xl);
  padding: calc(var(--header-height) + var(--spacing-lg)) var(--spacing-xl) var(--spacing-xl);
  transition: right var(--transition-base);
  z-index: 100;
  overflow-y: auto;
}

.nav--open {
  right: 0;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.nav__link {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--fs-body);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font-weight: 500;
}

.nav__link:hover,
.nav__link--active {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

/* Оверлей за навигацией на мобильных */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.nav-overlay--visible {
  display: block;
}

/* --- Hero-секция --- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: var(--header-height);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  /* Градиент рассвет/закат — отсылка к смоленским пейзажам */
  background: linear-gradient(
    180deg,
    #e6f7ff 0%,
    #d4ecff 20%,
    #fce4c8 50%,
    #f5c28a 70%,
    #fff0e6 85%,
    #e8d5b8 100%
  );
  background-size: 100% 200%;
  animation: heroSkyShift 20s ease-in-out infinite;
  z-index: 0;
}

@keyframes heroSkyShift {
  0% { background-position: 0% 0%; }
  50% { background-position: 0% 50%; }
  100% { background-position: 0% 0%; }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 24, 16, 0.3);
  z-index: 3;
}

.hero__content {
  position: relative;
  z-index: 4;
  padding: var(--spacing-xl);
  max-width: 700px;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-bg-dark);
  margin-bottom: var(--spacing-md);
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

.hero__subtitle {
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-xl);
  line-height: 1.6;
  font-style: italic;
  font-family: var(--font-heading);
}

.hero__actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.hero .btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.hero .btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.hero .btn--secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.hero .btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   Анимированная сцена hero — деревенский пейзаж
   Облака, колосья, светлячки, дымка, листья
   ============================================ */

/* --- Контейнер сцены --- */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* --- 1. Облака --- */
.hero-scene__cloud {
  position: absolute;
  border-radius: 50%;
  opacity: 1;
  will-change: transform;
}

.hero-scene__cloud--1 {
  top: 8%;
  left: -20%;
  width: 350px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 40%, rgba(224,240,255,0.25) 70%, transparent 100%);
  animation: cloudMove 70s linear infinite;
}

.hero-scene__cloud--2 {
  top: 18%;
  left: -30%;
  width: 450px;
  height: 140px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.55) 40%, rgba(224,240,255,0.2) 70%, transparent 100%);
  animation: cloudMove 90s linear infinite;
  animation-delay: -30s;
}

.hero-scene__cloud--3 {
  top: 5%;
  left: -15%;
  width: 280px;
  height: 90px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.5) 40%, rgba(230,247,255,0.2) 70%, transparent 100%);
  animation: cloudMove 60s linear infinite;
  animation-delay: -50s;
}

@keyframes cloudMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 400px)); }
}

/* --- 2. Дымка/туман --- */
.hero-scene__mist {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 40%;
  opacity: 0.12;
  will-change: transform;
}

.hero-scene__mist--1 {
  left: -50%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 30%, rgba(255,240,230,0.4) 60%, transparent 100%);
  animation: mistDrift 120s ease-in-out infinite;
}

.hero-scene__mist--2 {
  left: -80%;
  bottom: 10%;
  height: 30%;
  background: linear-gradient(90deg, transparent 0%, rgba(230,247,255,0.5) 40%, rgba(255,255,255,0.3) 70%, transparent 100%);
  animation: mistDrift 100s ease-in-out infinite reverse;
  animation-delay: -40s;
}

@keyframes mistDrift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(30%); }
  100% { transform: translateX(0); }
}

/* --- 3. Светлячки --- */
.hero-scene__firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  will-change: transform, opacity;
  filter: blur(1px);
}

.hero-scene__firefly--1 {
  top: 35%;
  left: 15%;
  background: radial-gradient(circle, #e8ff8c 0%, #bfff3f 50%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(191,255,63,0.5);
  animation: fireflyGlow 3s ease-in-out infinite, fireflyFloat1 12s ease-in-out infinite;
}

.hero-scene__firefly--2 {
  top: 55%;
  left: 70%;
  background: radial-gradient(circle, #fff9c4 0%, #ffe082 50%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(255,224,130,0.5);
  animation: fireflyGlow 2.5s ease-in-out infinite 0.8s, fireflyFloat2 15s ease-in-out infinite;
}

.hero-scene__firefly--3 {
  top: 45%;
  left: 40%;
  background: radial-gradient(circle, #c8e6c9 0%, #81c784 50%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(129,199,132,0.4);
  animation: fireflyGlow 4s ease-in-out infinite 1.5s, fireflyFloat3 18s ease-in-out infinite;
}

.hero-scene__firefly--4 {
  top: 25%;
  left: 60%;
  background: radial-gradient(circle, #fff9c4 0%, #ffe082 50%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(255,224,130,0.4);
  animation: fireflyGlow 3.5s ease-in-out infinite 2s, fireflyFloat1 14s ease-in-out infinite reverse;
}

.hero-scene__firefly--5 {
  top: 65%;
  left: 25%;
  background: radial-gradient(circle, #e8ff8c 0%, #bfff3f 50%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(191,255,63,0.4);
  animation: fireflyGlow 2.8s ease-in-out infinite 0.5s, fireflyFloat2 16s ease-in-out infinite reverse;
}

.hero-scene__firefly--6 {
  top: 40%;
  left: 80%;
  background: radial-gradient(circle, #c8e6c9 0%, #81c784 50%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(129,199,132,0.5);
  animation: fireflyGlow 3.2s ease-in-out infinite 1s, fireflyFloat3 13s ease-in-out infinite;
}

.hero-scene__firefly--7 {
  top: 50%;
  left: 50%;
  background: radial-gradient(circle, #fff9c4 0%, #ffe082 50%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(255,224,130,0.4);
  animation: fireflyGlow 3.8s ease-in-out infinite 2.5s, fireflyFloat1 17s ease-in-out infinite;
}

.hero-scene__firefly--8 {
  top: 32%;
  left: 88%;
  background: radial-gradient(circle, #e8ff8c 0%, #bfff3f 50%, transparent 100%);
  box-shadow: 0 0 7px 2px rgba(191,255,63,0.45);
  animation: fireflyGlow 2.9s ease-in-out infinite 0.3s, fireflyFloat2 14s ease-in-out infinite;
}

.hero-scene__firefly--9 {
  top: 58%;
  left: 10%;
  background: radial-gradient(circle, #c8e6c9 0%, #81c784 50%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(129,199,132,0.4);
  animation: fireflyGlow 3.3s ease-in-out infinite 1.8s, fireflyFloat3 16s ease-in-out infinite reverse;
}

.hero-scene__firefly--10 {
  top: 42%;
  left: 65%;
  background: radial-gradient(circle, #fff9c4 0%, #ffe082 50%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(255,224,130,0.5);
  animation: fireflyGlow 2.7s ease-in-out infinite 1.2s, fireflyFloat1 15s ease-in-out infinite reverse;
}

.hero-scene__firefly--11 {
  top: 68%;
  left: 55%;
  background: radial-gradient(circle, #e8ff8c 0%, #bfff3f 50%, transparent 100%);
  box-shadow: 0 0 7px 3px rgba(191,255,63,0.5);
  animation: fireflyGlow 3.6s ease-in-out infinite 0.7s, fireflyFloat2 13s ease-in-out infinite;
}

.hero-scene__firefly--12 {
  top: 28%;
  left: 35%;
  background: radial-gradient(circle, #c8e6c9 0%, #81c784 50%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(129,199,132,0.45);
  animation: fireflyGlow 3.1s ease-in-out infinite 2.2s, fireflyFloat3 14s ease-in-out infinite;
}

.hero-scene__firefly--13 {
  top: 52%;
  left: 20%;
  background: radial-gradient(circle, #fff9c4 0%, #ffe082 50%, transparent 100%);
  box-shadow: 0 0 7px 2px rgba(255,224,130,0.45);
  animation: fireflyGlow 2.6s ease-in-out infinite 1.5s, fireflyFloat1 16s ease-in-out infinite;
}

.hero-scene__firefly--14 {
  top: 38%;
  left: 92%;
  background: radial-gradient(circle, #e8ff8c 0%, #bfff3f 50%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(191,255,63,0.5);
  animation: fireflyGlow 3.4s ease-in-out infinite 0.9s, fireflyFloat2 17s ease-in-out infinite reverse;
}

@keyframes fireflyGlow {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

@keyframes fireflyFloat1 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(30px, -20px); }
  50%  { transform: translate(-10px, -35px); }
  75%  { transform: translate(20px, 10px); }
  100% { transform: translate(0, 0); }
}

@keyframes fireflyFloat2 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-25px, 15px); }
  50%  { transform: translate(15px, 30px); }
  75%  { transform: translate(-20px, -10px); }
  100% { transform: translate(0, 0); }
}

@keyframes fireflyFloat3 {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(20px, 25px); }
  66%  { transform: translate(-30px, -15px); }
  100% { transform: translate(0, 0); }
}

/* --- 4. Падающие листья (контейнер, элементы создаются JS) --- */
.hero-scene__leaves {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.hero-scene__leaf {
  position: absolute;
  top: -50px;
  width: 40px;
  height: 40px;
  opacity: 0.85;
  will-change: transform;
  animation: leafFall var(--leaf-duration, 12s) linear forwards;
}

/* Форма простого овального листа */
.hero-scene__leaf::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--leaf-color, #c87533);
  border-radius: 0 80% 0 80%;
  transform: rotate(45deg);
  /* Добавляем градиент для объёма */
  background: radial-gradient(ellipse at 30% 30%,
    var(--leaf-color, #c87533) 0%,
    color-mix(in srgb, var(--leaf-color, #c87533) 85%, black) 100%
  );
}

/* Центральная прожилка простого листа */
.hero-scene__leaf::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: 1.5px;
  height: 80%;
  background: linear-gradient(to bottom,
    rgba(101, 67, 33, 0.4) 0%,
    rgba(101, 67, 33, 0.6) 50%,
    rgba(101, 67, 33, 0.3) 100%
  );
  transform: translateX(-50%);
  border-radius: 1px;
}

/* ============================================
   Кленовый лист (5 лопастей)
   ============================================ */

.hero-scene__leaf--maple::before {
  /* Форма кленового листа через clip-path */
  border-radius: 0;
  transform: none;
  clip-path: polygon(
    50% 0%,
    60% 15%, 75% 10%, 70% 25%, 85% 30%,
    75% 40%, 90% 55%, 70% 55%, 65% 70%,
    55% 60%, 50% 85%, 45% 60%,
    35% 70%, 30% 55%, 10% 55%, 25% 40%,
    15% 30%, 30% 25%, 25% 10%, 40% 15%
  );
  background: radial-gradient(ellipse at 40% 30%,
    var(--leaf-color, #c87533) 0%,
    color-mix(in srgb, var(--leaf-color, #c87533) 90%, black) 60%,
    color-mix(in srgb, var(--leaf-color, #c87533) 80%, black) 100%
  );
}

/* Центральная прожилка кленового листа */
.hero-scene__leaf--maple::after {
  width: 2px;
  height: 85%;
  top: 0%;
  background: linear-gradient(to bottom,
    rgba(101, 67, 33, 0.5) 0%,
    rgba(101, 67, 33, 0.7) 30%,
    rgba(101, 67, 33, 0.8) 50%,
    rgba(101, 67, 33, 0.6) 70%,
    rgba(101, 67, 33, 0.3) 100%
  );
}

/* Боковые прожилки кленового листа (создаем через дополнительные элементы) */
.hero-scene__leaf--maple {
  position: relative;
}

/* Левая верхняя прожилка */
.hero-scene__leaf--maple .vein-1 {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 45%;
  height: 1.5px;
  background: linear-gradient(to left,
    rgba(101, 67, 33, 0.6) 0%,
    rgba(101, 67, 33, 0.4) 70%,
    transparent 100%
  );
  transform-origin: right center;
  transform: translateX(-50%) rotate(-45deg);
}

/* Правая верхняя прожилка */
.hero-scene__leaf--maple .vein-2 {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 45%;
  height: 1.5px;
  background: linear-gradient(to right,
    rgba(101, 67, 33, 0.6) 0%,
    rgba(101, 67, 33, 0.4) 70%,
    transparent 100%
  );
  transform-origin: left center;
  transform: translateX(-50%) rotate(45deg);
}

/* Левая нижняя прожилка */
.hero-scene__leaf--maple .vein-3 {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 40%;
  height: 1.5px;
  background: linear-gradient(to left,
    rgba(101, 67, 33, 0.6) 0%,
    rgba(101, 67, 33, 0.4) 70%,
    transparent 100%
  );
  transform-origin: right center;
  transform: translateX(-50%) rotate(-60deg);
}

/* Правая нижняя прожилка */
.hero-scene__leaf--maple .vein-4 {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 40%;
  height: 1.5px;
  background: linear-gradient(to right,
    rgba(101, 67, 33, 0.6) 0%,
    rgba(101, 67, 33, 0.4) 70%,
    transparent 100%
  );
  transform-origin: left center;
  transform: translateX(-50%) rotate(60deg);
}

@keyframes leafFall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }
  5% {
    opacity: 0.85;
  }
  25% {
    transform: translateY(25vh) rotate(90deg) translateX(30px);
  }
  50% {
    transform: translateY(50vh) rotate(180deg) translateX(-20px);
  }
  75% {
    transform: translateY(75vh) rotate(270deg) translateX(25px);
  }
  95% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) rotate(360deg) translateX(10px);
    opacity: 0;
  }
}

/* --- Доступность: отключение анимаций при prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero-scene__cloud,
  .hero-scene__mist,
  .hero-scene__firefly,
  .hero-scene__stalk,
  .hero-scene__leaf,
  .hero__bg {
    animation: none !important;
  }
  .hero-scene__firefly {
    opacity: 0.6;
  }
}

/* --- Teaser-секция (на главной) --- */
.teaser {
  position: relative;
  z-index: 2;
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-bg);
}

.teaser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.teaser__item {
  text-align: center;
  padding: var(--spacing-lg);
}

.teaser__icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}

.teaser__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.teaser__text {
  font-size: var(--fs-small);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* --- CTA-секция --- */
.cta {
  text-align: center;
  padding: var(--spacing-3xl) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
}

.cta__title {
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
}

.cta__text {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta .btn--accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.cta .btn--accent:hover {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

/* --- Footer --- */
.footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer__section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  color: var(--color-accent);
  margin-bottom: var(--spacing-md);
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer__nav-link {
  color: var(--color-text-on-dark);
  font-size: var(--fs-small);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.footer__nav-link:hover {
  opacity: 1;
  color: var(--color-accent);
}

.footer__social {
  display: flex;
  gap: var(--spacing-md);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-text-on-dark);
  font-size: 1.125rem;
  transition: all var(--transition-fast);
}

.footer__social-link:hover {
  background-color: var(--color-accent);
  color: var(--color-text);
}

.footer__bottom {
  text-align: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-small);
  opacity: 0.7;
}

/* --- Страница «Биография» --- */
.biography {
  padding: var(--spacing-3xl) 0;
  margin-top: var(--header-height);
}

.biography__intro {
  max-width: 800px;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.biography__intro p {
  font-size: 1.125rem;
  color: var(--color-text-light);
}

/* Аватар-заглушка */
.biography__avatar {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  margin: 0 auto var(--spacing-xl);
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  border: 4px solid var(--color-accent);
  text-align: center;
  overflow: hidden;
}

.biography__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Страница «Творчество» --- */
.works {
  padding: var(--spacing-3xl) 0;
  margin-top: var(--header-height);
}

.works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-3xl);
}

.works__quotes {
  max-width: 800px;
  margin: 0 auto;
}

/* --- Страница «Медиа» --- */
.media-page {
  padding: var(--spacing-3xl) 0;
  margin-top: var(--header-height);
}

.media-page__videos {
  margin-top: var(--spacing-3xl);
}

.media-page__video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.media-page__video-placeholder {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--fs-body);
  text-align: center;
  padding: var(--spacing-md);
}

.media-page__video-placeholder::before {
  content: '▶';
  font-size: 3rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

/* --- Страница «Ссылки» --- */
.links-page {
  padding: var(--spacing-3xl) 0;
  margin-top: var(--header-height);
}

.links-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* --- Страница «Наследие» --- */
.legacy {
  padding: var(--spacing-3xl) 0;
  margin-top: var(--header-height);
}

.legacy__intro {
  max-width: 800px;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.legacy__intro p {
  font-size: 1.125rem;
  color: var(--color-text-light);
}

.legacy__testimonials {
  max-width: 800px;
  margin: 0 auto var(--spacing-3xl);
}

.legacy__books-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* --- Страница «Контакты» --- */
.contacts {
  padding: var(--spacing-3xl) 0;
  margin-top: var(--header-height);
}

.contacts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

.map-placeholder {
  width: 100%;
  min-height: 300px;
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  text-align: center;
  border: 2px dashed var(--color-border);
}

/* --- Общий заголовок страницы (page-header) --- */
.page-header {
  text-align: center;
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
  color: var(--color-white);
  margin-top: var(--header-height);
}

.page-header__title {
  color: var(--color-white);
  margin-bottom: var(--spacing-sm);
}

.page-header__subtitle {
  font-size: 1.125rem;
  opacity: 0.85;
  font-style: italic;
  font-family: var(--font-heading);
  margin-bottom: 0;
}