:root{
  --na-page-top-gap: 60px; /* Отступ сверху на всех страницах */

  --max: 1440px;
  --pad: clamp(18px, 3vw, 42px);

  --h1: clamp(42px, 5.8vw, 88px);
  --h2: clamp(24px, 2.4vw, 40px);
  --h3: clamp(18px, 1.5vw, 22px);
  --p: clamp(14px, 1.05vw, 16px);
  --headertitle: clamp(1.563rem, 1.061rem + 2.294vw, 3.125rem);
  --headertitle-lh: .9;
  --headertitle-track: .06em;
  --headerbrand: clamp(2.813rem, 2.311rem + 2.294vw, 4.375rem);
  --small: 13px;

  --accent-font: "Bebas Neue", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --base-font: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  
  /* Верхняя фикс-плашка: бургер + бренд (единый блок) */
  --na-topbar-inset: 16px;
  --na-topbar-minh: 84px;
  /* Отступ для заголовков/контента, чтобы не залезать под плашку */
  --na-top-safe: calc(var(--na-topbar-inset) + var(--na-topbar-minh) + 28px);



  /* =========================================================
     NATAANIMAL • BACKGROUND (spotlights + film grain)
     ВАЖНО: это только фон. Остальные стили не трогаем.
     Источник параметров: test_backgound_v6.html
     ========================================================= */
  --na-bg-blur: var(--na-zone-bg-blur, 22px);
  --na-bg-vignette: var(--na-zone-bg-vignette, .18);

  --na-bg-spot-1: var(--na-zone-bg-spot-1, rgba(48, 48, 48, 0.19));
  --na-bg-spot-2: var(--na-zone-bg-spot-2, rgba(255, 255, 255, 0.112));
  --na-bg-spot-3: var(--na-zone-bg-spot-3, rgba(255, 255, 255, 0.148));
  --na-bg-spot-4: var(--na-zone-bg-spot-4, rgba(255, 255, 255, 0.288));

  --na-bg-noise-opacity: var(--na-zone-bg-noise-opacity, 0.12);
  --na-bg-noise-size: var(--na-zone-bg-noise-size, 160px);
   --na-safe-area-bottom: env(safe-area-inset-bottom, 0px);

}



body:not(.home) .page-header{
  padding-top: calc(var(--na-top-safe) + var(--na-page-top-gap));
}

body:not(.home) .site-main{
  padding-top: calc(var(--na-top-safe) + var(--na-page-top-gap));
}

body:not(.home) .page-header + .site-main{
  padding-top: 0;
}


body.page-id-50 .page-header__title,
body.page-id-50 .entry-title,
body.page-id-50 .wp-block-post-title {
  display: none !important;
}


@media (max-width: 980px){
  :root{ --na-topbar-inset: 12px; }
}


html,body{
  height:100%;
  margin:0;
  padding:0;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family:var(--base-font);
  background: var(--na-ui-site-bg-fill, var(--bg-0));
  position:relative;

  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-60px;
  pointer-events:none;
  z-index:-2;

  /* Blur слой: прожекторы + база */
  background:
    radial-gradient(900px 700px at 18% 14%,
      var(--na-bg-spot-1),
      rgba(255,255,255,0) 66%),

    radial-gradient(1200px 860px at 85% 92%,
      var(--na-bg-spot-2),
      rgba(140,170,255,0) 68%),

    radial-gradient(700px 520px at 64% 22%,
      var(--na-bg-spot-3),
      rgba(255,210,170,0) 72%),

    radial-gradient(780px 540px at 10% 10%,
      var(--na-bg-spot-4),
      rgba(170,255,220,0) 74%),

    linear-gradient(180deg,
      var(--bg-0) 0%,
      var(--bg-1) 18%,
      var(--bg-2) 46%,
      var(--bg-2) 60%,
      var(--bg-1) 82%,
      var(--bg-0) 100%);

  filter: blur(var(--na-bg-blur)) saturate(110%) contrast(103%);
  transform: scale(1.06);
  will-change: transform;
  opacity: var(--na-ui-site-bg-before-opacity, 1);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  /* Grain + мягкая виньетка (ТОЛЬКО ФОН) */
  background:
    radial-gradient(1400px 900px at 50% 35%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.08) 62%,
      rgba(0,0,0,var(--na-bg-vignette)) 100%),

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  background-size: auto, var(--na-bg-noise-size) var(--na-bg-noise-size);

  /* Примечание: настраивает "плёночность". По шаблону v6: overlay + лёгкий lift */
  mix-blend-mode: overlay;
  filter: contrast(105%) brightness(106%);
  opacity: var(--na-ui-site-bg-after-opacity, 1);
}

