@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* ---------------------------------------------------
   ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
--------------------------------------------------- */
:root{
  --black:#000;
  --text:#111;
  --accent:#8B0000;
  --gap:2px;
  --header-height:72px;
  --fg:#fff;           /* цвет текста для панели навигации */
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;

}

body{
  background:var(--black);
  color:var(--text);
}

.no-scroll {
  height: 100vh;
  overflow: hidden;
}

/* Логотип и любой текст/элементы, которые не должны выделяться */
.no-select {
  user-select: none;        /* нельзя выделить */
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}

/* ---------------------------------------------------
   ШАПКА (плавающая, логотип поверх градиента)
--------------------------------------------------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  background:transparent;
  z-index:200;
  pointer-events:none;       /* ВАЖНО: шапка не ловит клики */
}

/* Логотип */
.site-header .logo{
  height:48px;
  width:auto;
  display:block;
  -webkit-user-drag:none;
  position:relative;
  z-index:1;
  /* логотип тоже не кликается — клики проходят сквозь */
  pointer-events:none;
}

/* Градиентный бокс от верха экрана по всей ширине */
.site-header::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:120px;
  pointer-events:none;
  z-index:0;

  background:linear-gradient(
    to bottom,
    rgba(222,88,155,0.35),
    rgba(255,255,255,0.0)
  );
}

/* H1 для SEO — скрыт визуально */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}


/* ---------------------------------------------------
   КОНТЕЙНЕР МАСТЕРОВ
--------------------------------------------------- */
.masters-wrap{
  height:100vh;
  padding:0;
  overflow:hidden; /* основной скролл выключен */
}

/* 4 колонки */
.masters{
  display:flex;
  gap:var(--gap);
  height:100vh;
  padding:0;
  margin:0;
}


/* ---------------------------------------------------
   КОЛОНКА МАСТЕРА
--------------------------------------------------- */
.master{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:hidden;
}

/* Портрет мастера */
.portrait{
  position:relative;     /* нужно для абсолютного позиционирования имени */
  padding:0;
  text-align:center;
  background:transparent;
  margin-bottom:var(--gap);  /* небольшой отступ между портретом и работами */
}

.portrait img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:0;
  display:block;
}

/* Имя мастера — внутри фото, снизу по центру */
.name{
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  
  font-family:"Bebas Neue", "Arial Narrow", system-ui, -apple-system, sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#fff;
  text-align:center;

  text-shadow:0 0 4px rgba(0,0,0,1);
  pointer-events:none;      /* имя не мешает клику по фото */
}


/* ---------------------------------------------------
 СПИСОК РАБОТ — безбарьерная прокрутка, БЕЗ скроллбара
--------------------------------------------------- */
.works{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  padding:0;

  overflow-y:auto;                /* вертикальный скролл только внутри столбца */
  -webkit-overflow-scrolling:touch; /* плавный скролл на iOS */
  scrollbar-width:none;           /* Firefox */
  touch-action:pan-y;             /* здесь жесты = вертикальный скролл */
}

.works::-webkit-scrollbar{
  display:none;                   /* скрываем полосу прокрутки */
}

/* Одинаковые ячейки по высоте */
.works img{
  width:100%;
  height:160px;      /* фиксируем высоту "ячейки" */
  object-fit:cover;  /* обрезаем лишнее, без искажений */
  display:block;
  border-radius:0;
}

/* ---------------------------------------------------
   LIGHTBOX (клик для увеличения)
--------------------------------------------------- */
.lb-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.85);
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.lb-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.lb-overlay img{
  max-width:95%;
  max-height:95%;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  border-radius:4px;
  transform:scale(1);
  transition:transform .18s ease;
  cursor:zoom-out;
}

.lb-overlay.open img{
  transform:scale(1.02);
}

/* кликабельная зона для закрытия */
.lb-close-area{
  position:absolute;
  inset:0;
}



/* ---------------- Панель ---------------- */
/* --- centralized mode panel --- */


