/* ============================================================
   ТІНЬ І СВІТЛО — стилі
   ------------------------------------------------------------
   ТЕМА — світла (за замовчуванням). Змінні названі за РОЛЛЮ,
   не за кольором, тож перемикання теми = підміна значень у
   [data-theme="dark"] нижче. Кнопку теми додамо наприкінці.
   ============================================================ */
:root{
  /* Сторінка */
  --page-bg:      #EDF1F6;   /* світле синьо-сіре тло */
  --page-ink:     #2A3746;   /* основний текст */
  --page-dim:     #5A6B7D;   /* приглушені підписи */
  --hairline:     #C4D0DE;   /* тонкі рамки/лінії */

  /* Бік ТИПУ (тінь) */
  --type-bg:      #D4DEEA;
  --type-ink:     #2A3746;
  --type-dim:     #5A6B7D;

  /* Бік АНТИТИПУ (світло) */
  --antitype-bg:  #FFFFFF;
  --antitype-ink: #2A3746;
  --antitype-dim: #5A6B7D;

  /* Акцент — синій */
  --seam:         #1E2C8A;
  --title-ink:    #1E2C8A;

  /* Панель коментаря */
  --panel-bg:     #F2F5F9;
  --panel-ink:    #2A3746;

  /* Декоративна акцентна «і» */
  --accent-i:     #b08d57;   /* золото */

  /* Системний шрифт — без онлайн-завантаження */
  --font-sys: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   ТЕМА — темна (на майбутнє, під кнопку перемикання).
   Розкоментувати й додати кнопку, що ставить
   <html data-theme="dark">. Значення — синя гама, приглушена.
   ------------------------------------------------------------
[data-theme="dark"]{
  --page-bg:      #161A24;
  --page-ink:     #C7D2DF;
  --page-dim:     #8291A2;
  --hairline:     #2C3444;
  --type-bg:      #1F2937;
  --type-ink:     #C7D2DF;
  --type-dim:     #8291A2;
  --antitype-bg:  #263243;
  --antitype-ink: #EAF0F7;
  --antitype-dim: #9AA9BA;
  --seam:         #4C63D2;
  --title-ink:    #AEC0FF;
  --panel-bg:     #1B2130;
  --panel-ink:    #C7D2DF;
  --accent-i:     #d0aa6b;
}
   ============================================================ */

/* ---------- Локальний декоративний шрифт (на майбутнє) ----------
   Зараз «і» використовує Playfair Display з Google Fonts
   (підключено в <head> index.php). Щоб прибрати онлайн-залежність:
     1) завантажити Playfair Display Italic;
     2) вирізати лише потрібні гліфи, напр.:
        pyftsubset PlayfairDisplay-Italic.ttf --text="іІ&" \
          --flavor=woff2 --output-file=playfair-i.woff2
     3) покласти у assets/fonts/ і розкоментувати:
   ----------------------------------------------------------------
@font-face{
  font-family:'AccentSerif';
  src:url('fonts/playfair-i.woff2') format('woff2');
  font-style:italic; font-weight:400; font-display:swap;
}
   ...і замінити у .amp: font-family:'AccentSerif', serif;
   Тоді рядок <link ...Playfair...> у index.php можна видалити.
   --------------------------------------------------------------- */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--page-bg);
  color:var(--page-ink);
  font-family:var(--font-sys);
  font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Head ---------- */
.site-head{text-align:center;padding:3rem 1.5rem 2.5rem;max-width:52rem;margin:0 auto;position:relative}
.lang-switch{position:absolute;top:1.4rem;right:1.5rem;display:flex;gap:.4rem}
.lang-switch a{
  color:var(--page-dim);text-decoration:none;font-size:.75rem;letter-spacing:.1em;
  padding:.3rem .6rem;border:1px solid var(--hairline);border-radius:3px;transition:.2s;
}
.lang-switch a:hover{color:var(--page-ink);border-color:var(--seam)}
.lang-switch a.active{color:#fff;background:var(--seam);border-color:var(--seam)}
.eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:.72rem;color:var(--seam);margin-bottom:1.1rem}
h1{font-weight:600;font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;color:var(--title-ink);margin-bottom:1.4rem;letter-spacing:-.01em}
/* акцентна «і» між словами заголовка */
.amp{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent-i);font-size:.82em;padding:0 .1em}
.legend{display:flex;justify-content:center;gap:2.5rem;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--page-dim)}
.legend span{display:flex;align-items:center;gap:.5rem}
.dot{width:.7rem;height:.7rem;border-radius:50%}
.dot.shadow{background:var(--type-dim)}
.dot.light{background:var(--seam)}

