/* ==========================================================================
   THE CROSS OF PEACE — home, screens 1–3
   Правило проекта: золото живёт только в самом произведении.
   Интерфейс — белый, серый, ivory. Никаких золотых акцентов в UI.
   ========================================================================== */

:root{
  --ink:#08080a;
  --paper:#efe9df;
  --paper-ink:#23201c;
  --light:#f7f4ef;

  --display:"Cormorant Garamond","Iowan Old Style","Times New Roman",serif;
  --ui:"Jost","Futura","Avenir Next","Helvetica Neue",-apple-system,"Segoe UI",sans-serif;

  --screen:100vh;
  --pad-x:clamp(20px,4.2vw,68px);
  --pad-y:clamp(18px,3.2vh,40px);

  --ease:cubic-bezier(.22,.61,.36,1);
}
@supports (height:100svh){ :root{ --screen:100svh } }

*,*::before,*::after{ box-sizing:border-box }

html{ background:var(--ink); -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--light);
  font-family:var(--ui);
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100% }

a{ color:inherit; text-decoration:none }

:focus-visible{ outline:1px solid rgba(255,255,255,.75); outline-offset:6px }

.manifesto :focus-visible{ outline-color:rgba(35,32,28,.75) }

.skip-link{
  position:absolute; left:50%; top:-100px; z-index:99; transform:translateX(-50%);
  padding:12px 20px; background:#fff; color:#111;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.skip-link:focus{ top:12px }

/* --- экраны ------------------------------------------------------------- */

.screen{
  position:relative;
  min-height:var(--screen);
  width:100%;
  overflow:hidden;
}

/* =========================================================================
   1 — HERO
   ========================================================================= */

.hero{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:#050506;
}

.hero__media{ position:absolute; inset:0 }

.hero__plate{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 46%;
  display:block;
}

/* затемнение и виньетка живут между интерьером и крестом — крест не темнеет */
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(118% 88% at 50% 34%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 52%, rgba(2,2,4,.88) 100%),
    linear-gradient(to bottom, rgba(4,4,6,.94) 0, rgba(4,4,6,.55) 9%, rgba(4,4,6,0) 22%),
    linear-gradient(to top, rgba(4,4,6,.72) 0, rgba(4,4,6,0) 34%);
}

.hero__cross{
  position:absolute;
  top:0; left:50%;
  height:78%; width:auto; max-width:none;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
}

/* мягкая тень под заголовком, чтобы текст не спорил с балкой креста */
.hero__base{
  position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to top, rgba(3,3,5,.86) 0, rgba(3,3,5,.42) 42%, rgba(3,3,5,0) 100%);
}

/* верхняя панель */
.topbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:var(--pad-y) var(--pad-x);
  z-index:3;
}
.hero .topbar{ position:absolute; inset:0 0 auto 0 }
.page .topbar{ position:relative }

.sponsors{ display:flex; flex-direction:column; gap:10px; min-width:0 }

.sponsors__label{
  font-size:clamp(8px,.62vw,9.5px);
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(247,244,239,.42);
  padding-left:2px;
}

.sponsors__marks{ display:flex; align-items:center; gap:clamp(14px,1.5vw,24px) }
.sponsors__marks img{
  height:clamp(24px,2.5vw,38px); width:auto; display:block;
  opacity:.8;
}
.sponsors__sep{ width:1px; align-self:stretch; background:rgba(247,244,239,.22) }

/* навигация */
.nav{ display:flex; align-items:center; gap:clamp(20px,2.6vw,46px) }

.nav__list{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,42px);
  margin:0; padding:0; list-style:none;
}

.nav__link,
.lang__current,
.lang__list a{
  font-size:clamp(10px,.8vw,12.5px);
  font-weight:300;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(247,244,239,.86);
  transition:color .4s var(--ease);
}
.nav__link:hover,.lang__list a:hover{ color:#fff }

.nav__link{ position:relative; padding-bottom:3px }
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1) }

/* переключатель языка — <details>, работает и без JS */
.lang{ position:relative }
.lang__current{
  display:flex; align-items:center; gap:7px;
  cursor:pointer; list-style:none;
}
.lang__current::-webkit-details-marker{ display:none }
.lang__current::after{
  content:""; width:6px; height:6px; margin-top:-3px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .4s var(--ease);
}
.lang[open] .lang__current::after{ transform:rotate(-135deg); margin-top:2px }

