/* ===================================================================
   БИБЛИОТЕКА ФОРКСА — library.html
   Отдельная страница. Читает дизайн-систему из styles.css (токены,
   .button, .eyebrow, .icon-button) и ничего в ней не меняет.
   Все селекторы здесь начинаются с .lib / .library, чтобы правила
   не могли протечь на главную страницу.
   =================================================================== */

.library-body {
  min-height: 100dvh;
  color: var(--text);
}

/* --- шапка страницы: компактная, без большого меню главной --- */
.lib-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem clamp(1rem, 4vw, 3rem);
  min-height: 62px;
  background: linear-gradient(90deg, rgba(228,235,231,.78), rgba(214,226,222,.72));
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border-bottom: 1px solid var(--line);
}
html[data-theme="night"] .lib-header {
  background: linear-gradient(90deg, rgba(14,10,12,.86), rgba(18,14,16,.80));
  border-bottom-color: rgba(198,72,90,.26);
}
.lib-brand { color: inherit; margin-right: auto; }
.lib-brand span { font-size: 1.15rem; }
.lib-brand small { font-size: .56rem; opacity: .72; }

.lib-nav { display: flex; align-items: center; gap: .6rem; }
.lib-nav-link {
  text-decoration: none; color: inherit; font-size: .9rem;
  padding: .5rem .2rem; border-bottom: 1px solid transparent;
}
.lib-nav-link:hover { border-bottom-color: var(--accent); }
.lib-theme-button, .lib-sound-button { font-size: .86rem; white-space: nowrap; }
.lib-theme-button[aria-pressed="true"] {
  background: rgba(109,21,36,.16); border-color: rgba(198,72,90,.44);
}
.lib-menu-toggle { display: none; }