a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
input,textarea{ font:inherit; }

.wrap{
  position:relative;
  z-index:2;
  width:min(var(--max), 100% - (var(--pad) * 2));
  margin-inline:auto;
}

section{
  padding: clamp(46px, 7vw, 110px) 0;
}
.sectionAlt{
  background: transparent; /* NATAANIMAL: убираем секционную заливку/полосы */
}


/* Главная: выравниваем выбранные межблочные расстояния под обычный section gap темы */
body.home #about{
  padding-bottom: var(--na-ui-home-section-gap, clamp(46px, 7vw, 110px));
}

body.home #portfolio{
  padding-top: 0;
}

body.home #tattoo-process{
  padding-bottom: var(--na-ui-home-section-gap, clamp(46px, 7vw, 110px));
}

body.home #shop{
  padding-top: 0;
  padding-bottom: var(--na-ui-home-section-gap, clamp(46px, 7vw, 110px));
}

body.home #seminars{
  padding-top: 0;
}

body.home #seminars .nataanimal-seminars{
  --na-semi-root-pad-top: 0px;
}



.sectionTitle{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom: clamp(18px, 2.6vw, 34px);
}
.sectionTitle h2{
  margin:0;
  font-size:var(--h2);
  font-family:var(--accent-font);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sectionTitle p{
  margin:0;
  max-width:48ch;
  color:var(--muted);
  font-size:var(--p);
  line-height:1.5;
}


/* Topbar: бургер + бренд (единый блок) */
.naTopbar{
  position:fixed;
  top: var(--na-topbar-inset);
  left: var(--na-topbar-inset);
  right: var(--na-topbar-inset);
  z-index:50;

  display:flex;
  
  justify-content:space-between;
  gap:16px;

  /* Никакой “плашки”: контейнер невидимый, только для раскладки */
  pointer-events:none;
}
.naTopbar > *{ pointer-events:auto; }




/* Overlay base */
.overlay{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
}
.overlay[data-open="true"]{ display:block; }

.overlay__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.60);
  backdrop-filter: blur(8px);
  animation: fadeIn .18s ease both;
}


.overlay__panel{
  position:absolute;
  top:0; left:0;
  height:100%;
  height:100dvh;
  max-height:100dvh;
  width:min(520px, 88vw);
  box-sizing:border-box;
  background:linear-gradient(180deg, rgba(12,13,16,.94), rgba(16,18,24,.92));
  border-right: var(--na-stroke-w, 1px) solid var(--stroke);
  box-shadow: var(--na-shadow-6, var(--shadow));
  padding: 18px 18px calc(18px + var(--na-safe-area-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  animation: slideIn .24s ease both;
  outline:none;
}

.overlay__panel::-webkit-scrollbar{
  width:0;
  height:0;
}




.overlay__panel--booking{
  left:auto; right:0;
  width:min(720px, 92vw);
  border-right:none;
  border-left: var(--na-stroke-w, 1px) solid var(--stroke);
}

.overlay__header{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:2px 2px 0;
}

.brandMini{
  font-family:var(--accent-font);
  letter-spacing:.10em;
  font-size:20px;
  opacity:.9;
}



.menuNav{
  margin-top:6px;
  display:grid;
  gap: var(--na-ui-menu-gap, 10px);
}
.menuNav a{
  font-family:var(--accent-font);
  font-size: var(--na-ui-menu-font, clamp(24px, 3vw, 40px));
  letter-spacing:.05em;
  text-transform:uppercase;
  padding: var(--na-ui-menu-pad-y, 8px) var(--na-ui-menu-pad-x, 6px);
  border-radius: var(--na-radius-14, 14px);
  transition: background .2s ease, transform .2s ease;
}


.menuNav a:hover{
  background:rgba(255,255,255,.05);
  transform: translateX(4px);
}

.overlay__footer{
  margin-top:auto;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding-top:12px;
  border-top: var(--na-stroke-w, 1px) solid var(--stroke);
  color:var(--muted);
  font-size:var(--small);
}

/* Sticky booking */
.stickyBooking{
  position:fixed;
  right: var(--na-ui-sticky-booking-right, 16px);
  bottom: calc(var(--na-ui-sticky-booking-bottom, 16px) + var(--na-safe-area-bottom));
  z-index:55;
  display:flex;
  gap: var(--na-ui-sticky-booking-gap, 10px);
  align-items:center;
  padding: var(--na-ui-sticky-booking-pad-y, 12px) var(--na-ui-sticky-booking-pad-x, 14px);
  border-radius: var(--na-radius-pill, 999px);
  border: var(--na-stroke-w, 1px) solid var(--stroke);
  background:rgba(10,11,14,.60);
  backdrop-filter: blur(10px);
  box-shadow: var(--na-shadow-2, 0 10px 30px rgba(0,0,0,.35));
  transition: transform .2s ease, border-color .2s ease;
}
.stickyBooking:hover{ transform: translateY(-2px); border-color: var(--stroke-2); }
.stickyBooking__dot{
  width: var(--na-ui-sticky-booking-dot-size, 8px);
  height: var(--na-ui-sticky-booking-dot-size, 8px);
  border-radius: var(--na-radius-pill, 999px);
  background:rgba(94, 255, 0, 0.8);
  box-shadow: var(--na-shadow-ring-soft-lg, 0 0 0 6px rgba(233,237,243,.12));
}
.stickyBooking strong{
  font-family:var(--accent-font);
  letter-spacing:.12em;
  font-size: var(--na-ui-sticky-booking-font, 16px);
}

/* =========================
   Hero
   ========================= */

.hero{
  padding:0;
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:flex-end; /* блок с именем художника прижат к низу hero */
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55));
  overflow:hidden;
}