/* Панель */
.mode-panel{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 40;              /* важно: выше bg-wrap, ниже модальных и т.п. */

  display: inline-flex;
  gap: 0;
  align-items: center;

  padding: 12px;
  border-radius: 40px;

  background: rgba(20,20,20,0.32); /* лёгкая подложка */


  box-shadow: 0 12px 30px rgba(0,0,0,0.45);

  pointer-events: auto;
  user-select: none;

  min-height: 56px;
  overflow: visible;
}


/* highlighter (без изменений) */
.mode-highlighter{
  position: absolute;
  top: 50%;
  border-radius: 30px;
  background: linear-gradient(125deg,
    rgba(235,235,235,0.1) 0%,
    rgba(235,235,235,0.4) 100%);
  pointer-events: none;
  z-index: 5;
  opacity: 0.95;
}


/* кнопки-ссылки внутри панели */
.mode-panel .mode-btn{
  position: relative;
  z-index: 2;
  background: transparent !important;
  border: none;
  padding: 4px 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  min-width: 100px;

  font-size: 13px;
  color: var(--fg);          /* текст белый */
  text-decoration: none;     /* убираем подчёркивание */

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: none !important;
}

.mode-panel .mode-btn:active,
.mode-panel .mode-btn:focus,
.mode-panel .mode-btn:focus-visible,
.mode-panel .mode-btn[aria-pressed="true"]{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--fg) !important;
}

/* иконка: фиксируем высоту, ширина подгоняется автоматически */
.mode-panel .mode-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;       /* не принуждаем ширину */
  height:36px;      /* фиксируем высоту контейнера */
  padding: 0 6px;   /* горизонтальные отступы при желании */
  box-sizing: border-box;
  
}

/* svg/img внутри иконки: высота = 100% контейнера, ширина auto */
.mode-panel .mode-icon svg,
.mode-panel .mode-icon img{
  height:100% !important;
  width:auto !important;
  max-width: none; /* если есть ограничения, убираем */
  display:block !important;
}

.mode-panel .mode-icon svg.icon-anim{
  position:absolute;
  left:0;
  top:0;
  z-index:3;
  pointer-events:none;
}

/* надпись под кнопкой  */
.mode-panel .mode-label{
  font-size: 12px;
  color: var(--fg);
  opacity: 0.95;
}





/* ---------------- УНИВЕРСАЛЬНЫЙ ВНУТРЕННИЙ ЛЭЙАУТ для статьей ---------------- */

.page-layout {
  overflow-y: auto !important;
  overflow-x: hidden;
  background: #000;
  color: #eee;
  min-height: 100vh;
  padding-bottom: 120px; /* под плавающую панель */
}

/* Основной контейнер */
.page {
  padding: 120px 20px 40px; /* верх — под шапку */
  max-width: 900px;
  margin: 0 auto;
  color: #eee;
  font-size: 15px;
  line-height: 1.55;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Заголовки */
.page h1 {
  font-size: 28px;
  color: #fff;
  margin: 0 0 20px;
}

.page h2 {
  font-size: 22px;
  color: #fff;
  margin: 28px 0 14px;
}

/* Текст и ссылки */
.page p {
  margin-bottom: 16px;
  color: #ccc;
}

.page a {
  color: #ff9;
  text-decoration: none;
}

.page a:hover {
  text-decoration: underline;
}

/* Навигация-якоря */
.page-nav {
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column; /* две строки */
  gap: 14px;
  align-items: center;    /* центрируем */
}

.page-nav a {
  display: inline-block;
  padding: 10px 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  font-size: 15px;
  transition: 0.25s ease;
  backdrop-filter: blur(4px);
}

.page-nav a:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
}

.page-nav a:active {
  background: rgba(255,255,255,0.28);
  transform: scale(0.97);
}

/* Разделы */
.page-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Списки */
.page ul,
.page ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

.page li {
  margin-bottom: 12px;
  color: #ccc;
  line-height: 1.45;
}

.page strong {
  color: #fff;
}

/* Примечания */
.page-note {
  color: #aaa;
  font-size: 14px;
  margin-top: 12px;
}

/* Кнопки */
.page-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: #ff9955;
  color: #000;
  font-weight: 600;
  text-decoration: none;
  margin: 10px 0;
}

.page-btn:hover {
  background: #ffbb77;
}