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

:root{
  --bg: #16120f;
  --paper: #e4d0af;
  --paper-2: #f2e7d2;
  --ink: #281d17;
  --gold: #b88a4a;
  --gold-2: #e2c079;
  --shadow: 0 18px 45px rgba(0,0,0,.28);
  --radius: 24px;
  --max: 1120px;
}

html { scroll-behavior: smooth; }

html{
  scrollbar-width:auto;
  scrollbar-color:#8b6230 #d8c19b;
}

body{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(255,220,150,.06), transparent 30%),
    linear-gradient(180deg, #1d1712 0%, #130f0c 100%);
}


/* Толстая стилизованная полоса прокрутки */
::-webkit-scrollbar{
  width:56px;
  height:56px;
  background:#d8c19b;
}

::-webkit-scrollbar-track{
  background:
    linear-gradient(180deg, rgba(73,42,18,.88) 0%, rgba(111,68,31,.92) 6%, rgba(229,204,161,.98) 18%, rgba(209,180,130,.98) 50%, rgba(229,204,161,.98) 82%, rgba(111,68,31,.92) 94%, rgba(73,42,18,.88) 100%);
  border-left:3px solid rgba(82,48,21,.42);
  box-shadow:
    inset 0 0 0 4px rgba(246,233,205,.58),
    inset 0 0 0 10px rgba(122,77,39,.20),
    inset 0 0 24px rgba(84,51,24,.28);
  position: relative;
}

::-webkit-scrollbar-thumb{
  background:
    radial-gradient(circle at center, rgba(255,242,216,.65) 0 10%, transparent 11%),
    radial-gradient(circle at center top 12px, rgba(255,240,212,.35) 0 8%, transparent 9%),
    radial-gradient(circle at center bottom 12px, rgba(78,46,19,.28) 0 8%, transparent 9%),
    linear-gradient(180deg, #5a3517 0%, #8b5a2c 20%, #d4ad72 50%, #8b5a2c 80%, #5a3517 100%);
  border-radius:999px;
  border:8px solid #ead8b8;
  box-shadow:
    inset 0 2px 3px rgba(255,244,221,.55),
    inset 0 -3px 4px rgba(62,35,15,.38),
    0 0 14px rgba(0,0,0,.18);
  min-height:120px;
}

::-webkit-scrollbar-thumb:hover{
  background:
    radial-gradient(circle at center, rgba(255,246,223,.72) 0 10%, transparent 11%),
    linear-gradient(180deg, #68401d 0%, #a66f38 20%, #e3bb7d 50%, #a66f38 80%, #68401d 100%);
}

::-webkit-scrollbar-corner{
  background:#d8c19b;
}


img{
  display:block;
  max-width:100%;
  height:auto;
}

.container{
  width:min(calc(100% - 32px), var(--max));
  margin-inline:auto;
}

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  isolation:isolate;
  overflow:hidden;
  border-bottom:1px solid rgba(226,192,121,.25);
}

.hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.3) 35%, rgba(0,0,0,.78) 100%),
    linear-gradient(90deg, rgba(20,15,12,.58), rgba(20,15,12,.15) 45%, rgba(20,15,12,.58));
  z-index:1;
}

.hero__content{
  position:relative;
  z-index:2;
  padding:64px 0 56px;
  color:#fff4df;
}

.hero__layout{
  position:relative;
  width:100%;
  min-height:clamp(430px, 54vw, 680px);
}

.hero__text{
  position:relative;
  z-index:2;
  max-width:620px;
  width:min(44%, 620px);
  padding-top:clamp(120px, 18vh, 220px);
}

.hero__video{
  position:absolute;
  right:clamp(-260px, -15vw, -110px);
  top:50%;
  transform:translateY(-42%);
  z-index:2;
  width:min(33vw, 500px);
}

.hero__video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,237,195,.28);
  background:rgba(8,8,8,.32);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
}

.hero__video-frame iframe{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  margin:0 0 16px;
  letter-spacing:.04em;
  font-size:1.02rem;
  font-weight:700;
  color:var(--gold-2);
  text-decoration:none;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:.25s ease;
}

.hero__eyebrow:hover{
  color:#fff3d4;
  transform:translateY(-1px);
}

.hero h1{
  margin:0;
  font-size:clamp(2.3rem, 6vw, 5.5rem);
  line-height:.94;
  text-shadow:0 4px 18px rgba(0,0,0,.5);
}

.hero h1 span{
  font-size:.7em;
  display:block;
  margin-top:.14em;
}

.hero__lead{
  max-width:680px;
  margin:18px 0 26px;
  font-size:clamp(1rem, 2vw, 1.35rem);
  color:#f0e0bf;
}

.hero__nav{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  align-items:center;
  width:max-content;
  max-width:100%;
}

