/* ══════════════════════════════════════════════════════
   Светлана Самоцветова — Портфолио
   style.css  |  Тёплая галерейная атмосфера
══════════════════════════════════════════════════════ */

/* ── CSS-переменные ── */
:root {
  --bg:           #F8F4EE;
  --surface:      #FFFFFF;
  --ink:          #1C1815;
  --ink-2:        #6B5F55;
  --ink-3:        #B0A499;
  --accent:       #7A4F2E;
  --border:       #E4DDD5;
  --sold:         #8B2E2E;
  --available:    #3A6647;
  --dark-canvas:  #1A1410;

  --sidebar-w:       240px;
  --sidebar-w-tablet: 200px;
  --mobile-header-h:  56px;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;

  --trans: 200ms ease;
}

/* ── Сброс и базовые стили ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { cursor: pointer; font-family: inherit; }
img { display: block; max-width: 100%; }
textarea { resize: vertical; }

/* ═══════════════════════════════════════════
   ПУБЛИЧНЫЙ САЙТ — Основной макет
═══════════════════════════════════════════ */

/* ── Сайдбар ── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform var(--trans);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 2rem 1.5rem 1.5rem;
}

/* ── Логотип в сайдбаре ── */
.sidebar-brand { margin-bottom: 2.5rem; }

.brand-link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.brand-sub {
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

/* ── Навигация ── */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-2);
  transition: background var(--trans), color var(--trans);
}

.nav-link:hover,
.nav-link.is-active {
  background: var(--bg);
  color: var(--ink);
}

.nav-link.is-active {
  font-weight: 500;
  color: var(--accent);
}

.nav-count {
  font-size: 0.75rem;
  color: var(--ink-3);
  font-weight: 300;
}

.nav-about {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* ── Футер сайдбара ── */
.sidebar-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.admin-link {
  font-size: 0.75rem;
  color: var(--ink-3);
  font-weight: 300;
  letter-spacing: 0.04em;
  transition: color var(--trans);
}

.admin-link:hover { color: var(--accent); }

/* ── Основная область ── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Мобильная шапка (скрыта на десктопе) ── */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--mobile-header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 300;
}

.mobile-logo {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}

.burger-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}

.burger-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--trans), opacity var(--trans);
}

/* ── Затемнение при открытом меню ── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 24, 21, 0.4);
  z-index: 190;
}

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

/* ═══════════════════════════════════════════
   ГАЛЕРЕЯ
═══════════════════════════════════════════ */

.gallery-view {
  padding: 2.5rem 2rem;
}

.gallery-heading {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink-3);
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* ── Карточка работы ── */
.card {
  cursor: pointer;
  border: none;
  background: none;
}

.card-img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--border);
  border-radius: 1px;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.card:hover .card-img img {
  transform: scale(1.03);
}

/* Плейсхолдер при отсутствии изображения */
.card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--ink-3);
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.1em;
}

/* Наложение при hover */
.card-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 0.9rem 0.9rem;
  background: linear-gradient(to top, rgba(26,20,16,0.9) 0%, rgba(26,20,16,0) 100%);
  opacity: 0;
  transition: opacity 200ms ease;
}

.card:hover .card-hover {
  opacity: 1;
}

.card-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.card-cat {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Бейдж «Продана» */
.badge-sold {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--sold);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2em 0.55em;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   СТРАНИЦА ОТДЕЛЬНОЙ РАБОТЫ
═══════════════════════════════════════════ */

.work-detail {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Левая панель — изображение */
.work-image-panel {
  flex: 1;
  background: var(--dark-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  overflow: hidden;
}

.work-image-panel img {
  max-height: 90vh;
  max-width: 100%;
  object-fit: contain;
  border-radius: 1px;
}

/* Плейсхолдер на странице работы */
.work-img-placeholder {
  width: 280px;
  height: 370px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.2);
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  border-radius: 1px;
}

/* Правая панель — описание */
.work-info-panel {
  width: 360px;
  min-width: 300px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.work-back-btn {
  position: fixed;
  top: 20px;
  left: calc(var(--sidebar-w) + 16px);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink);
  background: rgba(248, 244, 238, 0.92);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--trans), color var(--trans);
}

.work-back-btn:hover {
  color: var(--accent);
  background: rgba(248, 244, 238, 1);
}

.work-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--ink-5);
  border-bottom: 1px solid var(--ink-5);
}
.work-nav-btn {
  background: none;
  border: 1px solid var(--ink-4);
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink-2);
  transition: background var(--trans), color var(--trans);
  white-space: nowrap;
}
.work-nav-btn:hover:not(:disabled) { background: var(--ink-5); }
.work-nav-btn:disabled { opacity: 0.35; cursor: default; }
.work-nav-count {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-3);
  white-space: nowrap;
}
.work-article {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 0.2rem 0 0.4rem;
  cursor: pointer;
  display: inline-block;
}
.work-article:hover { color: var(--accent); text-decoration: underline; }

