:root{
  --v-bg:#0b0b0c;
  --v-paper:#ffffff;
  --v-ink:#0f0f12;
  --v-muted:rgba(15,15,18,.68);
  --v-line:rgba(15,15,18,.12);
  --v-accent:#ffffff; /* в VOGUE-стиле акцент — чаще “чистый” */
  --v-gold:#c8b37a;
  --v-radius:18px;
}

/* Global typography override */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:#fcfcfd;
  color:var(--v-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -.02em;
}

.wrapper{ max-width: 1100px; width: 92%; }
#page-content{ min-width: 0; } /* убираем “бетонные” 1100px */

/* Header: cleaner + premium */
header{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow:none;
}
nav#main-nav>ul>li>a{
  font-family: Inter;
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 11px;
}
nav#main-nav>ul>li:hover>a,
nav#main-nav>ul>li.current-menu-item>a{
  color: var(--v-ink);
}
.maintxt{ color: var(--v-ink); } /* убираем “синий”, делаем журнал */

/* Sections spacing */
.section-inner{ padding-top: 96px; }
.no-padding .section-inner{ padding-top: 0; }
.vogue-section{ background: transparent; }

/* HERO */
.vogue-hero{
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}
.vogue-hero .section-inner{
  padding-top: 0;
  min-height: 100vh;
  display:flex;
  align-items: center;
}

/* overlay from your bgVideo stays; we tune readability */
.videobg-section .vid-overlay{
  background: #000 !important;
  opacity: .55 !important;
}

.vogue-hero__grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 48px;
  align-items: end;
  padding: 90px 0 60px;
}
.vogue-eyebrow{
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .85;
  margin: 0 0 18px;
}
.vogue-title{
  font-size: clamp(44px, 5vw, 84px);
  line-height: .95;
  margin: 0 0 16px;
  text-transform: none;
}
.vogue-lead{
  font-size: 16px;
  line-height: 26px;
  max-width: 52ch;
  opacity: .92;
  margin: 0 0 22px;
}

.vogue-hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.vogue-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: Inter;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
}
.vogue-btn:hover{ transform: translateY(-1px); }
.vogue-btn--primary{
  background: #fff;
  color: #0b0b0c;
  border: 1px solid rgba(255,255,255,.45);
}
.vogue-btn--ghost{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}

.vogue-badges{
  list-style:none;
  margin: 22px 0 0;
  padding:0;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vogue-badges li{
  border: 1px solid rgba(255,255,255,.25);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  opacity: .92;
}

/* Right card */
.vogue-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--v-radius);
  padding: 18px 18px 16px;
}
.vogue-card__title{
  font-family: "Playfair Display";
  font-size: 18px;
  margin: 0 0 6px;
}
.vogue-card__text{
  margin: 0 0 12px;
  opacity: .88;
  font-size: 13px;
  line-height: 20px;
}
.vogue-link{
  color:#fff;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.vogue-link:hover{
  border-bottom-color: rgba(255,255,255,.75);
  color:#fff;
}
.vogue-card__mini{
  margin-top: 10px;
  font-size: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  opacity: .92;
}
.vogue-dot{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  display:inline-block;
}

/* Scroll hint */
.vogue-scroll{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 14px;
  opacity: .85;
}
.vogue-scroll__line{
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,.6);
}
.vogue-scroll__text{
  font-size: 11px;
  letter-spacing: .25em;
}