.hero__nav a,
.footer a{
  color:#fff8ea;
  text-decoration:none;
  border:1px solid rgba(255,237,195,.34);
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  padding:12px 18px;
  border-radius:999px;
  transition:.25s ease;
}

.hero__nav a:hover,
.footer a:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-1px);
}

.section{
  padding: clamp(52px, 8vw, 88px) 0;
}

.section--paper{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.28), transparent 24%),
    linear-gradient(180deg, #e9dbc1 0%, #dcc6a1 100%);
}

.section--dark{
  background:
    radial-gradient(circle at 50% 0, rgba(226,192,121,.08), transparent 25%),
    linear-gradient(180deg, #1e1712 0%, #120f0d 100%);
}

.section__heading{
  text-align:center;
  max-width:860px;
  margin:0 auto 28px;
}

.section__heading h2{
  margin:0 0 12px;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.05;
}

.section__heading p{
  margin:0;
  font-size:1.06rem;
  line-height:1.7;
}

.section__heading--light{
  color:#fff3d7;
}

.poster-card{
  background:linear-gradient(180deg, rgba(255,248,230,.85), rgba(234,216,182,.94));
  padding:14px;
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  border:1px solid rgba(86,49,24,.12);
  max-width:1000px;
  margin:0 auto;
}

.poster-card--narrow{
  max-width:760px;
}

.poster-card img{
  border-radius:18px;
  width:100%;
}

.notice{
  max-width:920px;
  margin:0 auto 24px;
  background:rgba(255,248,235,.72);
  border:1px solid rgba(106,70,41,.18);
  box-shadow:var(--shadow);
  border-radius:20px;
  padding:18px 20px;
  line-height:1.7;
}

code{
  background:rgba(39,28,20,.08);
  padding:.2em .45em;
  border-radius:8px;
}


.pages-stack{
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:center;
}

.page-full{
  width:100%;
  max-width:1000px;
  margin:0;
  background:linear-gradient(180deg, rgba(255,248,230,.88), rgba(234,216,182,.96));
  padding:14px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(86,49,24,.12);
}

.page-full img{
  width:100%;
  border-radius:18px;
}

.footer{
  color:#f2e3c4;
  border-top:1px solid rgba(226,192,121,.16);
  background:
    linear-gradient(180deg, #120e0b 0%, #0b0907 100%);
}

.footer__inner{
  padding:24px 0 28px;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}

.footer__inner--center{
  min-height:78px;
}

.footer__copy{
  font-size:1.05rem;
  color:#e8d3ac;
  letter-spacing:.02em;
}

.footer p{
  margin:.45rem 0 0;
  color:#ceb792;
}

@media (max-width: 1100px){
  .hero__nav{
    flex-wrap:wrap;
    width:auto;
  }

  .hero__content{
    padding:40px 0 32px;
  }

  .hero__layout{
    min-height:auto;
  }

  .hero__text{
    width:100%;
    max-width:680px;
    padding-top:clamp(70px, 12vh, 140px);
  }

  .hero__video{
    position:static;
    right:auto;
    top:auto;
    transform:none;
    width:min(100%, 760px);
    margin-top:24px;
  }
}

@media (max-width: 720px){
  .hero{
    min-height:72svh;
  

  .text-poem h3{
    text-align:center;
  }

  .text-poem pre{
    text-align:center;
  }
}

  .hero__content{
    padding:40px 0 32px;
  }

  .hero__layout{
    gap:22px;
  }

  .hero__video-frame{
    border-radius:20px;
  }

  .footer__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .hero__nav{
    width:100%;
  }

  .hero__nav a,
  .footer a{
    width:100%;
    text-align:center;
  }

  .hero__video{
    width:100%;
    margin-top:18px;
  }
}


.text-poems{
  display:flex;
  flex-direction:column;
  gap:22px;
  max-width:1000px;
  margin:0 auto;
}

.text-poem{
  background:linear-gradient(180deg, rgba(255,248,230,.92), rgba(234,216,182,.96));
  border:1px solid rgba(86,49,24,.12);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:28px 24px;
}

.text-poem h3{
  margin:0 0 16px;
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  line-height:1.1;
  color:#3c271a;
  text-align:left;
}

.text-poem pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(1.02rem, 1.8vw, 1.28rem);
  line-height:1.8;
  color:var(--ink);
  text-align:left;
}

@media (max-width: 720px){
  .text-poem{
    padding:22px 18px;
    border-radius:20px;
  }

  .text-poem h3{
  margin:0 0 16px;
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  line-height:1.1;
  color:#3c271a;
  text-align:left;
}

  .text-poem pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(1.02rem, 1.8vw, 1.28rem);
  line-height:1.8;
  color:var(--ink);
  text-align:left;
}
}