.work-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.work-meta {
  font-size: 0.8rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.divider {
  height: 1px;
  background: var(--border);
}

/* Таблица характеристик */
.work-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.work-specs tr td {
  padding: 0.45rem 0;
  vertical-align: top;
}

.work-specs td:first-child {
  color: var(--ink-3);
  width: 90px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-right: 1rem;
}

.work-specs td:last-child { color: var(--ink); }

/* Описание */
.work-description {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Блок цены */
.work-price-block { margin-top: 0.25rem; }

.price-value {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
}

.price-on-request {
  font-size: 0.875rem;
  color: var(--ink-3);
  font-style: italic;
}

.price-sold {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sold);
}

.price-nfs {
  font-size: 0.875rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Кнопки ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: #6a4225;
  border-color: #6a4225;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--border);
}

.btn-ghost:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink-3);
}

.btn-contact {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  width: 100%;
}

.btn-contact:hover {
  background: var(--accent);
  color: #fff;
}

.btn-qr-download {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--border);
  font-size: 0.75rem;
  padding: 0.4rem 0.9rem;
}

.btn-qr-download:hover {
  background: var(--bg);
  color: var(--ink);
}

/* QR-блок */
.qr-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.25rem;
}

.qr-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
}

#qrcode {
  display: inline-block;
  margin-bottom: 0.75rem;
}

#qrcode canvas,
#qrcode img { border-radius: 2px; }

/* ═══════════════════════════════════════════
   СТРАНИЦА «О ХУДОЖНИКЕ»
═══════════════════════════════════════════ */

.about-view {
  padding: 3rem 2rem;
  max-width: 680px;
}

.about-heading {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.about-sub {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 2.5rem;
}

.about-text {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-2);
  margin-bottom: 2rem;
}

/* Теги техник */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.25em 0.75em;
  border-radius: 2px;
  opacity: 0.75;
}

/* Блок с фото художника */
.about-profile {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.about-photo-wrap { flex-shrink: 0; }

.about-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border);
}

.about-profile-text { flex: 1; }

.about-profile-text .about-heading { margin-bottom: 0.4rem; }

.about-has-photo .about-text { margin-top: 1.5rem; }

/* Контактный блок */
.about-contact {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.about-contact-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 1rem;
}

/* Кликабельный тег-техника */
.tag-link { cursor: pointer; }
.tag-link:hover { opacity: 1; background: var(--accent); color: #fff; }

/* ── Загрузка ── */
.loading {
  padding: 4rem 2rem;
  color: var(--ink-3);
  font-size: 0.875rem;
  text-align: center;
}

/* ── Сообщение об отсутствии работ ── */
.gallery-empty {
  grid-column: 1 / -1;
  padding: 3rem 0;
  color: var(--ink-3);
  font-size: 0.875rem;
  text-align: center;
}

/* ── Обёртка изображения с кнопкой раскрытия ── */
.work-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.lb-expand-icon {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 30px;
  text-align: center;
  opacity: 0;
  transition: opacity var(--trans);
  pointer-events: none;
  user-select: none;
}

.work-img-wrap:hover .lb-expand-icon { opacity: 1; }

/* ═══════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════ */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
}

.lightbox-overlay.lb-visible { opacity: 1; }

.lb-img {
  display: block;
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 1px;
  user-select: none;
}

.lb-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  transition: color var(--trans);
  z-index: 1001;
}

.lb-close:hover { color: #fff; }

.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.4rem;
  padding: 1rem 0.85rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
  z-index: 1001;
}

.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-arrow:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ═══════════════════════════════════════════
   КОНТАКТНАЯ МОДАЛКА