/* About refinements */
.vogue-h2{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
}
.vogue-h3{ margin-bottom: 10px; }
.vogue-h4{
  font-family: Inter;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  margin: 0 0 10px;
}
.vogue-facts{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
}
.vogue-fact{
  border: 1px solid var(--v-line);
  border-radius: 14px;
  padding: 12px 12px;
  background:#fff;
}
.vogue-fact strong{
  display:block;
  font-family: Inter;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
.vogue-fact span{
  display:block;
  color: var(--v-muted);
  margin-top: 4px;
  font-size: 13px;
}

.vogue-cta-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.vogue-cta-row .vogue-btn--primary{
  background: var(--v-ink);
  color: #fff;
  border-color: rgba(15,15,18,.12);
}
.vogue-cta-row .vogue-btn--ghost{
  color: var(--v-ink);
  border-color: rgba(15,15,18,.18);
}

.vogue-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.vogue-split__item{
  background:#fff;
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 18px 18px;
}
.vogue-list{
  margin: 10px 0 0;
  padding-left: 18px;
}
.vogue-list li{ margin-top: 8px; color: var(--v-muted); }

/* Portfolio: make thumbnails feel more editorial */
.filter li a{
  font-family: Inter;
  font-weight: 700;
  letter-spacing: .18em;
  font-size: 11px;
  border-bottom: 1px solid transparent;
}
.filter li a.active, .filter li a:hover{
  border-color: var(--v-ink);
}
.imgoverlay .overlaycolor{ opacity: .72 !important; }
.portfolio-name{
  letter-spacing: .14em;
  font-family: Inter;
  font-weight: 700;
  font-size: 11px;
}

/* Footer */
.vogue-footer{
  background: #0b0b0c;
}
.vogue-footer__tag{
  margin-top: 10px;
  opacity: .75;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Contact */
.vogue-contact{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content:center;
  margin-top: 10px;
}
.vogue-fineprint{
  text-align:center;
  color: var(--v-muted);
  margin-top: 14px;
}

/* Mobile */
@media (max-width: 980px){
  .vogue-hero__grid{
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 86px;
  }
  .vogue-split{ grid-template-columns: 1fr; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .vogue-btn, .imgoverlay img{ transition: none !important; }
}
/* ===== FIX: layout drift / container conflicts ===== */

/* 1) убираем принудительную минимальную ширину темы */
#page-content{
  min-width: 0 !important;
  width: 100% !important;
}

/* 2) wrapper делаем адаптивным, но с прежним максимумом */
.wrapper{
  width: min(1100px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) фикс для fixed-header: чтобы не было двойных отступов/перескоков */
.fixed-header .page-body{
  margin-top: 0 !important; /* старый JS сам добавляет, нам не надо ломать */
}

/* 4) hero: гарантируем корректную высоту и отсутствие лишних паддингов */
.vogue-hero,
.vogue-hero .section-inner{
  min-height: 100vh !important;
}

.vogue-hero .section-inner{
  padding-top: 0 !important;
}

/* 5) сетка hero: на узких экранах в колонку */
.vogue-hero__grid{
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

@media (max-width: 980px){
  .vogue-hero__grid{
    grid-template-columns: 1fr !important;
  }
}

/* 6) страхуемся

/* Fix alignment of hero badges list */
.vogue-badges {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vogue-badges > li {
  margin: 0 !important;          /* overrides style.css: ul li { margin-top:10px } */
  line-height: 1.2 !important;   /* overrides style.css: ul li { line-height:20px } */
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 12px;
  opacity: .92;
}

/* HERO: better desktop alignment + spacing */
@media (min-width: 1024px) {
  /* make content area wider and centered */
  #home .wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* let copy block take a bit more width */
  #home .vogue-hero__copy {
    max-width: 680px;
  }

  /* slightly denser typography */
  #home .vogue-lead {
    line-height: 1.45;
  }

  /* badges: fix UL/LI global styles interference + align nicely */
  #home .vogue-badges {
    margin-top: 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  #home .vogue-badges > li {
    margin: 0 !important;        /* overrides global ul li margins */
    line-height: 1.2 !important; /* overrides global ul li line-height */
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
  }
}
/* Mobile: a bit more breathing room from the left edge */
@media (max-width: 767px) {
  #home .wrapper {
    padding-left: 16px;
    padding-right: 16px; /* чтобы не упиралось и справа */
  }
}
/* Contact buttons: black pill with white text */
#contact .vogue-btn,
#contact .vogue-btn--primary,
#contact .vogue-btn--ghost {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
  opacity: 1 !important;
}

#contact .vogue-btn:hover,
#contact .vogue-btn--primary:hover,
#contact .vogue-btn--ghost:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}