/*
   PortKEY Portal — Design System КЛЮЧ
   DESIGN.md v1.1 · Квітень 2026
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Geologica:wght@300;400;500;600&display=swap');

:root {
    /* ── DESIGN.md v1.1 — Палітра КЛЮЧ ─────────────────────────── */
    --pk-color-ink:       #1a1410;
    --pk-color-paper:     #f7f3ec;
    --pk-color-warm:      #f0e8d8;
    --pk-color-white:     #ffffff;
    --pk-color-muted:     #8a7d6e;
    --pk-color-line:      #d4c9b8;
    --pk-color-gold:      #b8860b;
    --pk-color-gold-l:    #d4a843;
    --pk-color-accent:    #8b3a1a;
    --pk-focus-ring:      #b8860b;

    --pk-entity-book:     #8b3a1a;
    --pk-entity-person:   #3d5a6e;
    --pk-entity-inst:     #4a6741;
    --pk-entity-award:    #7d3c4a;
    --pk-entity-series:   #b8860b;
    --pk-entity-event:    #4a3d6e;

    --pk-font-sans:  'Geologica', system-ui, sans-serif;
    --pk-font-serif: 'Playfair Display', Georgia, serif;

    /* --- Color Palette (зворотна сумісність; значення оновлено) --- */
    /* Warm Dark (Primary) */
    --pk-color-primary:       var(--pk-color-ink);
    --pk-color-primary-light: #2d2520;

    /* Gold (Accent) — зберігаємо для зворотної сумісності */
    --pk-color-accent:        var(--pk-color-gold);
    --pk-color-accent-hover:  var(--pk-color-gold-l);

    /* Neutrals */
    --pk-color-bg:            var(--pk-color-paper);
    --pk-color-text:          var(--pk-color-ink);
    --pk-color-text-muted:    var(--pk-color-muted);

    /* --- Typography --- */
    --pk-font-heading: 'Playfair Display', serif;
    --pk-font-body:    var(--pk-font-sans);

    /* --- Effects --- */
    --pk-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --pk-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --pk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --pk-radius-sm: 2px;
    --pk-radius-md: 4px;
    --pk-radius-lg: 4px;

    --pk-transition: all 0.2s ease;

    /* Gradients */
    --pk-gradient-primary: linear-gradient(135deg, var(--pk-color-ink) 0%, #2d2520 100%);
    --pk-gradient-accent:  linear-gradient(135deg, var(--pk-color-gold) 0%, var(--pk-color-gold-l) 100%);
    --pk-gradient-glass:   linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);

    /* Перевизначення Bootstrap щоб --bs-primary
       не давав синій колір де не треба */
    --bs-primary:          var(--pk-color-ink);
    --bs-primary-rgb:      26, 20, 16;
    --bs-link-color:       var(--pk-color-gold);
    --bs-link-hover-color: var(--pk-color-gold-l);
}

/* --- Navbar — явні кольори поверх глобального a {} --- */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand,
.navbar-dark .dropdown-toggle.nav-link {
  color: rgba(247, 243, 236, 0.8) !important;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-brand:hover {
  color: var(--pk-color-paper) !important;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
  color: var(--pk-color-gold-l) !important;
}

/* --- Global Resets & Typography --- */
body {
    font-family: var(--pk-font-sans);
    color: var(--pk-color-ink);
    background-color: var(--pk-color-paper);
    font-size: 15px;
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: var(--pk-font-heading);
    color: var(--pk-color-primary);
    font-weight: 700;
}

a {
    color: var(--pk-color-primary);
    transition: var(--pk-transition);
}

a:hover {
    color: var(--pk-color-accent);
    text-decoration: none;
}

/* --- Components --- */

/* Cards */
.card {
    border: none;
    border-radius: var(--pk-radius-md);
    box-shadow: var(--pk-shadow-sm);
    transition: var(--pk-transition);
    background: var(--pk-color-white);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pk-shadow-lg);
}

.card-title a {
    color: var(--pk-color-primary);
    text-decoration: none;
}

.card-title a:hover {
    color: var(--pk-color-accent);
}

/* Buttons */
.btn-primary {
    background-color: var(--pk-color-primary);
    border-color: var(--pk-color-primary);
    color: var(--pk-color-white);
}

.btn-primary:hover {
    background-color: var(--pk-color-primary-light);
    border-color: var(--pk-color-primary-light);
}

.btn-outline-primary {
    color: var(--pk-color-primary);
    border-color: var(--pk-color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--pk-color-primary);
    color: var(--pk-color-white);
}

/* Badges */
.badge {
    font-weight: 500;
    padding: 0.5em 0.8em;
}

.bg-primary {
    background-color: var(--pk-color-primary) !important;
}

.bg-secondary {
    background-color: var(--pk-color-primary-light) !important;
}

/* --- Utilities --- */

/* Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Specialty Widgets --- */

/* Hero Section */
.hero-banner {
    background: var(--pk-gradient-primary);
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    z-index: 0;
}

/* Anniversary Card */
.anniversary-card {
    border-radius: var(--pk-radius-lg);
    background: var(--pk-color-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    text-align: center;
    position: relative;
    transition: var(--pk-transition);
}

.anniversary-card:hover {
    box-shadow: var(--pk-shadow-lg);
    border-color: var(--pk-color-accent);
}

.anniversary-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--pk-gradient-accent);
    color: var(--pk-color-primary);
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: var(--pk-shadow-sm);
    font-size: 0.8rem;
}

.anniversary-badge--commemorate {
    background: #212529;
    color: var(--pk-color-white);
}

/* Time Machine Widget */
.time-machine-widget {
    background: var(--pk-color-primary);
    color: var(--pk-color-white);
    padding: 3rem;
    border-radius: var(--pk-radius-lg);
    box-shadow: var(--pk-shadow-lg);
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="%23ffffff" fill-opacity="0.05" fill-rule="evenodd"><circle cx="3" cy="3" r="3"/><circle cx="13" cy="13" r="3"/></g></svg>');
}

.time-machine-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    text-align: center;
    border-radius: var(--pk-radius-md);
}

.time-machine-input:focus {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px var(--pk-color-accent);
}

/* --- Aspect Ratios --- */
.ratio-9x16 {
    --bs-aspect-ratio: 177.77%;
}

.ratio-1x1 {
    --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
    --bs-aspect-ratio: 75%;
}