═══════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
  padding: 1rem;
}

.modal-overlay.modal-visible { opacity: 1; }

.modal-box {
  background: var(--surface);
  border-radius: 4px;
  padding: 2rem 2.25rem;
  width: min(480px, 100%);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
  color: var(--ink);
}

.modal-close {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ink-3);
  line-height: 1;
  padding: 0.3rem 0.5rem;
  transition: color var(--trans);
}

.modal-close:hover { color: var(--ink); }

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.modal-field label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.modal-field input,
.modal-field textarea {
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  background: var(--bg);
  color: var(--ink);
  transition: border-color var(--trans);
  width: 100%;
  outline: none;
}

.modal-field input:focus,
.modal-field textarea:focus { border-color: var(--accent); background: var(--surface); }

.modal-field textarea { min-height: 100px; resize: vertical; }

.modal-submit {
  margin-top: 0.5rem;
  padding: 0.65rem 1.5rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 2px;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  transition: opacity var(--trans);
}

.modal-submit:disabled { opacity: 0.55; }
.modal-submit:not(:disabled):hover { opacity: 0.85; }

.modal-error {
  background: rgba(139,46,46,0.08);
  border: 1px solid rgba(139,46,46,0.2);
  color: var(--sold);
  border-radius: 3px;
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.modal-success {
  text-align: center;
  padding: 1.5rem 0;
}

.modal-success p:first-child {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.modal-success p:last-child {
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* ═══════════════════════════════════════════
   КАТАЛОГ
═══════════════════════════════════════════ */

.catalog-view {
  padding: 2rem;
  max-width: 900px;
}

.catalog-view h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.catalog-filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cat-chip {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.8rem;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--trans), color var(--trans), background var(--trans);
}

.cat-chip:hover { border-color: var(--accent); color: var(--accent); }

.cat-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.catalog-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.catalog-search {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color var(--trans);
}

.catalog-search:focus { border-color: var(--accent); }

.catalog-avail-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}

.catalog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.catalog-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  white-space: nowrap;
}

.catalog-table th.sortable { cursor: pointer; user-select: none; }
.catalog-table th.sortable:hover { color: var(--accent); }

.sort-arrow {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.7rem;
  opacity: 0.5;
}

.sort-arrow.asc::after { content: '▲'; }
.sort-arrow.desc::after { content: '▼'; }

.cat-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--trans);
}

.cat-row:hover { background: rgba(122, 79, 46, 0.04); }

.cat-row td {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
}

.cat-num {
  color: var(--ink-3);
  font-size: 0.8rem;
  width: 2.5rem;
}

.cat-thumb {
  width: 44px;
}

.cat-thumb img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border);
}

.cat-title { font-weight: 400; }

.cat-year, .cat-medium, .cat-size {
  color: var(--ink-2);
}

.cat-price { font-weight: 400; }

.cat-status span {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
}

.cat-status .st-available { color: var(--available); background: rgba(58,102,71,0.1); }
.cat-status .st-sold      { color: var(--sold);      background: rgba(139,46,46,0.1); }
.cat-status .st-nfs       { color: var(--ink-3);     background: rgba(0,0,0,0.05); }

.catalog-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-3);
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════
   ТЕГ-ЧИПЫ
═══════════════════════════════════════════ */

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.tag-chip {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--ink-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--trans), color var(--trans);
  text-decoration: none;
}

.tag-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════════════════════════════════════
   АДАПТИВНОСТЬ
═══════════════════════════════════════════ */