.lang__list{
  position:absolute; right:0; top:calc(100% + 16px); z-index:5;
  margin:0; padding:14px 20px; list-style:none;
  display:grid; gap:11px;
  min-width:150px;
  background:rgba(8,8,10,.92);
  backdrop-filter:blur(14px);
  border:1px solid rgba(247,244,239,.14);
}
.lang__list a{ display:block; white-space:nowrap }
.lang__list [aria-current="true"]{ color:#fff }

/* заголовок */
.hero__title{
  position:relative; z-index:2;
  text-align:center;
  padding:0 var(--pad-x) clamp(58px,11vh,104px);
}

.hero__title h1{
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(27px,4.6vw,73px);
  line-height:1.04;
  letter-spacing:.135em;
  text-transform:uppercase;
  text-indent:.135em;
  color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}

.hero__author{
  margin:clamp(12px,1.6vh,20px) 0 0;
  font-size:clamp(10px,1.02vw,15px);
  font-weight:300;
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  color:rgba(247,244,239,.78);
}

/* индикатор прокрутки */
.scroll-cue{
  position:absolute; left:50%; bottom:clamp(20px,3.4vh,34px);
  z-index:3;
  transform:translateX(-50%);
  display:block; padding:10px;
  color:rgba(247,244,239,.5);
  transition:color .4s var(--ease);
}
.scroll-cue:hover{ color:rgba(247,244,239,.95) }
.scroll-cue svg{ display:block; width:clamp(16px,1.35vw,21px); height:auto }
.scroll-cue svg path{ animation:cue 3.4s var(--ease) infinite }

@keyframes cue{
  0%,72%,100%{ transform:translateY(0); opacity:.85 }
  36%{ transform:translateY(4px); opacity:1 }
}

/* появление первого экрана — очень медленное, без движения */
.hero__media,.hero__cross{ animation:fade 2.4s var(--ease) both }
.hero__title{ animation:fade 2.2s var(--ease) .55s both }
.topbar{ animation:fade 1.8s var(--ease) 1.15s both }
.scroll-cue{ animation:fade 1.6s var(--ease) 1.65s both }

@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

/* =========================================================================
   2 — MANIFESTO
   ========================================================================= */

.manifesto{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(60px,12vh,140px) var(--pad-x);
  background:var(--paper) url("/assets/img/manifesto-light.jpg") center/cover no-repeat;
  color:var(--paper-ink);
  text-align:center;
}

@media (max-width:820px){
  .manifesto{ background-image:url("/assets/img/manifesto-light-800.jpg") }
}

.manifesto__inner{ max-width:min(1040px,86vw) }

.manifesto__statement{
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(19px,3vw,45px);
  line-height:1.45;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.manifesto__statement span{ display:block }

.manifesto__rule{
  display:block;
  width:clamp(48px,4.4vw,74px); height:1px;
  margin:clamp(34px,5.4vh,62px) auto clamp(30px,4.8vh,54px);
  background:rgba(35,32,28,.45);
}

.manifesto__note{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(13px,1.28vw,20px);
  line-height:1.8;
  color:rgba(35,32,28,.78);
}
.manifesto__note span{ display:block }

/* =========================================================================
   3 — HUMAN
   ========================================================================= */

.human{ background:#0b0a09 }

.human__media,
.human__media img{ position:absolute; inset:0; width:100%; height:100% }

.human__media img{ object-fit:cover; object-position:50% 38%; display:block }

.human::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(6,5,4,.82) 0, rgba(6,5,4,.22) 32%, rgba(6,5,4,0) 58%),
    linear-gradient(to right, rgba(6,5,4,.46) 0, rgba(6,5,4,0) 44%);
  pointer-events:none;
}

.human__caption{
  position:absolute; z-index:2;
  left:var(--pad-x); right:var(--pad-x);
  bottom:clamp(40px,8vh,88px);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,1.8vh,20px);
}