/* --- атмосфера: собрана слоями, без нового изображения --- */
.lib-atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* мокрый ельник за стеклом — силуэты, а не фотография */
.lib-atm-forest {
  position: absolute; inset: -5% -2% 0;
  background:
    radial-gradient(ellipse 60% 40% at 18% 8%, rgba(214,228,222,.55), transparent 70%),
    radial-gradient(ellipse 50% 45% at 84% 2%, rgba(198,214,210,.42), transparent 72%),
    repeating-linear-gradient(96deg,
      rgba(52,74,68,.10) 0 3px, transparent 3px 34px),
    repeating-linear-gradient(84deg,
      rgba(38,58,54,.08) 0 2px, transparent 2px 51px),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 62%, #9fb0ac 100%);
}
/* стекло: вертикальные переплёты панорамного окна */
.lib-atm-glass {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(28,44,44,.16) 0 2px, transparent 2px),
    linear-gradient(90deg, transparent calc(33.33% - 2px), rgba(28,44,44,.14) calc(33.33% - 2px), rgba(28,44,44,.14) 33.33%, transparent 33.33%),
    linear-gradient(90deg, transparent calc(66.66% - 2px), rgba(28,44,44,.14) calc(66.66% - 2px), rgba(28,44,44,.14) 66.66%, transparent 66.66%),
    linear-gradient(90deg, transparent calc(100% - 2px), rgba(28,44,44,.16) calc(100% - 2px));
  opacity: .7;
}
/* дождь по стеклу */
.lib-atm-rain {
  position: absolute; inset: -20% -10%;
  background-image: repeating-linear-gradient(99deg,
    rgba(255,255,255,0) 0 8px,
    rgba(255,255,255,.055) 8px 9px,
    rgba(255,255,255,0) 9px 19px);
  animation: lib-rain 11s linear infinite alternate;
}
@keyframes lib-rain {
  from { transform: translate3d(0, -2.5%, 0); }
  to   { transform: translate3d(0, 2.5%, 0); }
}
.lib-atm-grain {
  position: absolute; inset: 0; opacity: .10; mix-blend-mode: overlay;
  background-image: url('/assets/light/light-grain.svg');
  background-size: 170px 170px;
}
/* After Dark: закрытая библиотека, вино и графит, слабый янтарь */
html[data-theme="night"] .lib-atm-forest {
  background:
    radial-gradient(ellipse 50% 34% at 78% 10%, rgba(214,150,86,.16), transparent 68%),
    radial-gradient(ellipse 60% 40% at 12% 4%, rgba(109,21,36,.20), transparent 72%),
    repeating-linear-gradient(96deg, rgba(0,0,0,.30) 0 3px, transparent 3px 34px),
    linear-gradient(180deg, #0b0a0d 0%, #121014 58%, #0a0809 100%);
}
html[data-theme="night"] .lib-atm-glass { opacity: .5; }
html[data-theme="night"] .lib-atm-rain { opacity: .5; }
html[data-theme="night"] .lib-atm-grain { opacity: .16; }

/* --- гостевой гейт --- */
.lib-gate {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
}
.lib-gate-card {
  width: min(480px, 100%); padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lib-gate-card h1 { font-size: clamp(28px, 3.4vw, 42px); margin: .2rem 0 .8rem; }
.lib-gate-card p { color: var(--muted); }

/* --- первый экран --- */
.lib-hero {
  position: relative;
  padding: clamp(72px, 9vw, 132px) clamp(1rem, 5vw, 5rem) clamp(56px, 6vw, 84px);
}
.lib-hero-inner { max-width: 44rem; }
.lib-hero-kicker { color: var(--muted); margin: 0 0 .8rem; }
.lib-hero-title {
  margin: 0 0 1rem;
  font-size: clamp(40px, 5.4vw, 84px); line-height: 1.02; text-wrap: balance;
}
.lib-hero-lead {
  margin: 0 0 1.8rem; max-width: 34ch;
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--muted);
}
.lib-hero-actions { margin: 0; }
.lib-hero-count {
  position: absolute; right: clamp(1rem, 5vw, 5rem); bottom: clamp(56px, 6vw, 84px);
  margin: 0; font-family: Georgia, "Times New Roman", serif;
  font-size: .78rem; letter-spacing: .22em; color: var(--muted);
}

/* --- коллекция --- */
.lib-collection {
  display: grid; gap: clamp(72px, 8vw, 128px);
  padding: 0 clamp(1rem, 5vw, 5rem) clamp(80px, 9vw, 130px);
}

/* editorial-разворот: обложка и текст, чередование сторон */
.lib-spread {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.lib-spread--copy-left { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.lib-spread--copy-left .lib-cover { order: 2; }
.lib-spread--copy-left .lib-spread-copy { order: 1; }

.lib-spread-copy { max-width: 46ch; }
.lib-spread-num {
  margin: 0 0 .5rem; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--muted); opacity: .55;
}
.lib-spread-mood {
  margin: 0 0 1rem; font-size: .78rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent);
}
html[data-theme="night"] .lib-spread-mood { color: #c6485a; }
.lib-spread-title {
  margin: 0 0 .8rem; font-size: clamp(30px, 3.2vw, 50px); line-height: 1.06;
}
.lib-spread-line {
  margin: 0 0 1.7rem; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; color: var(--muted);
}
.lib-open-button { font-size: 16px; }

/* ===================================================================
   COVER SHELL — единая оболочка для всех пяти обложек
   Исходные PNG не редактировались: рамка, маска, вуаль, автор и
   название добавлены поверх средствами HTML/CSS. Индивидуален у книги
   только градиент вуали (--veil-*), всё остальное общее.
   =================================================================== */
.lib-cover {
  position: relative; margin: 0;
  width: 100%; max-width: 420px; aspect-ratio: 2 / 3;
  justify-self: center;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  /* тонкая серебристая рамка — одна на всю серию */
  border: 1px solid rgba(226,234,232,.34);
  box-shadow:
    0 0 0 1px rgba(20,34,34,.30),
    0 26px 60px rgba(18,32,32,.28);
}
html[data-theme="night"] .lib-cover {
  border-color: rgba(214,190,180,.24);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 26px 60px rgba(0,0,0,.55);
}
.lib-cover-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.lib-cover:hover .lib-cover-img { transform: scale(1.012); }

/* индивидуальный градиент поверх изображения */
.lib-cover-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--veil-top, rgba(12,20,26,.78)) 0%,
      var(--veil-mid, rgba(12,20,26,.10)) 34%,
      var(--veil-mid, rgba(12,20,26,.10)) 58%,
      var(--veil-bottom, rgba(8,16,20,.86)) 100%),
    linear-gradient(0deg, var(--veil-tint, transparent), var(--veil-tint, transparent));
}
/* мягкая внутренняя маска по краям — общая для всех пяти */
.lib-cover-edge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(232,240,238,.16),
    inset 0 0 34px 12px rgba(8,16,20,.55),
    inset 0 0 90px 24px rgba(8,16,20,.30);
}
html[data-theme="night"] .lib-cover-edge {
  box-shadow:
    inset 0 0 0 1px rgba(214,190,180,.12),
    inset 0 0 34px 12px rgba(0,0,0,.62),
    inset 0 0 90px 24px rgba(0,0,0,.42);
}