/* слой с видео */
.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

/* если вдруг будет <video> вместо YouTube */
.hero__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: contrast(1.03) brightness(.9) saturate(.97);
}

/* YouTube фон: iframe как cover, без щелей */
.video-background{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  background:#000;
  pointer-events:none; /* не кликается */
}

/* iframe больше экрана → обрезаем края, как в твоём примере */
.video-background iframe{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(1.3);
  height:100vh;                       /* сильно больше высоты окна */
  width:calc(100vh * 16 / 9);         /* 16:9 от высоты */
  pointer-events:none;
  border:0;
}

.video-background video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  pointer-events:none;
  border:0;
}

/* очень широкие экраны — считаем от ширины, чтобы не было боковых полос */
@media (min-aspect-ratio: 16/9){
  .video-background iframe{
    width:100vw;
    height:calc(100vw * 9 / 16);
  }
}

/* градиент поверх видео (делаю мягче, чтобы не было "всё в чёрном") */
.hero__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 55% 30%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(11,12,15,.18), rgba(11,12,15,.68) 72%, var(--bg-1));
  z-index:1;
  pointer-events:none;
}

/* блок с именем и плашками, наезжает снизу на фон */
.hero__content{
  position:relative;
  z-index:2;
    padding: var(--na-top-safe) 0 clamp(28px, 9vh, 70px);

}

.hero__content h1{
  margin:0;
  font-size:var(--h1);
  line-height:.9;
  font-family:var(--accent-font);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.hero__sub{
  margin-top: 16px;
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--p);
  line-height: 1.6;
}
.hero__meta{
  margin-top: 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color: var(--faint);
  font-size: var(--small);
}

/* =========================
   Carousel
   ========================= */

.carousel{ position:relative; }
.track{
  display:flex;
  gap:16px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 14px 2px;
  scrollbar-width: none;
  cursor: grab;
}
.track::-webkit-scrollbar{ display:none; }



.carousel__controls{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline: 6px;
  pointer-events:none; /* кликаются только кнопки внутри */
  z-index:3; /* стрелки поверх карточек */
}


/* На мобиле оставляем свайп, стрелки убираем */
@media (max-width: 768px){
  .carousel__controls{
    display:none;
  }
}





.track.is-dragging{
  cursor: grabbing;
}

.track::-webkit-scrollbar{ display:none; }



.subRow{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color: var(--muted);
}


.process__cta{
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  z-index:2;
}