/* Планшет (768–1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
  .sidebar { width: var(--sidebar-w-tablet); }
  .main    { margin-left: var(--sidebar-w-tablet); }

  .gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  .work-detail { flex-direction: row; }
  .work-info-panel { width: 300px; }

  .work-back-btn { left: calc(var(--sidebar-w-tablet) + 16px); }
}

/* Мобильный (< 768px) */
@media (max-width: 767px) {
  /* Показываем мобильную шапку */
  .mobile-header { display: flex; }

  /* Сайдбар — overlay */
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w);
    top: 0;
    z-index: 300;
    box-shadow: 4px 0 24px rgba(26,20,16,0.12);
  }

  .sidebar.is-open { transform: translateX(0); }

  /* Основная область */
  .main {
    margin-left: 0;
    padding-top: var(--mobile-header-h);
  }

  .work-back-btn { left: 12px; top: calc(var(--mobile-header-h) + 12px); }

  /* Галерея — 2 колонки */
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .gallery-view { padding: 1.25rem; }
  .gallery-heading { margin-bottom: 1.25rem; }

  /* Страница работы — одна колонка */
  .work-detail {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .work-image-panel {
    max-height: 50vh;
    height: 50vh;
    padding: 1rem;
  }

  .work-info-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 1.5rem;
  }

  /* О художнике */
  .about-view { padding: 1.5rem; }
  .about-heading { font-size: 1.5rem; }

  /* Lightbox — стрелки скрыты, навигация свайпом */
  .lb-arrow { display: none; }

  /* Каталог — скрываем второстепенные колонки */
  .catalog-view { padding: 1rem; }
  .cat-medium, .cat-size { display: none; }
  .catalog-table th:nth-child(4),
  .catalog-table th:nth-child(5) { display: none; }

  /* Модалка */
  .modal-box { padding: 1.5rem; }
}

/* ═══════════════════════════════════════════
   ПАНЕЛЬ УПРАВЛЕНИЯ (ADMIN)
═══════════════════════════════════════════ */

.admin-body {
  display: block;
  background: var(--bg);
  min-height: 100vh;
}

/* ── Страница входа ── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 360px;
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 2rem;
  text-align: center;
}

.login-form { display: flex; flex-direction: column; gap: 1rem; }

/* ── Панель управления ── */
.admin-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
}

.admin-nav { display: flex; gap: 0.5rem; }

/* ── Секция ── */
.admin-section {
  margin-bottom: 2.5rem;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.count-badge {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink-3);
  padding: 0.15em 0.55em;
  border-radius: 20px;
  vertical-align: middle;
}

/* ── Таблица работ ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th {
  background: var(--bg);
  padding: 0.55rem 0.65rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.admin-table td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--ink);
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-table tr:hover td { background: var(--bg); }

.td-thumb  { padding: 0.35rem 0.4rem; }
.td-title  { font-weight: 400; width: 100%; }
.td-actions {
  vertical-align: middle;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  min-width: 150px;
}

.td-actions form { margin: 0; }

.thumb-placeholder {
  width: 48px;
  height: 48px;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--ink-3);
  border-radius: 2px;
}

/* Бейджи статуса в таблице */
.status-badge {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2em 0.6em;
  border-radius: 2px;
}

.status-available { background: rgba(58,102,71,0.12); color: var(--available); }
.status-sold      { background: rgba(139,46,46,0.1);  color: var(--sold); }
.status-nfs       { background: var(--bg);            color: var(--ink-3); border: 1px solid var(--border); }

/* ── Кнопки (малые) ── */
.btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
}

.btn-danger {
  background: transparent;
  color: var(--sold);
  border-color: rgba(139,46,46,0.3);
}

.btn-danger:hover {
  background: var(--sold);
  color: #fff;
  border-color: var(--sold);
}

/* ── Форма ── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.75rem;
}

.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin-top: 1rem;
}

.field-full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.35rem; }

.field-label {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

.req { color: var(--accent); }

.field-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  transition: border-color var(--trans);
  outline: none;
}

.field-input:focus { border-color: var(--accent); background: var(--surface); }

select.field-input { appearance: auto; }

.field-hint {
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* Загрузка фото */
.photo-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.photo-upload img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border);
}

.photo-placeholder {
  width: 160px;
  height: 160px;
  background: var(--bg);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--ink-3);
  border-radius: 2px;
}

.form-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
}

/* ── Алерты ── */
.alert {
  padding: 0.8rem 1rem;
  border-radius: 3px;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}

.alert-success {
  background: rgba(58,102,71,0.08);
  border-color: rgba(58,102,71,0.2);
  color: var(--available);
}

.alert-error {
  background: rgba(139,46,46,0.08);
  border-color: rgba(139,46,46,0.2);
  color: var(--sold);
}

/* Вспомогательные */
.text-muted { font-size: 0.875rem; color: var(--ink-3); }
.link-muted { font-size: 0.8rem; color: var(--ink-3); }
.link-muted:hover { color: var(--accent); }