/* автор сверху, название снизу — единая типографика на всю серию */
.lib-cover-plate {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1rem, 2.6vw, 1.9rem) clamp(.9rem, 2.4vw, 1.7rem);
  text-align: center; color: #f2f6f4;
}
.lib-cover-author {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, .95vw, 13px);
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(238,244,241,.86);
  text-shadow: 0 1px 8px rgba(4,10,12,.85);
}
.lib-cover-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.15vw, 31px);
  line-height: 1.08; letter-spacing: .1em;
  text-shadow: 0 2px 14px rgba(4,10,12,.9);
  overflow-wrap: anywhere;
}
/* тонкая линейка между автором и названием — одна на всю серию */
.lib-cover-title::before {
  content: ""; display: block; width: 34px; height: 1px; margin: 0 auto .7rem;
  background: rgba(238,244,241,.5);
}

/* --- служебная строка состояния --- */
.lib-status {
  margin: 0 clamp(1rem, 5vw, 5rem) clamp(48px, 6vw, 80px);
  min-height: 1.4em; font-size: .92rem; color: var(--muted);
}
.lib-status:empty { margin-bottom: 0; }

/* --- подвал --- */
.lib-footer {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
}
.lib-footer p { margin: .3rem 0 0; color: var(--muted); font-size: .88rem; }
html[data-theme="night"] .lib-footer { border-top-color: rgba(198,72,90,.24); }

/* ===================================================================
   MOBILE — один столбец: номер и настроение, обложка, название,
   фраза, кнопка. Без горизонтального слайдера.
   =================================================================== */
@media (max-width: 900px) {
  .lib-header { padding-inline: 1rem; }
  .lib-menu-toggle { display: inline-flex; min-height: 38px; padding: .35rem .8rem; font-size: .8rem; }
  .lib-nav {
    position: absolute; top: 100%; left: .75rem; right: .75rem;
    display: none; flex-direction: column; align-items: stretch; gap: .5rem;
    padding: .9rem; border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface-strong);
    box-shadow: var(--shadow);
  }
  html[data-theme="night"] .lib-nav { background: #121014; border-color: rgba(198,72,90,.3); }
  .lib-nav.is-open { display: flex; }
  .lib-nav-link { padding: .55rem .2rem; }

  .lib-spread,
  .lib-spread--copy-left {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 5vw, 2rem);
    justify-items: start;
  }
  /* порядок на телефоне задаётся явно, а не стороной разворота */
  .lib-spread .lib-cover,
  .lib-spread--copy-left .lib-cover { order: 2; justify-self: center; }
  .lib-spread .lib-spread-copy,
  .lib-spread--copy-left .lib-spread-copy { order: 1; display: contents; }

  .lib-spread-num  { order: 1; margin-bottom: .2rem; }
  .lib-spread-mood { order: 1; margin-bottom: .2rem; }
  .lib-spread-title { order: 3; margin-top: .3rem; }
  .lib-spread-line  { order: 4; }
  .lib-open-button  { order: 5; justify-self: start; }

  /* обложка не должна занимать четыре экрана */
  .lib-cover { width: clamp(280px, 74vw, 360px); max-width: 360px; }

  .lib-hero-count { position: static; margin-top: 1.5rem; }
  .lib-hero { padding-bottom: clamp(40px, 8vw, 56px); }
  .lib-collection { gap: clamp(56px, 11vw, 80px); }
}

@media (max-width: 360px) {
  .lib-cover { width: min(280px, calc(100vw - 2rem)); }
  .lib-cover-title { font-size: 19px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .lib-atm-rain { animation: none; }
  .lib-cover-img { transition: none; }
  .lib-cover:hover .lib-cover-img { transform: none; }
}