/* Tiles */
.tiles{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:stretch;
}
.tile{
  border-radius: var(--radius-lg);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden;
  box-shadow: var(--na-shadow-5, 0 16px 60px rgba(0,0,0,.35));
}
.tileBody{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tileBody h3{
  margin:0;
  font-size: var(--h3);
  font-family: var(--accent-font);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tileBody p{
  margin:0;
  color: var(--muted);
  font-size: var(--p);
  line-height:1.6;
}
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:auto;
}

/* Shop */
.shopCard{ width: min(520px, 76vw); }
.priceTag{
  font-family: var(--accent-font);
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.92;
  font-size: 16px;
}

/* About */
.about{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
  align-items:start;
}
.aboutPhoto{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: var(--na-stroke-w, 1px) solid var(--stroke);
  background: rgba(255,255,255,.02);
}
.aboutPhoto img{
  width:100%;
  height: clamp(360px, 60vh, 640px);
  object-fit:cover;
  will-change: transform;
}
.aboutText{
  border-radius: var(--radius-lg);
  border: var(--na-stroke-w, 1px) solid var(--stroke);
  background: rgba(255,255,255,.02);
  padding: 18px;
}
.aboutText p{
  margin: 0 0 12px 0;
  color: var(--muted);
  font-size: var(--p);
  line-height:1.7;
}
.aboutTitle{
  margin:0 0 8px 0;
  font-size: var(--h3);
  font-family: var(--accent-font);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.more{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
  border-top: var(--na-stroke-w, 1px) solid transparent;
}
.more[data-open="true"]{
  max-height: 520px;
  border-top: var(--na-stroke-w, 1px) solid var(--stroke);
  padding-top:12px;
  margin-top:12px;
}

/* Footer */
footer{
  background: linear-gradient(180deg, rgba(10,11,14,.5), rgba(10,11,14,.85) 20%, rgba(10,11,14,.95));
  border-top: var(--na-stroke-w, 1px) solid var(--stroke);
  padding: 44px 0;
  padding-bottom: calc(44px + var(--na-safe-area-bottom));
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.footerGrid h3{
  margin:0 0 10px 0;
  font-family: var(--accent-font);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size: 18px;
}
.links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: var(--p);
}
.links a{
  border: var(--na-stroke-w, 1px) solid var(--stroke);
  padding:10px 12px;
  border-radius: var(--na-radius-pill, 999px);
  background: rgba(255,255,255,.03);
  transition: transform .2s ease, border-color .2s ease;
}
.links a:hover{ transform: translateY(-2px); border-color: var(--stroke-2); }

.copyright{
  margin-top:14px;
  color:var(--faint);
  font-size:var(--small);
  line-height:1.6;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
}
.lightbox[data-open="true"]{ display:block; }
.lightbox__bg{
  position:absolute; inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}
.lightbox__inner{
  position:relative;
  height:100%;
  display:grid;
  place-items:center;
  padding: 18px;
}
.lightbox__figure{
  margin:0;
  width:min(980px, 96vw);
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: var(--na-stroke-w, 1px) solid var(--stroke);
  background: rgba(12,13,16,.9);
  box-shadow: var(--na-shadow-6, var(--shadow));
}
.lightbox img{
  width:100%;
  height:auto;
  max-height: 78vh;
  object-fit:contain;
  background: var(--bg-1);
}
.lbBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px;
  border-top: var(--na-stroke-w, 1px) solid var(--stroke);
  color: var(--muted);
  font-size: var(--small);
}
.lbActions{ display:flex; gap:10px; }


/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .sectionTitle{ flex-direction:column; align-items:flex-start; }
  .tiles{ grid-template-columns: 1fr; }
  .about{ grid-template-columns: 1fr; }
  .footerGrid{ grid-template-columns: 1fr; }
  .miniGrid{ grid-template-columns: repeat(3, 1fr); }
}


@media (max-width: 540px){
  .burger{ left:12px; top:12px; }

  .stickyBooking{
    right: var(--na-ui-sticky-booking-right-mobile, 12px);
    bottom: calc(var(--na-ui-sticky-booking-bottom-mobile, 12px) + var(--na-safe-area-bottom));
  }
  
  .hero__sub{ max-width: 42ch; }
  .card{ width: 86vw; }
  .shopCard{ width: 84vw; }
}


@media (max-height: 760px){
  .overlay__panel{
    padding: 16px 16px calc(16px + var(--na-safe-area-bottom));
    gap:12px;
  }

  .overlay__header{
    padding:0;
  }

  .menuNav{
    margin-top:4px;
    gap: var(--na-ui-menu-gap-compact, 6px);
  }

  .menuNav a{
    font-size: var(--na-ui-menu-font-compact, clamp(20px, 2.7vh, 30px));
    padding: var(--na-ui-menu-pad-y-compact, 6px) var(--na-ui-menu-pad-x-compact, 4px);
  }

  .overlay__footer{
    gap:8px;
    padding-top:8px;
  }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .card, .thumb img, .btn, .overlay__panel, .overlay__backdrop { transition:none !important; animation:none !important; }
}

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideIn{ from{ transform: translateX(-18px); opacity:.6; } to{ transform: translateX(0); opacity:1; }

}

@media (max-width: 768px){
  .hero{ min-height: 100svh; }

  .stickyBooking--hideOnBookingMobile{
    display:none;
  }
}