@import url('https://fonts.googleapis.com/css?family=PT+Serif+Caption|IBM+Plex+Sans');
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght,CRSV@100..900,0&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Geologica:wght,CRSV@100..900,0&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

h1, h2, h3, h4 {
  border:none; font-weight: 700;
  font-family: 'IBM Plex Sans', sans-serif;}
  [onclick] { cursor: pointer;}
h2 { font-size: 2em; text-align: center;}
body {
  padding: 0px ;
  margin: 0px;
  font-family: 'PT Serif Caption', serif;
  background-color: #e9e2ce;
}
p {font-size: 1.5em;}

header h1 {
  font-size: 3.0em;
  font-weight: 900;
}

  h1 span {
    font-size: 0.6em;
    line-height: 0.6em;
  }

header.row { margin: 0px;}

/* linck main sait */
header > div:first-child {
    background-color: #1f1f1f;
    text-align: center;
    color: #ffffff;
    min-height: 50px;
}

    .es-main-site a {
       font-size: 1em;
       color: #ffffff;
       display: block;
       position:relative;;
       z-index: 100;
    }

        .es-main-site a:hover {
           color: #ffffff;
           text-decoration: none;
       }

    .es-main-site img{
       height: 50px;
       margin-right:15px;
    }

a { color: rgb(0, 40, 88) }
a:hover { color: rgb(12, 52, 130); text-decoration: underline;}

footer {
  padding: 10px;
}
footer .ts-visual-small {padding: 0px;}

.ex-edit {color:red; background-color: #ffff00}

/********************************************************************************************
*
* Цветовые схемы
*
********************************************************************************************/
:root {
  --color-main:rgb(0, 125, 129);
  --color-main2:rgb(0, 40, 88);
  --color-low:rgb(218, 243, 255);
  --color-accent: rgb(255, 161, 0);
}

.biographia {
  background-image:url(../data/0/put.png);
  background-repeat:repeat-y;
}

.biographia>div {
  margin-left:150px;
  position:relative;
}

.biographia img, .ex-wave-block img {
  background-color:white;
  border:1px solid var(--color-main);
  padding:10px;
  margin:60px;
  max-width:450px;
  max-height:450px;
  width: auto;
  height: auto;
}

.biographia>div>div:first-child{
  color:var(--color-main);
  font-weight:bold;
}

.biographia>div>div:first-child::before {
  content:"";
  width:24px;
  height:24px;
  position: absolute;
  left:-87px;
  border:4px solid var(--color-main);
  background-color:var(--color-accent);
  border-radius:12px;
}


.biographia li::marker, .biographia span { color: var(--color-main);}



#ex-article {
  position: fixed;
  top:15px;
  left:15px;
  right: 15px;
  bottom: 15px;
  border-radius: 25px;
  background-color: white;
  font-size: 2em;
  z-index: 10;
  padding: 20px;
  box-shadow: 0 0 20px 10px var(--color-main);
}
  #ex-article .ex-article-text {
    overflow-y: scroll;
    height: calc(100vh - 130px);
  }

    #ex-article .ex-article-close {
      background-color: var(--color-main);
      border-radius: 5px;
      color: white;
      font-weight: bold;
      text-align: center;
    }

/**************************************************************************************/

.ex-head {
  min-height: 450px;
  /* background-color: rgb(150, 150, 150);
  background: linear-gradient(rgb(238, 223, 87) 7%, rgb(182, 157, 33),rgb(172, 161, 65) 90%,rgb(130, 101, 13)); */
  background: linear-gradient(33deg,rgb(203, 229, 231) 7%, rgb(138, 204, 208) 26%, rgb(209, 233, 240) 53%, rgb(114, 155, 171) 87%, rgb(208, 226, 230) 90%,rgb(181, 197, 222));
  margin: 0px;
  padding: 25px 0px 0px 15px;
  position:relative;
}
  .ex-head .portret {
    float:left;
  }
  .ex-head .decor {
    width:86px;
    padding:3px;
    filter: drop-shadow(6px 6px 5px black);
  }
  .ex-head h1 {
    color: var(--color-main2);
    margin-bottom: 0px;
    padding-bottom: 25px;
    font-size:4em;
    display:inline-block;
    font-family: "Playfair Display SC", serif;
  }


