/* «О музее» - старинный альбом. Каждый ряд «текст + фото» - разворот альбома: два листа сходятся у корешка, из-под листов
   выглядывает кожаная обложка, фотография вклеена на бумажных уголках с лёгким наклоном и «проявляется» при входе в экран
   (один раз; запускает js/omuzee.js - без скриптов и при prefers-reduced-motion фото сразу в полном цвете).
   На телефоне разворот раскрыт сверху вниз: лист с текстом, сгиб, лист с фотографией.
   Бирки на нитках и карта - из каркаса, здесь не трогаются. Разметка страницы - content/o-muzee.html (блоки .sec-duo > .duo). */

.pg-omuzee .sec-duo{padding-top:clamp(30px,5vw,64px);padding-bottom:clamp(34px,5.4vw,70px)}
.pg-omuzee .sec-duo+.sec-duo{padding-top:clamp(6px,1.4vw,18px)}
.pg-omuzee .duo{--cover:11px;--lip:4px;--fold:rgba(58,36,12,.34);--fold2:rgba(58,36,12,.1);
  --sheet:linear-gradient(178deg,#f0e3c0 0%,#e6d6ac 58%,#dccb9c 100%);
  position:relative;z-index:0;gap:0;align-items:stretch}
/* обложка: тёмная кожа с золотой линией тиснения, выглядывает из-под листов */
.pg-omuzee .duo::before{content:"";position:absolute;z-index:-1;left:calc(var(--pad) - var(--cover));right:calc(var(--pad) - var(--cover));top:calc(-1 * var(--cover));bottom:calc(-1 * var(--cover) - 2px);
  background:linear-gradient(162deg,#4d2d15 0%,#32200f 46%,#24140a 100%);
  box-shadow:inset 0 0 0 1px #70501f,inset 0 0 0 3px #2b190b,inset 0 0 0 4px rgba(240,190,98,.5),0 22px 44px rgba(0,0,0,.6)}

/* лист с текстом */
.pg-omuzee .duo-t{background:linear-gradient(0deg,var(--fold) 0,var(--fold2) 12px,rgba(58,36,12,0) 34px),var(--sheet);box-shadow:none;padding:clamp(26px,6vw,58px) clamp(20px,5.4vw,60px) clamp(34px,7vw,64px)}
.pg-omuzee .duo-t::before,.pg-omuzee .duo-f::before{content:"";position:absolute;inset:9px;border:1px solid rgba(90,58,30,.26);pointer-events:none}      /* печатная рамка листа */
.pg-omuzee .duo-t.prose>*{position:relative}
.pg-omuzee .duo-t.prose h2{font-weight:500;color:#160d04;letter-spacing:0}
.pg-omuzee .duo-t.prose h2::after{content:"";display:block;width:min(236px,72%);height:14px;margin-top:.52em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' fill='none' stroke='%235a3a1e' stroke-width='1.1'%3E%3Cline x1='6' y1='7' x2='98' y2='7'/%3E%3Cline x1='142' y1='7' x2='234' y2='7'/%3E%3Cpath d='M98 7q5-6 9 0'/%3E%3Cpath d='M142 7q-5-6-9 0'/%3E%3Ccircle cx='111' cy='7' r='1.5' fill='%235a3a1e' stroke='none'/%3E%3Ccircle cx='129' cy='7' r='1.5' fill='%235a3a1e' stroke='none'/%3E%3Cpath d='M120 1l6 6-6 6-6-6z' fill='%235a3a1e' stroke='none'/%3E%3C/svg%3E") left center/contain no-repeat}
.pg-omuzee .duo-t.prose p{font-size:1.08rem;line-height:1.64;color:#1c1206}
.pg-omuzee .duo-t .act{margin-top:1.5em}

/* вклеенная записка: цитата на отдельном листке, прихваченном двумя уголками. Листок (::before) на 5px меньше самого блока -
   уголки (::after) выступают за его край, но не за край блока */
.pg-omuzee .duo-t.prose blockquote{z-index:0;margin-top:1.3em;padding:23px 25px 25px;border:0;font-family:var(--serif);font-weight:500;font-size:1.36rem;line-height:1.36;color:#1a1005}
.pg-omuzee .duo-t.prose blockquote p{font:inherit;color:inherit}
.pg-omuzee .duo-t.prose blockquote::before{content:"";position:absolute;z-index:-1;inset:5px;background:linear-gradient(176deg,#f6ecd0,#eddfb9);box-shadow:0 1px 0 rgba(255,244,214,.6) inset,0 5px 12px rgba(40,26,8,.28)}
.pg-omuzee .duo-t.prose blockquote::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,#3b2513 0,#28170b 45%,#7a5a2c 45%,#7a5a2c 50%,transparent 50%) left top/26px 26px no-repeat,
             linear-gradient(315deg,#3b2513 0,#28170b 45%,#7a5a2c 45%,#7a5a2c 50%,transparent 50%) right bottom/26px 26px no-repeat}

/* лист с фотографией */
.pg-omuzee .duo-f{position:relative;display:grid;align-content:center;justify-items:center;gap:clamp(20px,3vw,34px);margin:0;
  background:linear-gradient(180deg,var(--fold) 0,var(--fold2) 12px,rgba(58,36,12,0) 34px),var(--sheet);color:var(--ink);
  padding:clamp(34px,8vw,64px) clamp(26px,7vw,64px) clamp(34px,8vw,60px);
  box-shadow:0 var(--lip) 0 -1px #cdbb8c,0 calc(var(--lip) + 1px) 0 -1px #8f7a4b}                                    /* обрез блока листов снизу */
.pg-omuzee .duo-f::after{content:"";display:block;width:min(150px,44%);height:14px;opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' fill='none' stroke='%235a3a1e' stroke-width='1.3'%3E%3Cline x1='6' y1='7' x2='98' y2='7'/%3E%3Cline x1='142' y1='7' x2='234' y2='7'/%3E%3Cpath d='M98 7q5-6 9 0'/%3E%3Cpath d='M142 7q-5-6-9 0'/%3E%3Ccircle cx='111' cy='7' r='1.7' fill='%235a3a1e' stroke='none'/%3E%3Ccircle cx='129' cy='7' r='1.7' fill='%235a3a1e' stroke='none'/%3E%3Cpath d='M120 1l6 6-6 6-6-6z' fill='%235a3a1e' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}
/* отпечаток: светлое поле фотобумаги, тень, наклон; уголки - четыре тёмных бумажных треугольника поверх углов */
.pg-omuzee .duo-f .ph{position:relative;width:100%;max-width:600px;padding:7px;background:linear-gradient(170deg,#f6edd3,#ecdfbb);box-shadow:0 1px 1px rgba(40,26,8,.3),0 9px 18px rgba(40,26,8,.34);transform:rotate(var(--tilt,-1.6deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pg-omuzee .sec-duo[data-sec=istoriya] .ph{--tilt:1.4deg}
.pg-omuzee .sec-duo[data-sec=ekspozicii] .ph{--tilt:-1deg}
.pg-omuzee .duo-f .ph img{border:0;padding:0;background:#d9c9a0}
.pg-omuzee .duo-f .ph::after{content:"";position:absolute;inset:-6px;pointer-events:none;
  background:linear-gradient(135deg,#3d2614 0,#27160a 45%,#7a5a2c 45%,#7a5a2c 50%,transparent 50%) left top/var(--corner,34px) var(--corner,34px) no-repeat,
             linear-gradient(225deg,#3d2614 0,#27160a 45%,#7a5a2c 45%,#7a5a2c 50%,transparent 50%) right top/var(--corner,34px) var(--corner,34px) no-repeat,
             linear-gradient(45deg,#3d2614 0,#27160a 45%,#7a5a2c 45%,#7a5a2c 50%,transparent 50%) left bottom/var(--corner,34px) var(--corner,34px) no-repeat,
             linear-gradient(315deg,#3d2614 0,#27160a 45%,#7a5a2c 45%,#7a5a2c 50%,transparent 50%) right bottom/var(--corner,34px) var(--corner,34px) no-repeat;
  filter:drop-shadow(0 1px 1px rgba(20,12,4,.45))}
@media (hover:hover){.pg-omuzee .duo-f .ph:hover{transform:rotate(0deg) scale(1.012)}}
/* проявка: пока фото не вошло в экран, на бумаге едва заметный отпечаток; дальше плотность и цвет ведёт js/omuzee.js
   (класс dev - скрипт взял фото в работу, done - проявлено). Бледное состояние стоит с первой отрисовки (у html уже есть класс js),
   поэтому цвет не мелькает до запуска скрипта. Страховка: если скрипт так и не пришёл, через 6 с фото проявляется само. */
@media all{
  .js .pg-omuzee .duo-f .ph img:not(.done){opacity:.06;filter:sepia(1) saturate(.2) contrast(.72) brightness(1.2)}
  .js .pg-omuzee .duo-f .ph img:not(.dev):not(.done){animation:alb-safe 1ms 6s forwards}
}
@keyframes alb-safe{to{opacity:1;filter:none}}

@media (min-width:900px){
  .pg-omuzee .duo{--cover:16px;--lip:6px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pg-omuzee .duo-f .ph{--corner:40px;padding:9px}
  .pg-omuzee .duo-f .ph::after{inset:-7px}
  /* сгиб у корешка: внутренние края листов уходят в тень; внешние края - обрез блока листов */
  .pg-omuzee .duo[data-side=r] .duo-t,.pg-omuzee .duo[data-side=l] .duo-f{background:linear-gradient(270deg,var(--fold) 0,var(--fold2) 3.2%,rgba(58,36,12,0) 11%),var(--sheet);
    box-shadow:-2px 0 0 #cdbb8c,-3px 0 0 #8f7a4b,-5px 0 0 #d6c595,-6px 0 0 #8f7a4b,-2px var(--lip) 0 -1px #cdbb8c,-3px calc(var(--lip) + 1px) 0 -1px #8f7a4b}
  .pg-omuzee .duo[data-side=r] .duo-f,.pg-omuzee .duo[data-side=l] .duo-t{background:linear-gradient(90deg,var(--fold) 0,var(--fold2) 3.2%,rgba(58,36,12,0) 11%),var(--sheet);
    box-shadow:2px 0 0 #cdbb8c,3px 0 0 #8f7a4b,5px 0 0 #d6c595,6px 0 0 #8f7a4b,2px var(--lip) 0 -1px #cdbb8c,3px calc(var(--lip) + 1px) 0 -1px #8f7a4b}
  .pg-omuzee .duo-t{padding:clamp(40px,4.4vw,66px) clamp(38px,4.6vw,70px) clamp(44px,4.8vw,70px)}
  .pg-omuzee .duo-f{padding:clamp(40px,4.4vw,66px) clamp(30px,3.3vw,50px)}
  .pg-omuzee .duo-t::before,.pg-omuzee .duo-f::before{inset:14px}
  .pg-omuzee .duo-t.prose p{font-size:1.06rem}
  .pg-omuzee .duo-t.prose blockquote{font-size:1.5rem;padding:27px 31px 29px}
}