/* ============================================================
   SHHU — Ксения · editorial fashion (по референсу LPC)
   Бордовая палитра · сплит-панели · сериф + жирный санс
   живое видео + Ken Burns · scroll/mask-навигация
   ============================================================ */

:root {
  --bg:        #F3EBE6;   /* тёплая розово-кремовая база */
  --ink:       #2E0A14;   /* глубокий бордово-чёрный текст */
  --wine:      #6E1428;   /* бордовый акцент */
  --wine-deep: #460C1A;   /* тёмный бордо (панели) */
  --blush:     #E4CFC9;   /* пыльно-розовый (watermark) */
  --rose:      #B07C7C;   /* приглушённая роза */
  --cream:     #F7F1ED;
  --line:      rgba(46,10,20,0.14);
  --line-on:   rgba(247,241,237,0.18);
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --gut:       clamp(20px, 4.5vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--wine); color: var(--cream); }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- type helpers ---------- */
.serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.serif em { font-style: italic; }
.sans-black {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.kicker {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 11px;
  color: var(--wine);
}
.accent { color: var(--wine); }

/* watermark giant letters */
.wm {
  position: absolute;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--blush);
  line-height: 0.8;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

/* ============================================================
   TOP BAR — круглая кнопка-меню + вордмарк
   ============================================================ */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 26px) var(--gut);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.iconbtn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(247,241,237,0.55);
  backdrop-filter: blur(8px); cursor: pointer;
  display: grid; place-items: center; gap: 4px;
  transition: background .35s, border-color .35s, transform .35s var(--ease);
}
.iconbtn:hover { background: var(--wine); border-color: var(--wine); transform: scale(1.04); }
.iconbtn span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: background .3s; }
.iconbtn:hover span { background: var(--cream); }
.brand {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink);
}
.brand .dot { color: var(--wine); }
.topbar .meta {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wine);
}
@media (max-width: 760px) { .topbar .meta { display: none; } }

/* ============================================================
   DOT NAV (right rail) — mask-fill pips
   ============================================================ */
.dotnav {
  position: fixed; right: clamp(14px, 1.8vw, 26px); top: 50%;
  transform: translateY(-50%); z-index: 55;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-end;
  mix-blend-mode: multiply;
}
.dotnav button {
  --on: 0; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 12px; color: var(--ink);
}
.dotnav .lbl {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: calc(var(--on) * 0.85);
  transform: translateX(calc((1 - var(--on)) * 10px));
  transition: opacity .4s var(--ease), transform .4s var(--ease); white-space: nowrap;
}
.dotnav .pip {
  position: relative; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--rose); overflow: hidden; transition: border-color .35s;
}
.dotnav .pip::after {
  content: ''; position: absolute; inset: -1px; background: var(--wine); border-radius: 50%;
  transform: translateY(calc((1 - var(--on)) * 100%)); transition: transform .5s var(--ease);
}
.dotnav button[aria-current="true"] { --on: 1; }
.dotnav button[aria-current="true"] .pip { border-color: var(--wine); }
@media (max-width: 900px) { .dotnav { display: none; } }

/* ============================================================
   SECTION shells
   ============================================================ */
.section { position: relative; min-height: 100svh; overflow: hidden; }
.panel { /* split: media | copy */
  display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh;
}
.panel.flip { grid-template-columns: 1fr 1fr; }

/* media side */
.media { position: relative; overflow: hidden; background: var(--wine-deep); }
.media video, .media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.media .grade {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(46,12,26,0.28) 0%, rgba(46,12,26,0) 30%, rgba(46,12,26,0.45) 100%),
    radial-gradient(120% 90% at 70% 20%, rgba(110,20,40,0.12), transparent 60%);
  mix-blend-mode: multiply;
}
.media .ph {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: linear-gradient(135deg, #5a1124, #2e0a14 70%);
  color: rgba(247,241,237,0.42);
  font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
/* Ken Burns — живое движение фото */
.kenburns { animation: kb 18s var(--ease) infinite alternate; }
@keyframes kb {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -2%); }
}

/* copy side */
.copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(80px, 12vh, 150px) var(--gut);
  background: var(--bg);
}
.copy.dark { background: var(--wine-deep); color: var(--cream); }
.copy.dark .kicker { color: var(--rose); }
.copy.dark .accent { color: var(--blush); }

/* ============================================================
   HERO
   ============================================================ */