.human__place{
  margin:0;
  font-size:clamp(11px,1.12vw,15px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(247,244,239,.95);
}

.human__link{
  display:inline-flex; align-items:center; gap:.7em;
  padding-bottom:5px;
  font-size:clamp(10px,.92vw,13px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(247,244,239,.78);
  border-bottom:1px solid rgba(247,244,239,.28);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.human__link:hover{ color:#fff; border-color:rgba(247,244,239,.75) }
.human__arrow{ transition:transform .45s var(--ease) }
.human__link:hover .human__arrow{ transform:translateX(5px) }


/* =========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ — светлая тема, та же типографика
   ========================================================================= */

.page{
  display:flex; flex-direction:column;
  min-height:var(--screen);
  /* верх кадра приглушён, чтобы шапка не падала на витраж */
  background:
    linear-gradient(to bottom, rgba(239,233,223,.94) 0, rgba(239,233,223,.55) 9%, rgba(239,233,223,0) 20%),
    url("/assets/img/manifesto-light.jpg") center/cover no-repeat,
    var(--paper);
  color:var(--paper-ink);
}

.wordmark{
  font-size:clamp(10px,.82vw,12.5px);
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(35,32,28,.9);
  padding-top:2px;
}

.page .nav__link,
.page .lang__current,
.page .lang__list a{ color:rgba(35,32,28,.7) }
.page .nav__link:hover,
.page .lang__list a:hover{ color:var(--paper-ink) }
.page .nav__link[aria-current="page"]{ color:var(--paper-ink) }

.page .lang__list{
  background:rgba(247,244,239,.96);
  border-color:rgba(35,32,28,.16);
}

.page__main{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(60px,14vh,150px) var(--pad-x) clamp(80px,16vh,170px);
  text-align:center;
}

.page__inner{ max-width:min(760px,86vw) }

.page__title{
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(28px,4.4vw,66px);
  line-height:1.08;
  letter-spacing:.11em;
  text-indent:.11em;
  text-transform:uppercase;
}

.page__note{
  margin:0 0 clamp(34px,5vh,54px);
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(13px,1.28vw,20px);
  color:rgba(35,32,28,.7);
}

.page__back{
  display:inline-flex; align-items:center; gap:.7em;
  padding-bottom:5px;
  font-size:clamp(10px,.86vw,12.5px);
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(35,32,28,.72);
  border-bottom:1px solid rgba(35,32,28,.24);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.page__back:hover{ color:var(--paper-ink); border-color:rgba(35,32,28,.6) }
.page__arrow{ transition:transform .45s var(--ease) }
.page__back:hover .page__arrow{ transform:translateX(-5px) }

.page__main .manifesto__rule{ margin:clamp(30px,4.6vh,50px) auto clamp(26px,4vh,42px) }

/* =========================================================================
   MOBILE — композиция пересобрана, а не обрезана
   ========================================================================= */

@media (max-aspect-ratio:4/5){

  /* крест крупнее и выше: на телефоне важна фигура, а не размах перекладины */
  .hero__cross{ height:auto; width:186%; top:clamp(58px,10vh,104px) }
  .hero__plate{ object-position:50% 42% }

  /* шапка распадается: меню сверху, партнёры — внизу экрана */
  .hero .topbar{ position:static; padding:0 }

  .hero .nav{
    position:absolute; z-index:3;
    top:var(--pad-y); left:var(--pad-x); right:var(--pad-x);
  }
  .nav{ flex-direction:column; align-items:center; gap:12px }
  .nav__list{ flex-wrap:wrap; justify-content:center; gap:9px clamp(13px,4vw,20px) }
  .nav__link{ font-size:9.5px; letter-spacing:.15em }
  .lang__current{ font-size:9.5px; letter-spacing:.15em }
  .lang__list{ right:auto; left:50%; transform:translateX(-50%); top:calc(100% + 12px) }

  .hero .sponsors{
    position:absolute; z-index:3;
    left:var(--pad-x); right:var(--pad-x); bottom:calc(var(--pad-y) + 34px);
    align-items:center; gap:8px;
  }
  .sponsors__label{ font-size:8px }
  .sponsors__marks img{ height:21px }

  .hero__title{ padding-bottom:clamp(128px,20vh,168px) }
  .hero__title h1{ letter-spacing:.1em; text-indent:.1em }
  .hero__base{ height:58% }
  .scroll-cue{ bottom:6px }

  /* авторская разбивка манифеста на три строки должна сохраняться и на телефоне */
  .manifesto__statement{ font-size:clamp(15px,4.3vw,45px); letter-spacing:.03em }
  .manifesto__note{ font-size:clamp(12px,3.4vw,20px) }

  .page .topbar{ flex-direction:column; align-items:center; gap:16px }
  .page__main{ padding-top:clamp(40px,8vh,80px) }

  .human__media img{ object-position:50% 50% }
  .human__caption{ flex-direction:column; align-items:flex-start; gap:15px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media print{
  .screen{ min-height:auto; page-break-inside:avoid }
  .hero__veil,.hero__base,.scroll-cue{ display:none }
}