/* sayt/static/sayt.css основа сайта: цвета палитры, шрифты, шапка, меню, обложка, текст глав, галереи */
@font-face { font-family: "Zagolovok"; src: url(/static/shrifty/zagolovok.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Tekst"; src: url(/static/shrifty/tekst.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Tekst"; font-weight: 700; src: url(/static/shrifty/tekst-zhirnyy.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Mashinka"; src: url(/static/shrifty/mashinka.ttf) format("truetype"); font-display: swap; }

:root {
  --fon: #1d1b19; --fon-2: #2b2621; --fon-3: #36302a;
  --bumaga: #e6dbc1; --bumaga-tusk: #b9ae96; --ohra: #c69a52; --kirpich: #a4473a;
  --sumerki: #5f7487; --kret: #7e9db0; --yura: #c9773b; --sosna: #3e5a49;
  --shirina: 40rem; --ten: 0 10px 40px rgb(0 0 0 / .45);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fon); color: var(--bumaga);
  font: 1.1875rem/1.65 "Tekst", Georgia, serif; -webkit-font-smoothing: antialiased;
}
body::after { /* зерно плёнки поверх всего */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--ohra); text-underline-offset: .2em; }
a:hover { color: var(--bumaga); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, .logo, .knopka, .glava-nomer, .razdel span, .menu-glavy, .gk-nazvanie {
  font-family: "Zagolovok", "Tekst", serif; font-weight: 400; letter-spacing: .04em;
}

/* шапка и меню */
.shapka {
  position: sticky; top: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 1rem; background: rgb(29 27 25 / .86); backdrop-filter: blur(6px); border-bottom: 1px solid var(--fon-3);
}
.logo { font-size: 1.5rem; text-decoration: none; color: var(--bumaga); text-transform: uppercase; }
.logo span { color: var(--kirpich); }
.knopka-menu, .knopka, .propustit, .knopka-muzyka {
  font: inherit; font-size: 1rem; color: var(--bumaga); background: transparent; cursor: pointer;
  border: 1px solid var(--bumaga-tusk); border-radius: 2px; padding: .45rem .9rem; text-decoration: none; display: inline-block;
}
.knopka { font-size: 1.15rem; padding: .6rem 1.4rem; border-color: var(--ohra); color: var(--ohra); }
.knopka:hover, .knopka-menu:hover { background: var(--ohra); color: var(--fon); }
.menu { position: fixed; inset: 0; z-index: 45; background: rgb(20 18 16 / .97); overflow-y: auto; padding: 4.5rem 1rem 2rem; }
.menu-vnutri { max-width: 34rem; margin: 0 auto; }
.prodolzhit { display: block; margin-bottom: 1.2rem; font-size: 1.2rem; }
.menu-glavy { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 1.35rem; }
.menu-glavy a { display: flex; gap: .8rem; padding: .3rem 0; text-decoration: none; color: var(--bumaga); border-bottom: 1px solid var(--fon-3); }
.menu-glavy a:hover { color: var(--ohra); }
.menu-glavy .nomer { width: 2rem; color: var(--kirpich); text-align: right; }
.menu-glavy li.prochitano a::after, .glava-kartochka.prochitano .gk-nomer::after { content: " ✓"; color: var(--sosna); }
.menu-razdely, .menu-vovne, .podval-ssylki { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: 1rem; }
.skoro { color: var(--bumaga-tusk); opacity: .7; }

/* обложка */
.geroy-oblozhka { position: relative; min-height: 88vh; display: grid; align-items: end; overflow: hidden; }
.geroy-oblozhka > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) sepia(.2); }
.geroy-tekst { position: relative; padding: 2rem 1rem 3rem; max-width: 46rem; margin: 0 auto; width: 100%; }
.geroy-tekst h1 { font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 1; margin: 0 0 .5rem; text-transform: uppercase; }
.geroy-tekst h1 span { color: var(--kirpich); }
.podzag { font-size: 1.3rem; color: var(--ohra); margin: 0 0 1rem; }
.zavyazka { max-width: 32rem; }
.oglavlenie { max-width: 72rem; margin: 0 auto; padding: 3rem 1rem; }
.oglavlenie h2, .galereya h1, .prostaya h1 { font-size: 2.2rem; text-transform: uppercase; margin: 0 0 1.5rem; }
.oglavlenie ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.glava-kartochka a { display: grid; text-decoration: none; color: var(--bumaga); background: var(--fon-2); box-shadow: var(--ten); height: 100%; }
.glava-kartochka img { aspect-ratio: 3/2; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.glava-kartochka a:hover img { filter: grayscale(0) sepia(.35); }
.glava-kartochka span { padding: 0 .9rem; }
.gk-nomer { color: var(--kirpich); font-size: .9rem; padding-top: .7rem !important; text-transform: uppercase; letter-spacing: .1em; }
.gk-nazvanie { font-size: 1.45rem; line-height: 1.15; }
.gk-data, .gk-mesto { font-size: .9rem; color: var(--bumaga-tusk); }
.gk-mesto { padding-bottom: .9rem !important; }

/* глава */
.glava { max-width: var(--shirina); margin: 0 auto; padding: 2rem 1rem 4rem; }
.glava-shapka { text-align: center; margin: 1rem 0 2.5rem; }
.glava-nomer { color: var(--kirpich); text-transform: uppercase; letter-spacing: .18em; margin: 0; }
.glava-shapka h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05; margin: .2rem 0 .6rem; }
.glava-data { color: var(--bumaga-tusk); font-size: 1rem; margin: 0 0 1rem; }
.glava p { margin: 0 0 1em; hyphens: auto; }
.odin, .albom { margin: 2.2rem -1rem 1rem; }
.albom { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.kadr { margin: 0; cursor: zoom-in; }
.kadr img { width: 100%; box-shadow: var(--ten); }
.kadr-port { max-width: 26rem; margin: 0 auto; }
.podpis-kadra { font-size: 1.05rem; font-weight: 700; color: var(--ohra); margin: 0 0 1.2rem; }
.razdel { text-align: center; margin: 3.5rem 0 1rem; }
.razdel span { font-size: 1.6rem; color: var(--kirpich); }
.razdel span::before, .razdel span::after { content: "—"; margin: 0 .8rem; color: var(--fon-3); }
.vkladysh { font: 1rem "Mashinka", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--ohra); border-top: 1px dashed var(--bumaga-tusk); padding-top: 1.5rem; margin-top: 4rem; }
.sosedi { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--fon-3); }
.zamok { border: 1px solid var(--kirpich); padding: 1.5rem; text-align: center; margin: 3rem 0; background: var(--fon-2); }
.zamok-zag { font-family: "Zagolovok", serif; font-size: 1.6rem; color: var(--kirpich); }

/* галереи, простые страницы, подвал */
.galereya, .prostaya { max-width: 72rem; margin: 0 auto; padding: 3rem 1rem; }
.prostaya { max-width: var(--shirina); min-height: 60vh; }
.galereya ul { list-style: none; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.vlozhenie { background: var(--fon-2); padding: .8rem; box-shadow: var(--ten); }
.vl-kartinki { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.vlozhenie p { font-size: .95rem; margin: .8rem 0 .4rem; }
.podval { border-top: 1px solid var(--fon-3); padding: 2rem 1rem 6rem; text-align: center; font-size: .9rem; color: var(--bumaga-tusk); }
.podval-ssylki { justify-content: center; }
.nahodka-toast { position: fixed; left: 50%; top: 4.5rem; transform: translateX(-50%); z-index: 60; background: var(--fon-2); border: 1px solid var(--yura); padding: .7rem 1.2rem; box-shadow: var(--ten); font-size: 1rem; }
.prosmotr-kadra { position: fixed; inset: 0; z-index: 70; background: rgb(10 9 8 / .95); display: grid; place-items: center; cursor: zoom-out; padding: 1rem; }
.prosmotr-kadra img { max-height: 92vh; width: auto; }