.hero .panel { grid-template-columns: 0.92fr 1.08fr; }
.hero .copy { justify-content: center; }
.hero__wm { font-size: clamp(140px, 30vw, 460px); bottom: -6%; left: -3%; opacity: .5; }
.hero__name {
  font-size: clamp(72px, 13vw, 168px); position: relative; z-index: 2; color: var(--ink);
}
.hero__tag {
  position: relative; z-index: 2; margin-top: 18px;
  font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(18px, 2.2vw, 30px);
  color: var(--wine);
}
.hero__sub {
  position: relative; z-index: 2; margin-top: 26px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink);
}
.discbtn {
  position: relative; z-index: 2; margin-top: 40px;
  width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  border: 1px solid var(--wine); color: var(--wine); cursor: pointer; background: none;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s; line-height: 1.5;
}
.discbtn:hover { background: var(--wine); color: var(--cream); }
.scrollcue {
  position: absolute; left: var(--gut); bottom: clamp(18px,3vh,30px); z-index: 5;
  display: flex; align-items: center; gap: 12px;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--wine);
}
.scrollcue .bar { width: 44px; height: 1px; background: var(--rose); overflow: hidden; }
.scrollcue .bar::after { content:''; display:block; height:100%; background: var(--wine); transform: translateX(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* ============================================================
   FULL-BLEED MOMENT — сериф поверх видео
   ============================================================ */
.moment { display: grid; }
.moment .media { grid-area: 1/1; }
.moment .over {
  grid-area: 1/1; position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--gut); color: var(--cream);
}
.moment .over h2 { font-size: clamp(40px, 7vw, 116px); max-width: 16ch; text-shadow: 0 2px 40px rgba(20,4,10,.4); }
.moment .over p {
  margin-top: 22px; max-width: 46ch; color: rgba(247,241,237,0.86);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about .panel { grid-template-columns: 1.05fr 0.95fr; }
.about__wm { font-size: clamp(180px, 26vw, 380px); right: -2%; top: 50%; transform: translateY(-50%); opacity: .55; }
.about .copy { position: relative; }
.about h2 { font-size: clamp(36px, 4.6vw, 78px); margin: 20px 0 26px; position: relative; z-index: 2; max-width: 16ch; }
.about h2 u { text-decoration: none; color: var(--wine); border-bottom: 3px solid var(--wine); }
.about p { max-width: 44ch; color: #5a3640; font-size: clamp(15px,1.2vw,18px); position: relative; z-index: 2; }
.about p + p { margin-top: 14px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; position: relative; z-index: 2; }
.tag {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink);
}

/* ============================================================
   SERVICES — editorial list
   ============================================================ */
.services { background: var(--cream); padding: clamp(96px,14vh,150px) var(--gut); display: flex; flex-direction: column; justify-content: center; }
.services__wm { font-size: clamp(140px, 24vw, 360px); right: -2%; bottom: -8%; opacity: .5; }
.services__head { position: relative; z-index: 2; margin-bottom: clamp(28px,5vh,56px); }
.services__head h2 { font-size: clamp(44px, 8vw, 128px); }
.svc__list { position: relative; z-index: 2; border-top: 1px solid var(--line); }
.svc__row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: clamp(14px,3vw,40px);
  align-items: center; padding: clamp(20px,3vw,34px) 0; border-bottom: 1px solid var(--line);
  position: relative; transition: padding-left .45s var(--ease);
}
.svc__row:hover { padding-left: 16px; }
.svc__row::before { content:''; position: absolute; left: -16px; top: 0; bottom: 0; width: 4px; background: var(--wine); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.svc__row:hover::before { transform: scaleY(1); }
.svc__num { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--wine); letter-spacing: .08em; }
.svc__name { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3.4vw, 52px); line-height: 1; }
.svc__name em { font-style: italic; color: var(--wine); }
.svc__desc { max-width: 36ch; color: var(--rose); font-size: 14px; }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.work { background: var(--wine-deep); color: var(--cream); padding: clamp(96px,14vh,150px) var(--gut); display: flex; flex-direction: column; justify-content: center; min-height: 100svh; }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(24px,4vh,48px); position: relative; z-index: 2; }
.work__head h2 { font-size: clamp(44px,8vw,120px); color: var(--cream); }
.work__head h2 em { color: var(--blush); }
.work__head .kicker { color: var(--rose); }
.work__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px,1.2vw,18px); position: relative; z-index: 2; }
.tile { position: relative; overflow: hidden; background: #3a0e18; border: 1px solid var(--line-on); }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile:hover img, .tile:hover video { transform: scale(1.06); }
.tile .ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(247,241,237,0.4);
  background: linear-gradient(135deg,#5a1124,#2e0a14 70%);
  font-family:'Archivo',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px;
  display: flex; justify-content: space-between; align-items: flex-end;
  background: linear-gradient(0deg, rgba(46,10,20,.85), transparent);
  transform: translateY(8px); opacity: 0; transition: .5s var(--ease);
}
.tile:hover .cap { transform: none; opacity: 1; }
.tile .cap b { font-family:'Playfair Display',serif; font-style: italic; font-size: 18px; }
.tile .cap span { font-family:'Archivo',sans-serif; font-weight:700; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--blush); }
.tile.lg{grid-column:span 6;aspect-ratio:4/5} .tile.md{grid-column:span 6;aspect-ratio:4/3}
.tile.sm{grid-column:span 4;aspect-ratio:3/4} .tile.tall{grid-column:span 4;aspect-ratio:2/3}