.ratio>iframe,
.ratio>embed,
.ratio>object,
.ratio>video {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.video-container {
    transition: transform 0.3s ease;
}

.video-container:hover {
    transform: scale(1.02);
}

/* Vertical Video refinement */
.video-container.v-9x16 {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Signpost / Seminal Work Badge --- */
.badge-signpost {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a1a !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Publication Type Badges --- */
.badge-article {
    background-color: #f3e5f5;
    color: #4a148c;
}

.badge-research {
    background-color: #fce4ec;
    color: #880e4f;
}

.badge-methodic {
    background-color: #e8f5e9;
    color: #1b5e20;
}

.badge-review {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.badge-interview,
.badge-key_conversation {
    background-color: #fff3e0;
    color: #e65100;
}

.badge-survey {
    background-color: #efebe9;
    color: #4e342e;
}

.badge-writer_on_writer {
    background-color: #fff9c4;
    color: #fbc02d;
}

.badge-jubilee_essay {
    background-color: #e0f2f1;
    color: #00695c;
}

.badge-overview {
    background-color: #ede7f6;
    color: #512da8;
}

.badge-default {
    background-color: #f5f5f5;
    color: #616161;
}


/* --- Footer --- */
footer {
  background: var(--pk-color-ink) !important;
}

footer h1,
footer h2,
footer h3,
footer h4 {
    color: var(--pk-color-gold) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.2rem;
}

footer h5,
footer h6 {
  color: var(--pk-color-gold) !important;
  font-family: var(--pk-font-sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

footer p,
footer .small,
footer li {
    color: rgba(247, 243, 236, 0.5) !important;
}

footer span {
  color: rgba(247, 243, 236, 0.5) !important;
}

footer a {
    color: rgba(247, 243, 236, 0.6) !important;
    text-decoration: none !important;
}

footer a:hover {
    color: var(--pk-color-gold-l) !important;
    text-decoration: none !important;
}

/* ── Смуга засновника ── */
.pk-founder-bar {
  background: var(--pk-color-warm);
  border-top: 1px solid var(--pk-color-line);
  padding: 12px clamp(16px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.pk-founder-logo {
  height: 48px;
  width: auto;
  filter: brightness(0) saturate(100%)
          invert(12%) sepia(15%)
          saturate(800%) hue-rotate(340deg)
          brightness(0.9);
}

.pk-founder-label {
  font-family: var(--pk-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pk-color-muted);
}

@media (max-width: 640px) {
  .pk-founder-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .pk-founder-logo {
    height: 40px;
  }
}

/* ============================================================
   PUBLICATION PAGE — двоколонковий layout
   ============================================================ */

:root {
  --pub-text-width: 680px;
  --pub-border: #e4e4e4;
  --pub-muted: var(--pk-color-text-muted);
}

/* ---------- Шапка публікації ---------- */
.pub-hero {
  background: #fff;
  border-bottom: 1px solid var(--pub-border);
  padding: 36px 32px 28px;
}
.pub-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.pub-title {
  font-family: var(--pk-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  max-width: var(--pub-text-width);
  margin: 12px 0 16px;
  color: var(--pk-color-primary);
}
.pub-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--pub-muted);
}
.pub-meta-author-link {
  color: var(--pk-color-primary);
  text-decoration: none;
  font-weight: 500;
}
.pub-meta-author-link:hover { text-decoration: underline; }
.pub-meta-sep { color: var(--pub-border); }
.pub-meta-added { font-style: italic; }

/* ---------- Badge типу публікації ---------- */
.pub-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pub-type-article          { background: #eaf0f6; color: #2e4057; }
.pub-type-research         { background: #eaf2fb; color: #1a4a7a; }
.pub-type-methodic         { background: #e9f7ef; color: #145a32; }
.pub-type-review           { background: #fef6e7; color: #7d4e00; }
.pub-type-overview         { background: #fdedec; color: #7b241c; }
.pub-type-interview        { background: #f5eef8; color: #6e2f8a; }
.pub-type-writer_on_writer { background: #fdedec; color: #7b241c; }
.pub-type-key_conversation { background: #f5eef8; color: #6e2f8a; }
.pub-type-jubilee_essay    { background: #fef9e7; color: #8a6500; }
.pub-type-survey           { background: #e6f4f4; color: #2c6e6e; }

/* ---------- Двоколонковий layout ---------- */
.pub-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}

/* ---------- Текстова колонка ---------- */
.pub-body { min-width: 0; }
.pub-text { font-family: var(--pk-font-body); font-size: 15px; line-height: 1.85; color: var(--pk-color-text); }
.pub-text p { margin-bottom: 20px; }
.pub-text h2 { font-family: var(--pk-font-heading); font-size: 22px; margin-top: 36px; margin-bottom: 12px; }
.pub-text h3 { font-family: var(--pk-font-heading); font-size: 18px; margin-top: 28px; margin-bottom: 10px; }

/* Inline images in rich_text blocks (legacy fallback — не використовувати float,
   бо це ламає обтікання aligned_image блоків). Виняток для .pub-image — це фігури
   aligned_image-блоку, які самі керують своїм розміром (full/center/left/right). */
.pub-text img:not(.pub-image img) { max-width: 200px; height: auto; border-radius: 3px; }
/* Clearfix після секції з обтіканням */
.pub-text::after { content: ''; display: table; clear: both; }
/* Neutralize legacy <font> tags from old HTML */
.pub-text font { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }

/* Теги внизу тіла */
.pub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--pub-border);
}
.pub-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--pk-color-bg);
  border: 1px solid var(--pub-border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--pub-muted);
  text-decoration: none;
}
.pub-tag:hover { border-color: var(--pk-color-primary); color: var(--pk-color-primary); }

/* ---------- Sticky сайдбар ---------- */
.pub-sidebar {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Widgets ---------- */
.pub-widget {
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  overflow: hidden;
}
.pub-widget-header {
  padding: 9px 16px;
  border-bottom: 1px solid var(--pub-border);
  font-size: 10px;
  font-weight: 700;
  color: var(--pub-muted);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.pub-widget-body { padding: 12px 16px; }
.pub-widget-body--books { padding: 8px 12px; }

/* Персони в сайдбарі */
.pub-widget-person { padding: 5px 0; }
.pub-widget-person + .pub-widget-person { border-top: 1px solid var(--pub-border); }
.pub-widget-person-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--pk-color-primary);
  text-decoration: none;
}
.pub-widget-person-link:hover { text-decoration: underline; }
.pub-widget-person-name { font-size: 14px; color: var(--pk-color-text); }
.pub-widget-more {
  padding: 5px 0 2px;
  font-size: 12px;
  color: var(--pub-muted);
  font-style: italic;
  border-top: 1px solid var(--pub-border);
}

/* Книги в сайдбарі */
.pub-linked-book {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 4px;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s;
}
.pub-linked-book:hover { background: var(--pk-color-bg); }
.pub-linked-book + .pub-linked-book { border-top: 1px solid var(--pub-border); }
.pub-linked-book-cover { flex-shrink: 0; width: 42px; }
.pub-linked-book-img { width: 42px; height: auto; border-radius: 3px; box-shadow: var(--pk-shadow-sm); }
.pub-linked-book-placeholder {
  width: 42px; height: 60px;
  background: var(--pk-color-bg);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pub-muted);
}
.pub-linked-book-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-linked-book-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pk-color-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-linked-book-author { font-size: 11px; color: var(--pub-muted); }

/* Інструменти */
.pub-tools { display: flex; flex-direction: column; gap: 6px; }
.pub-tools-divider { border: none; border-top: 1px solid var(--pub-border); margin: 4px 0; }
.pub-tool-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--pk-color-primary);
  border-radius: 6px;
  background: var(--pk-color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.pub-tool-btn:hover { opacity: .85; color: #fff; }
.pub-tool-btn--secondary {
  background: #fff;
  color: var(--pk-color-primary);
}
.pub-tool-btn--secondary:hover { background: var(--pk-color-bg); color: var(--pk-color-primary); }
.pub-tool-btn--success {
  background: #198754;
  border-color: #198754;
  color: #fff;
}

/* Блок ДСТУ-цитати */
.pub-citation-text {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--pk-color-bg);
  border-left: 3px solid var(--pk-color-accent);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pk-color-text);
  word-break: break-word;
}

/* Метадані-рядки */
.pub-meta-list { display: flex; flex-direction: column; gap: 8px; }
.pub-meta-row { display: flex; flex-direction: column; gap: 2px; }
.pub-meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--pub-muted); }
.pub-meta-val { font-size: 13px; color: var(--pk-color-text); word-break: break-word; }
a.pub-meta-val { color: var(--pk-color-primary); text-decoration: none; }
a.pub-meta-val:hover { text-decoration: underline; }

/* Схожі публікації */
.pub-similar-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--pub-border);
}
.pub-similar-item:last-child { border-bottom: none; }
.pub-similar-year { font-size: 10px; color: var(--pub-muted); text-transform: uppercase; letter-spacing: .4px; }
.pub-similar-title { font-size: 13px; color: var(--pk-color-primary); line-height: 1.35; font-weight: 500; }
.pub-similar-item:hover .pub-similar-title { text-decoration: underline; }

/* ---------- Планшет / менший десктоп (<= 1000px) ---------- */
@media (max-width: 1000px) {
  .pub-layout {
    grid-template-columns: 1fr;
    padding: 24px 20px 48px;
  }
  .pub-sidebar {
    position: static;
  }
}

/* ---------- Мобільний (<= 768px) ---------- */
@media (max-width: 768px) {
  .pub-hero { padding: 24px 16px 20px; }
  .pub-title { font-size: 24px; }
  .pub-layout { padding: 20px 16px 48px; }
}

/* ============================================================
   PUBLICATION INDEX PAGE  (pix-*)
   ============================================================ */

/* ---------- Шапка ---------- */
.pix-header {
  background: var(--pk-color-primary, #0A192F);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 36px 32px 28px;
  position: relative;
  overflow: hidden;
}
.pix-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 50%, rgba(212,175,55,.08) 0%, transparent 60%);
  pointer-events: none;
}
.pix-header-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.pix-title {
  font-family: var(--pk-font-heading);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.pix-intro { font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 0; max-width: 560px; line-height: 1.55; }

/* Пошуковий рядок */
.pix-search-form { margin-top: 20px; }
.pix-search-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pix-search-field {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.pix-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.4);
  font-size: 14px;
  pointer-events: none;
}
.pix-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.pix-search-input::placeholder { color: rgba(255,255,255,.38); }
.pix-search-input:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.pix-year-select {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  font-size: 14px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  outline: none;
  min-width: 110px;
}
.pix-year-select option { background: #0A192F; color: #fff; }
.pix-search-btn {
  padding: 9px 20px;
  background: var(--pk-color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.pix-search-btn:hover { opacity: .85; }

/* ---------- Перемикач режимів ---------- */
.pix-tabs-wrap {
  background: #fff;
  border-bottom: 1px solid var(--pub-border);
  padding: 0 32px;
}
.pix-tabs {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 0;
}
.pix-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pk-color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.pix-tab:hover { color: var(--pk-color-primary); }
.pix-tab--active {
  color: var(--pk-color-primary);
  border-bottom-color: var(--pk-color-primary);
}

/* ---------- Основний контент ---------- */
.pix-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 32px 64px;
}

/* ---------- Фільтр-чіпи (стрічка) ---------- */
.pix-chips-wrap { margin-bottom: 20px; }
.pix-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pix-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--pub-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pk-color-text-muted);
  text-decoration: none;
  transition: all .15s;
}
.pix-chip:hover, .pix-chip--active {
  background: var(--pk-color-primary);
  border-color: var(--pk-color-primary);
  color: #fff;
}

/* ---------- Картка публікації ---------- */
.pix-list { display: flex; flex-direction: column; gap: 12px; }

.pix-card {
  display: flex;
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .15s, transform .1s;
}
.pix-card:hover {
  box-shadow: var(--pk-shadow-md);
  transform: translateY(-1px);
}

/* Кольорова смужка зліва */
.pix-card-stripe { width: 4px; flex-shrink: 0; }
.pix-card--article        .pix-card-stripe { background: #2e4057; }
.pix-card--research       .pix-card-stripe { background: #1a4a7a; }
.pix-card--methodic       .pix-card-stripe { background: #145a32; }
.pix-card--review         .pix-card-stripe { background: #7d4e00; }
.pix-card--overview       .pix-card-stripe { background: #7b241c; }
.pix-card--interview      .pix-card-stripe { background: #6e2f8a; }
.pix-card--writer_on_writer .pix-card-stripe { background: #7b241c; }
.pix-card--key_conversation .pix-card-stripe { background: #6e2f8a; }
.pix-card--survey         .pix-card-stripe { background: #2c6e6e; }
.pix-card--jubilee_essay  .pix-card-stripe { background: #8a6500; }

.pix-card-body { flex: 1; padding: 14px 16px; min-width: 0; }
.pix-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pix-card-date { font-size: 12px; color: var(--pk-color-text-muted); margin-left: auto; }
.pix-card-title {
  font-family: var(--pk-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--pk-color-primary);
  line-height: 1.3;
  margin-bottom: 5px;
}
.pix-card:hover .pix-card-title { text-decoration: underline; }
.pix-card-authors { font-size: 13px; color: var(--pk-color-text-muted); margin-bottom: 4px; }
.pix-card-author-link { color: var(--pk-color-text-muted); text-decoration: none; }
.pix-card-more { font-style: italic; }
.pix-card-excerpt { font-size: 13px; color: var(--pk-color-text); line-height: 1.6; margin: 0; }

/* ---------- Пагінація ---------- */
.pix-pagination { margin-top: 32px; }
.pix-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.pix-page-btn {
  padding: 8px 16px;
  border: 1px solid var(--pub-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--pk-color-primary);
  text-decoration: none;
  background: #fff;
  transition: background .15s;
}
.pix-page-btn:hover { background: var(--pk-color-bg); }
.pix-page-info { font-size: 13px; color: var(--pk-color-text-muted); }

/* ---------- Секції «За темою» ---------- */
.pix-section { margin-bottom: 40px; }
.pix-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pub-border);
}
.pix-section-label { display: flex; align-items: center; gap: 10px; }
.pix-section-stripe {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}
.pix-section-stripe--article        { background: #2e4057; }
.pix-section-stripe--research       { background: #1a4a7a; }
.pix-section-stripe--methodic       { background: #145a32; }
.pix-section-stripe--review         { background: #7d4e00; }
.pix-section-stripe--overview       { background: #7b241c; }
.pix-section-stripe--interview      { background: #6e2f8a; }
.pix-section-stripe--writer_on_writer { background: #7b241c; }
.pix-section-stripe--key_conversation { background: #6e2f8a; }
.pix-section-stripe--survey         { background: #2c6e6e; }
.pix-section-stripe--jubilee_essay  { background: #8a6500; }
.pix-section-title {
  font-family: var(--pk-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--pk-color-primary);
  margin: 0;
}
.pix-section-count {
  font-size: 12px;
  color: var(--pk-color-text-muted);
  background: var(--pk-color-bg);
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  padding: 1px 8px;
}
.pix-section-all {
  font-size: 13px;
  font-weight: 500;
  color: var(--pk-color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.pix-section-all:hover { text-decoration: underline; }

/* Сітка карток в секції — 3 колонки × 2 рядки = 6 карток */
.pix-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pix-section-grid .pix-card { flex-direction: column; }
.pix-section-grid .pix-card-stripe { width: 100%; height: 4px; }

/* ---------- Спецпроекти ---------- */
.pix-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.pix-project-card {
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pix-project-body { padding: 18px 18px 12px; flex: 1; }
.pix-project-title {
  font-family: var(--pk-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--pk-color-primary);
  margin-bottom: 8px;
}
.pix-project-desc { font-size: 13px; color: var(--pk-color-text); line-height: 1.6; }
.pix-project-desc p { margin-bottom: 8px; }
.pix-project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid var(--pub-border);
  background: var(--pk-color-bg);
}
.pix-project-meta { display: flex; gap: 10px; align-items: center; }
.pix-project-books { font-size: 12px; color: var(--pk-color-text-muted); }
.pix-project-dates { font-size: 12px; color: var(--pk-color-text-muted); }
.pix-project-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--pk-color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.pix-project-link:hover { text-decoration: underline; }

/* ---------- Empty state ---------- */
/* ---------- Статистика шапки ---------- */
.pix-stats {
  display: flex;
  gap: 28px;
  margin-top: 16px;
  margin-bottom: 4px;
}
.pix-stat-num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 3px;
}
.pix-stat-label {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ---------- Мініатюра в картці ---------- */
/* Контейнер: фіксована ширина, розтягується на повну висоту flex-батька */
.pix-card-thumb {
  width: 110px;
  flex-shrink: 0;
  overflow: hidden;
}
.pix-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Книжкові обкладинки — верх кадру (назва + арт зазвичай там) */
.pix-card-thumb-img--book { object-position: center top; }
/* Фото людей — обличчя в кадрі (15% від верху замість 50% center) */
.pix-card-thumb-img--person { object-position: center 15%; }

/* ---------- Grid-картки: горизонтальний layout (image збоку) ---------- */
/* Повертаємо row-layout замість column — image зліва, текст справа */
.pix-section-grid .pix-card { flex-direction: row; min-height: 140px; }
.pix-section-grid .pix-card-stripe { width: 4px; height: auto; flex-shrink: 0; }
.pix-section-grid .pix-card-thumb { width: 130px; }

.pix-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--pk-color-text-muted);
}
.pix-empty-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.pix-empty p { font-size: 15px; margin: 0; }

/* ---------- Планшет ---------- */
@media (max-width: 960px) {
  .pix-section-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Мобільний ---------- */
@media (max-width: 768px) {
  .pix-header { padding: 20px 16px 16px; }
  .pix-stats { gap: 16px; }
  .pix-stat-num { font-size: 20px; }
  .pix-tabs-wrap { padding: 0 12px; overflow-x: auto; }
  .pix-content { padding: 20px 16px 48px; }
  .pix-title { font-size: 22px; }
  .pix-tab { padding: 12px 14px; font-size: 13px; }
  .pix-section-grid { grid-template-columns: 1fr; }
  .pix-projects-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   БЛОК 2 — Компоненти та утиліти DESIGN.md v1.1
   ============================================================ */

/* ── 2а: Кнопки ────────────────────────────────────────────── */
.btn-accent,
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
  color: var(--pk-color-ink) !important;
  background: var(--pk-color-gold);
  border: none;
  font-weight: 600;
  font-family: var(--pk-font-sans);
}
.btn-accent:hover,
.btn-accent:focus {
  background: var(--pk-color-gold-l);
}

.btn-pk-primary {
  background: var(--pk-color-ink);
  color: var(--pk-color-paper);
  border: none;
  font-weight: 600;
  font-family: var(--pk-font-sans);
  border-radius: var(--pk-radius-sm);
}
.btn-pk-primary:hover {
  background: #2d2520;
  color: var(--pk-color-paper);
}

.btn-pk-ghost {
  background: transparent;
  border: 1px solid var(--pk-color-line);
  color: var(--pk-color-ink);
  font-family: var(--pk-font-sans);
}
.btn-pk-ghost:hover {
  border-color: var(--pk-color-gold);
  color: var(--pk-color-gold);
}

/* ── 2а: Текстові утиліти ───────────────────────────────────── */
.text-accent   { color: var(--pk-color-gold) !important; }
.text-pk-muted { color: var(--pk-color-muted) !important; }
.text-pk-gold  { color: var(--pk-color-gold) !important; }

/* ── 2а: Фонові утиліти ─────────────────────────────────────── */
.bg-pk-paper { background: var(--pk-color-paper) !important; }
.bg-pk-warm  { background: var(--pk-color-warm) !important; }
.bg-pk-ink   { background: var(--pk-color-ink) !important; }

/* ── 2б: Hero — єдиний стиль для всіх каталогових сторінок ─── */
.pk-hero,
.page-hero,
.catalog-hero,
.hero-section {
  background: var(--pk-color-ink);
  color: var(--pk-color-paper);
}

.pk-hero h1,
.pk-hero .hero-title,
.page-hero h1,
.catalog-hero h1 {
  color: var(--pk-color-paper);
  font-family: var(--pk-font-serif);
}

.pk-hero .hero-subtitle,
.page-hero .lead,
.catalog-hero .text-muted {
  color: rgba(247, 243, 236, 0.7);
}

/* Статистика у hero */
.pk-hero .stat-number,
.page-hero .stat-number,
.catalog-hero .stat-number {
  color: var(--pk-color-gold-l);
  font-family: var(--pk-font-serif);
}

.pk-hero .stat-label,
.page-hero .stat-label {
  color: rgba(247, 243, 236, 0.5);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── 2в: Базовий компонент .pk-card ────────────────────────── */
.pk-card {
  border: 1px solid var(--pk-color-line);
  background: var(--pk-color-white);
  position: relative;
  overflow: hidden;
  border-radius: var(--pk-radius-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pk-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pk-color-gold);
}

.pk-card:hover {
  box-shadow: 0 4px 20px rgba(26, 20, 16, 0.08);
  transform: translateY(-1px);
}

/* Модифікатори кольору смуги */
.pk-card--book   { --card-entity-color: var(--pk-entity-book); }
.pk-card--person { --card-entity-color: var(--pk-entity-person); }
.pk-card--inst   { --card-entity-color: var(--pk-entity-inst); }
.pk-card--award  { --card-entity-color: var(--pk-entity-award); }
.pk-card--series { --card-entity-color: var(--pk-entity-series); }
.pk-card--pub    { --card-entity-color: var(--pk-color-gold); }

.pk-card--book::before,
.pk-card--person::before,
.pk-card--inst::before,
.pk-card--award::before,
.pk-card--series::before,
.pk-card--pub::before {
  background: var(--card-entity-color);
}

/* ── 2г: Картка діяча (.person-card) ───────────────────────── */
.person-card {
  border: 1px solid var(--pk-color-line);
  background: var(--pk-color-white);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border-radius: var(--pk-radius-sm);
}

.person-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pk-entity-person);
}

.person-card:hover {
  box-shadow: 0 4px 20px rgba(26, 20, 16, 0.08);
  transform: translateY(-1px);
}

/* ── 2д: Sidebar заголовки (уніфікація) ─────────────────────── */
.sidebar-section-title,
.sidebar .section-label,
.sidebar h6,
.aside-title,
[class*="sidebar"] h5,
[class*="sidebar"] h6 {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--pk-color-gold) !important;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pk-color-line);
  font-family: var(--pk-font-sans) !important;
}

/* ── 2е: Sticky sidebar ─────────────────────────────────────── */
.sticky-sidebar,
.sidebar-sticky,
aside.sticky-top,
.col-sidebar .sticky-top {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pk-color-line) transparent;
}

@media (max-width: 900px) {
  .sticky-sidebar,
  .sidebar-sticky,
  aside.sticky-top,
  .col-sidebar .sticky-top {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* ── 2є: Фільтр-чіпси (flex-wrap) ──────────────────────────── */
.role-filters,
.filter-chips,
.filters-row,
[class*="role-filter"],
[class*="chip-container"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  row-gap: 8px !important;
  align-items: center;
}

/* ── Доступність (WCAG 2.2 AA) ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--pk-focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

.pk-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  background: var(--pk-color-ink);
  color: var(--pk-color-paper);
  padding: 10px 20px;
  font-family: var(--pk-font-sans);
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.pk-skip-link:focus {
  top: 16px;
  color: var(--pk-color-gold-l);
}


/* ============================================================
   JUBILEE ESSAY COMPONENTS — з design handoff Claude Design
   Додано: 2026-04-23
   ============================================================ */

/* --pk-font-mono відсутній в основному :root — додаємо окремо */
:root {
  --pk-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}


/* ============================================================================
   3. READING PROGRESS BAR  (fixed, top of viewport)
   ---------------------------------------------------------------------------- */
.pk-progress      { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 60; pointer-events: none; }
.pk-progress__bar { height: 100%; background: var(--pk-color-gold); width: 0%; transition: width .1s linear; }


/* ============================================================================
   4. PAGE CHROME  (breadcrumb, kicker, H1, meta strip)
   ---------------------------------------------------------------------------- */
.pk-top              { background: #fff; padding: 28px clamp(16px, 4vw, 48px) 36px; max-width: 1200px; margin: 0 auto; }
.pk-breadcrumb       { font-size: 12px; color: var(--pk-color-muted); margin-bottom: 14px; letter-spacing: .3px; }
.pk-breadcrumb a     { color: inherit; text-decoration: none; }
.pk-breadcrumb a:hover{ color: var(--pk-color-gold); }
.pk-breadcrumb .sep  { margin: 0 8px; color: var(--pk-color-line); }

.pk-kicker   { display: inline-block; background: var(--pk-color-warm); color: var(--pk-color-gold); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 6px 12px; margin-bottom: 18px; }
.pk-h1       { font-family: var(--pk-font-serif); font-weight: 900; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; margin: 0 0 16px; letter-spacing: -.5px; }
.pk-meta     { display: flex; gap: 20px; align-items: center; color: var(--pk-color-gold); font-size: 13px; flex-wrap: wrap; }
.pk-meta em  { font-style: italic; color: var(--pk-color-muted); }


/* ============================================================================
   5. HERO MASTHEAD  (stat strip + chorus of voices)
   ----------------------------------------------------------------------------
   .pk-hero__stats — 4-column stat strip bracketed by horizontal rules
   .pk-chorus      — grid of round initial-bubbles linking to each greeting
   ---------------------------------------------------------------------------- */
.pk-hero__inner        { max-width: 1200px; margin: 0 auto; padding: 36px clamp(16px, 4vw, 48px) 40px; }
.pk-hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 32px; border-top: 1px solid var(--pk-color-line); border-bottom: 1px solid var(--pk-color-line); }
@media (max-width: 720px) { .pk-hero__stats { grid-template-columns: 1fr 1fr; } }
.pk-hero__stat              { padding: 16px 20px; border-left: 1px solid var(--pk-color-line); }
.pk-hero__stat:first-child  { border-left: none; }
.pk-hero__stat .n           { font-family: var(--pk-font-serif); font-weight: 900; font-size: 34px; line-height: 1; color: var(--pk-color-ink); }
.pk-hero__stat .t           { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--pk-color-muted); font-weight: 600; margin-top: 6px; }
/* Numbers/labels inside dark jubilee hero override light-on-dark */
.jubilee-essay-hero .pk-hero__stat .n { color: var(--pk-color-paper); }
.jubilee-essay-hero .pk-hero__stat .t { color: rgba(247,243,236,.55); }
.jubilee-essay-hero .pk-hero__stats   { border-color: rgba(247,243,236,.15); }
.jubilee-essay-hero .pk-hero__stat    { border-color: rgba(247,243,236,.15); }

.pk-chorus__label          { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--pk-color-muted); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.pk-chorus__label::after   { content: ''; flex: 1; height: 1px; background: var(--pk-color-line); }
.pk-chorus__grid           { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; }
.pk-chorus__voice          { aspect-ratio: 1; border-radius: 50%; background: var(--pk-color-warm); display: grid; place-items: center; overflow: hidden; font-family: var(--pk-font-serif); font-weight: 700; font-size: 14px; color: var(--pk-color-ink); border: 2px solid rgba(247,243,236,.25); cursor: pointer; position: relative; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; text-decoration: none; }
.pk-chorus__voice:hover    { border-color: var(--pk-color-gold); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.pk-chorus__voice[data-kind="inst"]   { background: #e4ecdc; color: var(--pk-entity-inst); border-color: rgba(80,120,70,.25); }
.pk-chorus__voice[data-kind="gift"]   { background: #f5ead1; color: var(--pk-color-gold); }
.pk-chorus__voice[data-kind="acad"]   { background: #dfe7ed; color: var(--pk-entity-person); border-color: rgba(60,100,140,.25); }
/* Photo fills the circle; initials fallback stays centred */
.pk-chorus__photo          { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }


/* ============================================================================
   6. CONTROL BAR  (category tabs + read-mode toggle)
   Sticky under the header; top:68px matches .pk-header height.
   ---------------------------------------------------------------------------- */
.pk-controls         { background: #fff; border-bottom: 1px solid var(--pk-color-line); position: sticky; top: 68px; z-index: 40; }
.pk-controls__inner  { max-width: 1200px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 48px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.pk-tabs             { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.pk-tab              { padding: 7px 14px; font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--pk-color-muted); background: transparent; border: 1px solid var(--pk-color-line); cursor: pointer; font-family: inherit; }
.pk-tab.on           { background: var(--pk-color-ink); color: var(--pk-color-paper); border-color: var(--pk-color-ink); }
.pk-tab .cnt         { font-family: var(--pk-font-mono); font-size: 10px; margin-left: 5px; opacity: .7; }

.pk-readmode                 { display: flex; border: 1px solid var(--pk-color-line); }
.pk-readmode button          { padding: 7px 14px; font-size: 12px; font-weight: 600; border: none; background: #fff; cursor: pointer; font-family: inherit; display: inline-flex; gap: 6px; align-items: center; color: var(--pk-color-muted); }
.pk-readmode button.on       { background: var(--pk-color-gold); color: #fff; }


/* ============================================================================
   8. DEV-NOTE PLASHKA  (black tag for the pattern-catalogue page only)
   Remove from production — this is developer documentation.
   ---------------------------------------------------------------------------- */
.pk-doc              { background: var(--pk-color-ink); color: var(--pk-color-paper); padding: 14px 18px; margin-bottom: 14px; font-family: var(--pk-font-mono); font-size: 11.5px; line-height: 1.6; position: relative; }
.pk-doc::before      { content: 'DEV NOTE'; position: absolute; top: -8px; left: 16px; background: var(--pk-color-gold); color: var(--pk-color-ink); font-family: var(--pk-font-mono); font-size: 9px; letter-spacing: 1.5px; padding: 2px 8px; font-weight: 700; }
.pk-doc b            { color: var(--pk-color-gold-l); font-weight: 500; }
.pk-doc code         { background: rgba(184, 134, 11, .15); color: var(--pk-color-gold-l); padding: 1px 5px; font-size: 10.5px; }
.pk-doc .h           { color: #fff; font-family: var(--pk-font-sans); font-weight: 600; font-size: 13px; letter-spacing: .3px; margin-bottom: 6px; display: block; }


/* ============================================================================
   9. SECTION HEADER
   ---------------------------------------------------------------------------- */
.pk-section-head                 { margin: 40px 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--pk-color-ink); }
.pk-section-head:first-child     { margin-top: 0; }
.pk-section-head h2              { font-family: var(--pk-font-serif); font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.pk-section-head p               { margin: 0; font-size: 12px; color: var(--pk-color-muted); letter-spacing: .3px; }
.pk-section-head .idx            { font-family: var(--pk-font-mono); font-size: 10px; color: var(--pk-color-gold); letter-spacing: 1px; margin-bottom: 3px; }


/* ============================================================================
   10. PANEL + ENTITY STRIPE  (the greeting card shell)
   ----------------------------------------------------------------------------
   Every greeting is wrapped in `.pk-panel` with a modifier that colors the
   3px stripe at the top:
     .pk-panel--person  person        steel
     .pk-panel--inst    institution   sage
     .pk-panel--gift    creative gift gold
     .pk-panel--award   academic      rose
   Default (no modifier) = plum (event).
   ---------------------------------------------------------------------------- */
.pk-panel                  { background: #fff; border: 1px solid var(--pk-color-line); position: relative; margin-bottom: 24px; }
.pk-panel::before          { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--entity-color, var(--pk-entity-event)); }
.pk-panel--inst            { --entity-color: var(--pk-entity-inst); }
.pk-panel--person          { --entity-color: var(--pk-entity-person); }
.pk-panel--gift            { --entity-color: var(--pk-entity-series); }
.pk-panel--award           { --entity-color: var(--pk-entity-award); }
.pk-panel__inner           { padding: 28px 36px 32px; }
@media (max-width: 680px) { .pk-panel__inner { padding: 22px 20px; } }


/* ============================================================================
   11. GREETING HEAD  (photo / seal + name + role + tags)
   Same markup for persons and institutions; swap .pk-head__photo for
   .pk-head__seal when showing a monogram instead of a portrait.
   ---------------------------------------------------------------------------- */
.pk-head                   { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--pk-color-line); margin-bottom: 20px; }
.pk-head__photo            { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: var(--pk-color-warm); overflow: hidden; border: 2px solid var(--entity-color, var(--pk-entity-person)); }
.pk-head__photo svg,
.pk-head__photo img        { width: 100%; height: 100%; display: block; object-fit: cover; }
.pk-head__seal             { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: var(--pk-color-warm); display: grid; place-items: center; border: 2px solid var(--pk-entity-inst); color: var(--pk-entity-inst); font-family: var(--pk-font-serif); font-weight: 900; font-size: 18px; }

.pk-head__who              { flex: 1; min-width: 0; }
.pk-head__badge            { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--entity-color, var(--pk-entity-person)); font-weight: 600; margin-bottom: 4px; }
.pk-head__who h3           { font-family: var(--pk-font-serif); font-size: 19px; font-weight: 700; margin: 0 0 4px; line-height: 1.2; }
.pk-head__who p            { margin: 0; font-size: 12px; color: var(--pk-color-muted); letter-spacing: .3px; }

.pk-head__tags             { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; max-width: 230px; justify-content: flex-end; }
.pk-head__tags span        { font-size: 10px; padding: 3px 9px; background: var(--pk-color-warm); color: var(--pk-color-muted); font-weight: 500; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }

@media (max-width: 680px) {
  .pk-head          { flex-wrap: wrap; }
  .pk-head__tags    { max-width: none; justify-content: flex-start; width: 100%; }
}


/* ============================================================================
   12. MESSAGE BODY
   ---------------------------------------------------------------------------- */
.pk-msg                     { position: relative; }
.pk-msg__title              { font-family: var(--pk-font-serif); font-size: 22px; font-weight: 700; margin: 0 0 14px; line-height: 1.25; }
.pk-msg__title--caps        { font-family: var(--pk-font-sans); font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--pk-color-ink); }

.pk-msg__body               { font-size: 15px; line-height: 1.8; }
.pk-msg__body p             { margin: 0 0 12px; }
.pk-msg__body em            { font-style: italic; }
.pk-msg__body b             { font-weight: 600; }

/* Collapsed-by-default (long academic essays) */
.pk-msg__body[data-collapsed="true"] {
  max-height: 220px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}

.pk-expand                  { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: transparent; border: 1px solid var(--pk-color-line); color: var(--pk-color-ink); padding: 8px 14px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.pk-expand:hover            { border-color: var(--pk-color-gold); color: var(--pk-color-gold); }

.pk-msg__sign               { margin-top: 18px; font-size: 12px; color: var(--pk-color-muted); letter-spacing: .3px; font-style: italic; padding-top: 12px; border-top: 1px dashed var(--pk-color-line); }


/* ============================================================================
   13. PULL-QUOTE  (featured sentence — optional, inside a greeting)
   ---------------------------------------------------------------------------- */
.pk-pullquote               { font-family: var(--pk-font-serif); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--pk-color-ink); padding: 14px 0 18px; border-left: 3px solid var(--pk-color-gold); padding-left: 20px; margin: 0 0 18px; font-weight: 400; }
.pk-pullquote b             { font-weight: 700; font-style: normal; color: var(--pk-color-ink); }


/* ============================================================================
   14. ESSAY META + LISTEN  (reading-time chip + audio-version offer)
   ---------------------------------------------------------------------------- */
.pk-essay-meta              { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; font-size: 11px; color: var(--pk-color-muted); letter-spacing: .5px; }
.pk-essay-meta span         { display: inline-flex; align-items: center; gap: 5px; }
.pk-essay-meta i            { color: var(--pk-color-gold); }

.pk-listen                  { display: flex; align-items: center; gap: 10px; background: var(--pk-color-warm); padding: 10px 14px; margin: 0 0 18px; font-size: 12px; }
.pk-listen i                { color: var(--pk-color-gold); font-size: 16px; }
.pk-listen button           { margin-left: auto; border: none; background: var(--pk-color-ink); color: var(--pk-color-paper); padding: 6px 12px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }


/* ============================================================================
   15. POEM / ACROSTIC  (embedded verse)
   ----------------------------------------------------------------------------
   .pk-poem  — any dedication verse
   .pk-acro  — acrostic with highlighted first letters (.pk-acro .l)
   ---------------------------------------------------------------------------- */
.pk-poem                    { margin: 6px 0 14px; font-family: var(--pk-font-serif); font-style: italic; font-size: 17px; line-height: 1.9; color: var(--pk-color-ink); padding: 14px 20px; background: var(--pk-color-paper); border-left: 2px solid var(--pk-color-gold); }
.pk-poem-title              { font-family: var(--pk-font-sans); font-size: 10px; font-style: normal; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: var(--pk-color-gold); margin-bottom: 10px; display: block; }

.pk-acro                    { font-family: var(--pk-font-serif); font-style: italic; font-size: 16px; line-height: 2.05; margin: 0; }
.pk-acro .l                 { font-family: var(--pk-font-serif); font-weight: 900; font-style: normal; color: var(--pk-color-gold); font-size: 21px; margin-right: 2px; letter-spacing: 1px; }


/* ============================================================================
   16. ARCHIVE PHOTO STRIP
   ---------------------------------------------------------------------------- */
.pk-archive                 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
@media (max-width: 520px) { .pk-archive { grid-template-columns: 1fr 1fr; } }
.pk-archive figure          { margin: 0; }
.pk-archive__img            { background: #e8ddc8; position: relative; border: 1px solid var(--pk-color-line); }
.pk-archive__img img        { display: block; width: 100%; height: auto; }
.pk-archive__tag            { position: absolute; top: 6px; left: 6px; background: rgba(26, 20, 16, .85); color: var(--pk-color-gold-l); font-family: var(--pk-font-mono); font-size: 9px; padding: 2px 6px; letter-spacing: .5px; }
.pk-archive figcaption      { font-size: 11px; color: var(--pk-color-muted); margin-top: 6px; line-height: 1.4; font-style: italic; }


/* ============================================================================
   17. BIOGRAPHICAL CALLOUT
   ---------------------------------------------------------------------------- */
.pk-bio                     { background: var(--pk-color-warm); padding: 16px 20px; margin: 16px 0; border-left: 3px solid var(--pk-color-gold); font-size: 14px; line-height: 1.7; }
.pk-bio__label              { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--pk-color-gold); font-weight: 600; margin-bottom: 6px; }
.pk-bio__year               { font-family: var(--pk-font-serif); font-weight: 700; color: var(--pk-color-ink); margin-right: 5px; }


/* ============================================================================
   18. INLINE BOOK CARD  (reference to a book mentioned in an essay)
   ---------------------------------------------------------------------------- */
.pk-book                    { display: grid; grid-template-columns: 56px 1fr; gap: 14px; background: #fff; border: 1px solid var(--pk-color-line); padding: 12px; margin: 14px 0; position: relative; }
.pk-book::before            { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pk-entity-book); }
.pk-book__cover             { aspect-ratio: 2/3; background: linear-gradient(135deg, #8b3a1a 0%, #6b2d14 100%); color: #f7f3ec; padding: 5px; font-family: var(--pk-font-serif); font-size: 8.5px; font-weight: 700; line-height: 1.15; display: flex; align-items: flex-end; }
.pk-book__title             { font-family: var(--pk-font-serif); font-size: 14px; font-weight: 700; margin: 0 0 3px; line-height: 1.2; }
.pk-book__meta              { font-size: 11px; color: var(--pk-color-muted); letter-spacing: .3px; }


/* ============================================================================
   19. SIGNATURES ROW  (co-signing roles/people below a collective greeting)
   ---------------------------------------------------------------------------- */
.pk-signatures              { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pk-signatures span         { font-size: 11px; color: var(--pk-color-muted); background: var(--pk-color-paper); padding: 4px 10px; }


/* ============================================================================
   20. CREATIVE-GIFT GRID  (2-up tile grid for acrostic / video / audio etc.)
   ---------------------------------------------------------------------------- */
.pk-gift-grid               { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .pk-gift-grid { grid-template-columns: 1fr; } }
.pk-gift                    { background: var(--pk-color-paper); border: 1px solid var(--pk-color-line); padding: 20px; position: relative; }
.pk-gift__kind              { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pk-color-gold); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pk-gift__kind i            { font-size: 13px; }
.pk-gift__title             { font-family: var(--pk-font-serif); font-size: 17px; font-weight: 700; margin: 0 0 10px; line-height: 1.25; }
.pk-gift__author            { font-size: 11px; color: var(--pk-color-muted); margin-bottom: 12px; letter-spacing: .3px; }
.pk-gift__author b          { color: var(--pk-color-ink); font-weight: 600; }


/* ============================================================================
   21. VIDEO PLAYER PLACEHOLDER  (buktrailer / dramatization tile)
   ---------------------------------------------------------------------------- */
.pk-player                         { aspect-ratio: 16/9; background: var(--pk-color-ink); position: relative; overflow: hidden; cursor: pointer; border: none; padding: 0; width: 100%; display: block; }
.pk-player__bg                     { position: absolute; inset: 0; background: linear-gradient(135deg, #2a1e14 0%, #1a1410 60%, #3d2818 100%); }
.pk-player__shape                  { position: absolute; inset: 0; opacity: .25; }
.pk-player__play                   { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(247, 243, 236, .92); color: var(--pk-color-ink); display: grid; place-items: center; font-size: 22px; transition: transform .2s ease, background .2s ease; }
.pk-player:hover .pk-player__play  { transform: translate(-50%, -50%) scale(1.08); background: var(--pk-color-gold-l); }
.pk-player__meta                   { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; justify-content: space-between; color: var(--pk-color-gold-l); font-family: var(--pk-font-mono); font-size: 10px; letter-spacing: .5px; }
.pk-player__title                  { position: absolute; left: 14px; top: 12px; color: #f7f3ec; font-family: var(--pk-font-serif); font-size: 14px; font-weight: 700; max-width: 70%; line-height: 1.25; }


/* ============================================================================
   22. AUDIO PLAYER  (waveform-style audio reading tile)
   ----------------------------------------------------------------------------
   .pk-wave is a flex row of <span>s: each is a bar.
   Use .past on bars the playhead has already passed — they render ink-dark.
   Vary each bar's inline height (30–95%) to fake a waveform.
   ---------------------------------------------------------------------------- */
.pk-audio                   { background: #fff; border: 1px solid var(--pk-color-line); padding: 14px 16px; }
.pk-audio__row              { display: flex; align-items: center; gap: 12px; }
.pk-audio__btn              { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--pk-color-ink); color: var(--pk-color-paper); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.pk-wave                    { flex: 1; height: 34px; display: flex; align-items: center; gap: 2px; }
.pk-wave span               { flex: 1; background: var(--pk-color-gold); opacity: .8; }
.pk-wave span.past          { background: var(--pk-color-ink); }
.pk-audio__time             { font-family: var(--pk-font-mono); font-size: 11px; color: var(--pk-color-muted); flex-shrink: 0; }


/* ============================================================================
   23. SIDEBAR  (sticky tools + TOC panels)
   — .pk-aside пропущено: конфліктує з .sticky-sidebar (top:80px)
   ---------------------------------------------------------------------------- */
.pk-aside__box              { background: #fff; border: 1px solid var(--pk-color-line); padding: 16px 18px; position: relative; }
.pk-aside__box::before      { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pk-color-gold); }
.pk-aside__label            { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pk-color-muted); font-weight: 600; margin-bottom: 10px; }

/* Buttons (note: these conflict with Bootstrap `.btn`; keep prefix `.pk-btn`) */
.pk-btn                     { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .3px; border: none; cursor: pointer; width: 100%; margin-bottom: 6px; text-decoration: none; }
.pk-btn:last-child          { margin-bottom: 0; }
.pk-btn--primary            { background: var(--pk-color-primary); color: var(--pk-color-paper); }
.pk-btn--ghost              { background: #fff; border: 1px solid var(--pk-color-line); color: var(--pk-color-ink); }
.pk-btn--ghost:hover        { border-color: var(--pk-color-gold); color: var(--pk-color-gold); }

/* Sidebar Table-of-Contents */
.pk-toc a                   { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--pk-color-line); font-size: 12.5px; line-height: 1.35; color: inherit; text-decoration: none; }
.pk-toc a:first-of-type     { border-top: none; }
.pk-toc .num                { font-family: var(--pk-font-mono); font-size: 10px; color: var(--pk-color-gold); flex-shrink: 0; width: 22px; }


/* ============================================================================
   24. PUBLICATION CONTENT BLOCKS  (.pub-image, .pk-quote, .pk-archive-grid, .pk-book-inline)
   ---------------------------------------------------------------------------- */

/* ── Aligned image ─────────────────────────────────────────────────── */
.pub-image                              { margin: 24px 0; }
.pub-image img                          { display: block; height: auto; }
.pub-image figcaption                   { font-size: 12px; color: var(--pk-color-muted); margin-top: 6px; font-style: italic; text-align: center; line-height: 1.4; }

.pub-image--full                        { width: 100%; clear: both; }
.pub-image--full img                    { width: 100%; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.pub-image--center                      { display: block; margin-left: auto; margin-right: auto; max-width: 720px; }
.pub-image--center img                  { width: 100%; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.07); }

.pub-image--left                        { float: left; margin-right: 24px; margin-bottom: 12px; max-width: 48%; }
.pub-image--right                       { float: right; margin-left: 24px; margin-bottom: 12px; max-width: 48%; }
.pub-image--left img,
.pub-image--right img                   { width: 100%; border-radius: 3px; }

.pub-image-sm.pub-image--center         { max-width: 260px; }
.pub-image-sm.pub-image--left,
.pub-image-sm.pub-image--right          { max-width: 220px; }
.pub-image-md.pub-image--center         { max-width: 500px; }
.pub-image-md.pub-image--left,
.pub-image-md.pub-image--right          { max-width: 40%; }

.pub-image__zoom                        { position: relative; overflow: hidden; cursor: zoom-in; }
.pub-image__zoom img                    { display: block; width: 100%; transition: filter .3s, transform .3s; }
.pub-image__zoom:hover img              { filter: brightness(.75); transform: scale(1.02); }
.pub-image__zoom-icon                   { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; opacity: 0; transition: opacity .25s; pointer-events: none; }
.pub-image__zoom:hover .pub-image__zoom-icon { opacity: 1; }

@media (max-width: 700px) {
  .pub-image--left,
  .pub-image--right                     { float: none; margin: 16px 0; max-width: 100% !important; }
}

/* ── Pull-quote ────────────────────────────────────────────────────── */
.pk-quote                               { margin: 32px 0; padding: 18px 24px 18px 20px; border-left: 4px solid var(--pk-color-gold); background: var(--pk-color-paper); }
.pk-quote__text                         { font-family: var(--pk-font-serif); font-size: 18px; line-height: 1.55; font-style: italic; }
.pk-quote__text p                       { margin: 0; }
.pk-quote__cite                         { display: block; margin-top: 10px; font-size: 12.5px; color: var(--pk-color-muted); font-style: normal; letter-spacing: .3px; }
.pk-quote__footer                       { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.pk-quote--db .pk-quote__cite           { margin-top: 0; }
.pk-quote__source                       { font-size: 11.5px; color: var(--pk-color-muted); opacity: .75; }
.pk-quote__source a:hover               { text-decoration: underline; }

/* ── Archive photo grid ────────────────────────────────────────────── */
.pk-archive-grid                        { margin: 28px 0; }
.pk-archive-grid__label                 { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pk-color-muted); font-weight: 600; margin-bottom: 12px; }
.pk-archive-grid__items                 { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pk-archive-grid__item                  { margin: 0; }
.pk-archive-grid__img                   { position: relative; overflow: hidden; border-radius: 2px; background: var(--pk-color-line); aspect-ratio: 4/3; }
.pk-archive-grid__img img               { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-archive-grid__tag                   { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 2px 6px; font-family: var(--pk-font-mono); border-radius: 2px; }
.pk-archive-grid__item figcaption       { font-size: 11px; color: var(--pk-color-muted); margin-top: 5px; line-height: 1.35; }

/* ── Book inline card ──────────────────────────────────────────────── */
.pk-book-inline                         { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--pk-color-line); background: #fff; margin: 20px 0; align-items: flex-start; max-width: 480px; }
.pk-book-inline__cover                  { flex-shrink: 0; width: 56px; min-height: 84px; display: flex; align-items: center; justify-content: center; background: var(--pk-color-paper); font-size: 11px; color: var(--pk-color-muted); overflow: hidden; }
.pk-book-inline__cover img              { display: block; width: 56px; height: 84px; object-fit: cover; }
.pk-book-inline__title                  { font-family: var(--pk-font-serif); font-size: 15px; font-weight: 700; margin: 0 0 4px; line-height: 1.25; }
.pk-book-inline__title a:hover          { color: var(--pk-color-gold); }
.pk-book-inline__meta                   { font-size: 11.5px; color: var(--pk-color-muted); }
.pk-book-inline__note                   { margin-top: 6px; font-size: 12.5px; font-style: italic; line-height: 1.4; }