@media (max-width: 540px) {
  .fields-grid { grid-template-columns: 1fr; }
  .field-full  { grid-column: 1; }
  .admin-wrap  { padding: 1rem; }
}

/* ═══════════════════════════════════════════
   ФУТЕР САЙТА
═══════════════════════════════════════════ */

.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.78rem;
  color: var(--ink-3);
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════
   ГЛАВНАЯ СТРАНИЦА
═══════════════════════════════════════════ */

.home-page { display: flex; flex-direction: column; }

/* ── Hero ── */
.hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease;
  will-change: opacity;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.45);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero-name {
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin: 0;
}

.hero-sub {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 300;
}

.btn-hero {
  margin-top: 0.5rem;
  color: #fff;
  border-color: #fff;
  background: transparent;
  letter-spacing: 0.1em;
}

.btn-hero:hover {
  background: #fff;
  color: var(--ink);
}

.hero-arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0.5rem;
  animation: heroArrowBounce 1.8s ease-in-out infinite;
  transition: color var(--trans);
}

.hero-arrow:hover { color: #fff; }

@keyframes heroArrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── Секции главной ── */
.home-section { padding: 4rem 0; }

.home-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-heading {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.section-all-link {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.section-all-link:hover { text-decoration: underline; }

/* ── Сетка избранных ── */
.featured-section { background: var(--bg); }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* ── Биография ── */
.bio-section { background: var(--surface); }

.bio-columns {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: start;
}

.bio-text-col { display: flex; flex-direction: column; gap: 1.25rem; }

.bio-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-2);
}

.bio-image-col img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 1px;
}

/* ── CTA ── */
.cta-section { background: #F0E8DC; }

.cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cta-heading {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.cta-sub {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Хлебные крошки ── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.breadcrumb-link {
  font-size: 0.75rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: color var(--trans);
}

.breadcrumb-link:hover { color: var(--accent); }

.breadcrumb-sep {
  font-size: 0.7rem;
  color: var(--ink-3);
}

.breadcrumb-current {
  font-size: 0.75rem;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* ── scroll-behavior ── */
.main { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════
   ВЫСТАВКИ
═══════════════════════════════════════════ */

.exhibitions-view {
  padding: 2.5rem 2rem;
  max-width: 720px;
}

.exhibitions-group { margin-bottom: 2.5rem; }

.exhibitions-group-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.exhibition-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.exhibition-item:last-child { border-bottom: none; }

.exhibition-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.exhibition-meta {
  font-size: 0.8rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.exhibition-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 0.75rem;
}

.exhibition-link {
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.03em;
}

.exhibition-link:hover { text-decoration: underline; }

.exhibitions-empty {
  font-style: italic;
  color: var(--ink-3);
  text-align: center;
  padding: 3rem 1rem;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════
   ADMIN — FEATURED STAR
═══════════════════════════════════════════ */

.btn-star {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  transition: transform var(--trans);
}

.btn-star:hover { transform: scale(1.2); }

.star-on  { color: #C8922A; }
.star-off { color: var(--ink-3); }

/* ═══════════════════════════════════════════
   АДАПТИВ — ГЛАВНАЯ СТРАНИЦА
═══════════════════════════════════════════ */

/* Планшет */
@media (max-width: 1024px) and (min-width: 768px) {
  .hero-name { font-size: 3rem; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .bio-columns { grid-template-columns: 1fr 220px; gap: 2rem; }
  .cta-heading { font-size: 1.6rem; }
}

/* Мобильный */
@media (max-width: 767px) {
  .hero-section { height: calc(100vh - var(--mobile-header-h)); }
  .hero-name { font-size: 2.2rem; letter-spacing: 0.03em; }
  .hero-sub  { font-size: 0.7rem; letter-spacing: 0.1em; }

  .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  .bio-columns { grid-template-columns: 1fr; }
  .bio-image-col { display: none; }

  .home-section { padding: 2.5rem 0; }
  .home-section-inner { padding: 0 1.25rem; }

  .cta-heading { font-size: 1.4rem; }
  .cta-sub { font-size: 0.875rem; }

  .exhibitions-view { padding: 1.5rem 1.25rem; }
  .breadcrumb-current { max-width: 120px; }

  .about-profile { flex-direction: column; align-items: center; text-align: center; }
  .about-photo { width: 140px; height: 140px; }
}