/* ============================================================
   BRANDS
   ============================================================ */
.brands { background: var(--bg); padding: clamp(96px,14vh,150px) var(--gut); display: flex; flex-direction: column; justify-content: center; min-height: 100svh; }
.brands h2 { font-size: clamp(40px,6vw,100px); margin-bottom: 10px; position: relative; z-index: 2; }
.brands h2 em { color: var(--wine); }
.brands__sub { color: var(--rose); max-width: 52ch; margin-bottom: clamp(28px,5vh,54px); font-size: clamp(15px,1.2vw,18px); position: relative; z-index: 2; }
.brands__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); position: relative; z-index: 2; }
.bcell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); aspect-ratio: 16/7; display: grid; place-items: center;
  font-family:'Archivo',sans-serif; font-weight: 800; font-size: clamp(15px,1.4vw,20px); letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
  transition: background .4s, color .4s; }
.bcell:hover { background: var(--wine); color: var(--cream); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--wine-deep); color: var(--cream); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(96px,14vh,150px) var(--gut); }
.contact__wm { font-size: clamp(150px,26vw,420px); left: -3%; top: 8%; color: rgba(228,207,201,0.1); }
.contact .kicker { color: var(--rose); position: relative; z-index: 2; }
.contact__big { font-size: clamp(56px, 12vw, 220px); margin: 16px 0 clamp(28px,5vh,52px); position: relative; z-index: 2; color: var(--cream); }
.contact__big a { transition: color .3s; }
.contact__big a:hover { color: var(--blush); }
.socials { display: flex; flex-wrap: wrap; gap: 14px; position: relative; z-index: 2; }
.social { display: inline-flex; align-items: center; gap: 10px; font-family:'Archivo',sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 26px; border: 1px solid var(--line-on); border-radius: 100px; color: var(--cream);
  transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease); }
.social:hover { background: var(--cream); color: var(--wine-deep); transform: translateY(-3px); }
.social.is-accent:hover { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.contact__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(18px,3vh,30px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family:'Archivo',sans-serif; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }

/* ============================================================
   REVEAL + MASK ANIMATIONS
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"]{transition-delay:.08s}[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}[data-reveal][data-delay="4"]{transition-delay:.32s}

/* mask-wipe on media panels entering */
.media[data-mask] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.media[data-mask].in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal]{opacity:1;transform:none} .media[data-mask]{clip-path:none} .kenburns{animation:none}
}

/* ============================================================
   MOBILE OVERLAY MENU
   ============================================================ */
.overlay { position: fixed; inset: 0; z-index: 80; background: var(--wine-deep); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gut);
  clip-path: circle(0% at calc(100% - 50px) 50px); transition: clip-path .7s var(--ease); }
.overlay.open { clip-path: circle(150% at calc(100% - 50px) 50px); }
.overlay a { font-family:'Playfair Display',serif; font-size: clamp(36px,10vw,72px); line-height: 1.1; color: var(--cream); }
.overlay a em { font-style: italic; color: var(--blush); }
.overlay .close { position: absolute; top: clamp(16px,3vw,26px); right: var(--gut); width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-on); background: none; color: var(--cream); cursor: pointer; font-size: 22px; }

/* ============================================================
   RESPONSIVE — split → stacked
   ============================================================ */
@media (max-width: 900px) {
  .panel, .hero .panel, .about .panel { grid-template-columns: 1fr; grid-template-rows: 46svh auto; min-height: auto; }
  .media { min-height: 46svh; }
  .copy { min-height: auto; padding-top: clamp(48px,8vh,80px); padding-bottom: clamp(48px,8vh,80px); }
  .hero__wm, .about__wm, .services__wm { opacity: .3; }
  .svc__row { grid-template-columns: 40px 1fr; } .svc__desc { display: none; }
  .tile.lg,.tile.md,.tile.sm,.tile.tall { grid-column: span 12; aspect-ratio: 4/3; }
}
@media (max-width: 560px) { .tile.sm,.tile.tall { grid-column: span 6; } }