.head {
  background-color: var(--color-main);
  padding:25px 100px;
}
  .head h1 {
    text-shadow: black 2px 2px 2px;
    color: var(--color-accent);
    font-size:5em;
    margin-top:50px;
    text-align:center;
  }

  /* Внешний контейнер — только позиционирование, без обрезки */
  .ps-cit {
    display: inline-block;
    position: relative;
    margin: 10px 10px 45px 10px; /* снизу запас под хвост */
    float: left;
  }

  /* Внутренний блок — тут и clip-path, и фон, и текст */
  .ps-cit__inner {
    position: relative;
    padding: 20px 25px;
    background-color: var(--color-low);
    font-size: 2em;
    font-family: "Caveat", cursive;
    color: var(--color-main);

    /* Рваный контур с бо́льшим числом точек */
    clip-path: polygon(
      /* верх — зубчатая линия слева направо */
      0% 12%, 4% 3%, 9% 13%, 14% 2%, 20% 12%, 26% 3%, 32% 14%,
      38% 2%, 44% 13%, 50% 3%, 56% 14%, 62% 2%, 68% 13%,
      74% 3%, 80% 14%, 86% 2%, 92% 13%, 97% 4%, 100% 12%,
      /* правый край */
      96% 22%, 100% 32%, 95% 42%, 100% 52%, 96% 62%, 100% 72%,
      95% 82%, 100% 92%, 97% 100%,
      /* низ — зубчатая линия справа налево */
      92% 92%, 86% 100%, 80% 91%, 74% 100%, 68% 91%,
      62% 100%, 56% 90%, 50% 99%, 44% 90%, 38% 100%, 32% 91%,
      26% 100%, 20% 91%, 14% 100%, 8% 91%, 3% 99%, 0% 92%,
      /* левый край */
      4% 82%, 0% 72%, 5% 62%, 0% 52%, 4% 42%, 0% 32%, 5% 22%, 0% 16%
    );

    /* Обводка по контуру clip-path */
    filter:
      drop-shadow(1px 0 0 var(--color-main))
      drop-shadow(-1px 0 0 var(--color-main))
      drop-shadow(0 1px 0 var(--color-main))
      drop-shadow(0 -1px 0 var(--color-main));
  }


  .ps-cit::after {
    content: '';
    position: absolute;
    bottom: -41px;      /* на 6px выше, чтобы перекрыть тёмный */
    left: 8px;       /* сдвиг вправо, чтобы оставить контур */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 54px 20px 0 0; /* внутренний светлый */
    border-color: var(--color-low) transparent transparent transparent;
    z-index: 2;
    rotate: 29deg;
  }

.content {font-size:1.5em; padding:25px 5px;}
.prev-text {
  background-color: var(--color-low);
  box-shadow: black 7px 7px 12px;
}

.navigation { background-color: rgb(217, 237, 255) ; }
.navigation nav a {
  color: var(--color-main);
  display:block;
  font-size: 1.5em;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
.navigation nav img { height:200px;}
.navigation nav a:hover { background-color: rgba(0,0,0,0.1) }



.flex-block {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  clear:both;
  padding-top:25px;
}
  .flex-block>div  {
    width: calc(25% - 10px);
    border: 1px solid var(--color-main);
    padding: 3px;
    margin: 2px;
    font-size:0.75em;
  }
  .flex-block>div>div {
    width: 100%;
    height: 300px;
    background-size: cover;
  }

.ex-wave-block {
  padding: 25px 50px 100px;
}


/******           Раздел 3                *******/
.ex-mem-block img.ex-img {
  width: calc(100% + 30px);
}

.ex-mem-block img.ex-over {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 15px;
  transition: opacity 0.3s ease; /* плавный переход */
}

.ex-mem-block > div > div {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 15px;
  height: 100px;
  background-color: rgba(0,0,0,0.75);
  padding-top: 15px;
  color: var(--color-main);
  font-weight: bold;
  text-align: center;
  font-size: 2em;
  opacity: 0; /* скрыто по умолчанию */
  visibility: hidden; /* дополнительно скрываем */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* плавный переход */
}

.ex-item {
  /* box-shadow: inset 0 0 20px 5px rgba(0, 0, 0, 0.7); */
  /* border: 2px solid rgba(0, 0, 0, 0.3); */
  cursor:pointer;
}

/* При наведении на .ex-item */
.ex-item:hover img.ex-over {
  opacity: 0.3; /* делаем .ex-over полупрозрачным */
}

.ex-item:hover > div {
  opacity: 1; /* показываем текст */
  visibility: visible;
}


/****/

.ex-right{float: right;}
.ex-left{float: left;}


/************************************************************************/
/***********************
*
*
*  Старый код
*
*
*************************/

/* слайдер - карусель */
.ts-foto-list.ex-book-list img {
  cursor: pointer;
  height: 300px;
}

.carousel {
  padding-bottom: 30px;
}

.carousel img {
  margin: auto;
  max-height: 100vh;
  max-width: 100%;
}

  .carousel .carousel-indicators {
    bottom: -5px;
  }

  .carousel .carousel-indicators li {
    border-color: rgb(28, 38, 48);
    border-width: 2px;
  }

/* отдельные стили */
.ex-large {
  font-size: 1.5em;
}

.ex-large-4 {
  font-size: 4em;
}


.ex-button-over {
  position: relative;
}
  .ex-button-over .ts-visual-button {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 140px;
  }


/* Основа оформления*/

blockquote {
  border: none;
  margin: 25px 35px;
  /* margin-top: 30px; */
  font-size: 1.7em;
}

  /* blockquote::before {
    content:open-quote;
    font-size: 1.75em;
    display: inline-block;
    float: left;
    margin-left: -35px;
    margin-top: -15px;
  }

  blockquote::after {
    content: close-quote;
    font-size: 1.75em;
    display: inline-block;
    float: right;
    margin-right: -35px;
    margin-top: -15px;
  } */

@media (max-width: 1200px) {
  .flex-block>div { width: calc(33% - 10px); }
  .biographia img, .ex-wave-block img {max-width: 300px;}
  .ex-head h1 { display: block; text-align: center;}
}
@media (max-width: 992px) {
  .flex-block>div { width: calc(50% - 10px); }
  .biographia img, .ex-wave-block img {float: none;}
}

@media (max-width: 768px) {
  .flex-block>div { width: 100%; }
}