main{max-width:60rem;margin:0 auto;padding:1rem 1.25rem 5rem}

/* ---------- Індикатор книг (ближче до карток) ---------- */
.book-indicator{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:0 0 1.2rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--page-dim);
}
/* інверсія відносно карток: тип — синій фон/білий текст; антитип — світлий/синій текст */
.book-indicator .bk{padding:.35rem .8rem;border:1px solid var(--hairline);border-radius:3px}
.book-indicator .bk.ot{background:var(--seam);color:#fff;border-color:var(--seam)}
.book-indicator .bk.nt{background:var(--type-bg);color:var(--seam);border-color:var(--hairline)}
.book-indicator .bk-arrow{color:var(--seam)}

/* ---------- Пара ---------- */
.pair{
  display:grid;grid-template-columns:1fr auto 1fr;
  border:1px solid var(--hairline);border-radius:3px;overflow:hidden;
  box-shadow:0 2px 10px rgba(30,44,138,.09);
}
.side{padding:2.2rem 2rem}
.side .role{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:1rem}
.side h2{font-weight:600;font-size:1.6rem;line-height:1.15;margin-bottom:.8rem;color:var(--title-ink)}
.side p{font-size:.98rem;margin-bottom:.6rem;line-height:1.55}
.side .ref{display:block;margin-top:.8rem;font-size:.8rem;letter-spacing:.05em;font-style:italic}
.shadow-side{background:var(--type-bg);color:var(--type-ink)}
.shadow-side .role,.shadow-side .ref{color:var(--type-dim)}
.light-side{background:var(--antitype-bg);color:var(--antitype-ink)}
.light-side .role,.light-side .ref{color:var(--antitype-dim)}

/* ---------- Шов + стрілка (SVG, у синьому кружечку) ---------- */
.seam{width:64px;position:relative;display:flex;align-items:center;justify-content:center}
.seam .mark{
  width:40px;height:40px;border-radius:50%;background:var(--seam);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(30,44,138,.25);
}
.arrow-svg{display:block}

/* ---------- Коментар (далі від карток) ---------- */
.commentary{
  background:var(--panel-bg);color:var(--panel-ink);
  border:1px solid var(--hairline);border-radius:3px;margin-top:8px;
  padding:2rem;position:relative;box-shadow:0 2px 10px rgba(30,44,138,.06);
}
.commentary h3{font-weight:600;font-size:1.25rem;color:var(--seam);margin-bottom:.9rem;letter-spacing:.01em}
.commentary p{font-size:.95rem;color:var(--panel-ink);margin-bottom:.6rem;line-height:1.55}
.commentary p:last-of-type{margin-bottom:0}
/* бейдж категорії: фон акценту, білий текст */
.category-badge{display:inline-block;margin-top:1.2rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--seam);border:1px solid var(--seam);border-radius:3px;padding:.25rem .7rem}

/* ---------- Пагінатор (світлі кнопки) ---------- */
.paginator{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.5rem}
.pg{flex:1;text-decoration:none;color:var(--page-ink);background:#fff;border:1px solid var(--hairline);border-radius:3px;padding:1rem 1.2rem;transition:.2s;min-height:1px}
.pg:hover{border-color:var(--seam)}
.pg.empty{border:none;background:none;pointer-events:none}
.pg.next{text-align:right}
.pg-dir{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--seam);margin-bottom:.3rem}
.pg-title{display:block;font-size:1.05rem;font-weight:500}
.pg-count{font-size:.8rem;letter-spacing:.1em;color:var(--page-dim);white-space:nowrap}

/* ---------- Мобільний ---------- */
@media(max-width:640px){
  .pair{grid-template-columns:1fr}
  /* шов на всю ширину, стрілка по центру картки, вказує вниз */
  .seam{width:100%;height:52px;justify-content:center}
  .arrow-svg{transform:rotate(90deg)}
  .legend{gap:1.4rem;flex-wrap:wrap}
  .side{padding:1.8rem 1.5rem}
  .lang-switch{position:static;justify-content:center;margin-bottom:1.5rem}
  .paginator{flex-direction:column}
  .pg.next{text-align:left}
  .pg-count{order:-1}
}