/* Рассказ о золотистой плакучей вербе (Salix × sepulcralis ‘Chrysocoma’): окно с четырьмя слайдами, открывается нажатием на латинское название под вербой.
   Окно стоит справа от главного текста, картина и главный текст остаются видны. Слайды листаются прокруткой внутри окна (scroll-snap),
   страница при этом не двигается. Фотографии — Wikimedia Commons, авторы и лицензии — в окне #avtory. Код — rasskaz.js. */
#spravka,#avtory,#polno{--bum:#FAFCF2;--zel:#1B2E0E;--txt:#2b3a22;--tih:#5b6a4c;--lin:rgba(60,90,30,.16);--sans:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--serif:"New York",ui-serif,Georgia,"Times New Roman",serif}
#spravka{position:fixed;margin:0;inset:3vh 2.5vw 3vh auto;width:clamp(44rem,calc(90.5vw - 27rem),70rem);height:94vh;max-width:none;max-height:none;
  border:0;padding:0;border-radius:22px;background:var(--bum);color:var(--txt);overflow:hidden;box-shadow:0 30px 80px rgba(20,40,10,.32),0 0 0 1px rgba(60,90,30,.08)}
#spravka::backdrop{background:rgba(30,50,30,.12)}
#spravka[open]{animation:rasVhod .5s cubic-bezier(.2,.7,.2,1)}
@keyframes rasVhod{from{opacity:0;translate:0 14px}}

/* лента слайдов: прокручивается только она, до страницы прокрутка не доходит */
.ras{position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:0}
.ras::-webkit-scrollbar{display:none}
.sl{position:relative;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;
  gap:clamp(1.6rem,3vw,3rem);padding:clamp(2rem,6vh,3.6rem) clamp(4.6rem,6vw,5.6rem) clamp(2rem,6vh,3.6rem) clamp(2rem,3.8vw,3.6rem)}
.sl+.sl::before{content:"";position:absolute;top:0;left:clamp(2rem,3.8vw,3.6rem);right:clamp(4.6rem,6vw,5.6rem);border-top:1px solid var(--lin)}
.s2{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.s2 .kol{order:-1}

/* текст */
.sl .mt{font:600 .7rem/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:#6e7f52}
.sl h2{margin-top:.95rem;font:italic 400 clamp(2rem,3vw,2.75rem)/1.04 var(--serif);color:var(--zel);letter-spacing:-.02em;text-wrap:balance}
.sl .pod{margin-top:.5rem;font:italic 400 clamp(1.05rem,1.25vw,1.2rem)/1.3 var(--serif);color:#4a5a3a}
.sl .ab{margin-top:1.35rem}
.sl .ab p{margin-top:.8rem;font:400 clamp(.93rem,1vw,1rem)/1.6 var(--sans);color:var(--txt);text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
.sl .ab p:first-child{margin-top:0}
.sl .ab i{font-family:var(--serif)}

/* фотографии: рамка держит пропорцию, снимок заполняет её без искажения, края обрезаются */
.kol{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.kol figure{margin:0;display:flex;flex-direction:column;gap:.7rem}
.ram{position:relative;width:100%;aspect-ratio:4/5;max-height:calc(94vh - 16rem);border-radius:16px;overflow:hidden;background:#e3e9d4;box-shadow:0 18px 40px rgba(30,60,20,.18),0 0 0 1px rgba(30,60,20,.06)}
.ram img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:opacity .8s ease}
.ram img[data-k]:not(.on){opacity:0}
.kol figcaption{font:italic 400 .9rem/1.45 var(--serif);color:var(--tih)}
.kol figcaption span[data-k]:not(.on){display:none}
/* автор и лицензия — мелким светлым текстом поверх каждого снимка (слово владельца 2026-11-12); полный список — в окне «Авторы фотографий» */
.ram .prava{position:absolute;left:.6rem;right:.6rem;bottom:.45rem;text-align:right;font:400 .62rem/1.3 var(--sans);color:rgba(255,255,255,.86);
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.35);transition:opacity .8s ease}
.ram .prava a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:2px}
.ram .prava[data-k]:not(.on){opacity:0;visibility:hidden}

/* переключатель родительских видов на первом слайде */
.pere{display:flex;padding:3px;border:0;margin:0;border-radius:999px;background:rgba(58,90,26,.08);box-shadow:inset 0 0 0 1px var(--lin)}
.pere legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pere label{position:relative;flex:1;text-align:center;padding:.45rem .75rem;border-radius:999px;font:500 .76rem/1.2 var(--sans);color:#3c4a2e;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.pere label i{font-family:var(--serif);font-size:.88rem}
.pere input{position:absolute;opacity:0;pointer-events:none}
.pere label:has(input:checked){background:#fff;color:var(--zel);box-shadow:0 1px 3px rgba(30,60,20,.18)}
.pere label:has(input:focus-visible){outline:2px solid #A9CE55;outline-offset:2px}

/* второй слайд: три числа под снимком */
.cif{display:flex;gap:.6rem 0;margin:.2rem 0 0}
.cif div{display:flex;flex-direction:column-reverse;padding:0 clamp(.7rem,1vw,1.1rem);border-left:1px solid var(--lin)}
.cif div:first-child{padding-left:0;border:0}
.cif dd{margin:0;font:italic 400 clamp(1.1rem,1.3vw,1.45rem)/1.05 var(--serif);color:var(--zel);white-space:nowrap}
.cif dt{margin-top:.3rem;font:500 .7rem/1.2 var(--sans);white-space:nowrap;color:var(--tih)}
.prim{font:400 .74rem/1.4 var(--sans);color:var(--tih)}

/* третий слайд: четыре времени года, отмечено то, что на снимке */
.god{display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:0;list-style:none;font:500 .78rem/1.2 var(--sans);color:var(--tih);text-align:center}
/* знак времени года — веточка с тремя листьями в оттенке сезона (замечание владельца 2026-11-12; был одиночный листик) */
.god li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding-top:2.3rem;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M16 32Q14.5 24 16 14M16 20L14 17.5M16 20L18 17.5%22 fill=%22none%22 stroke=%22%237a5a3a%22 stroke-width=%221.7%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") 50% 0/2.1rem 2.1rem no-repeat}
.god li::before{content:"";position:absolute;left:50%;top:0;width:2.1rem;height:2.1rem;margin-left:-1.05rem;background:var(--c);filter:drop-shadow(0 1px 0 rgba(40,60,20,.25));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M16 15Q10.5 8 16 0Q21.5 8 16 15ZM15 19Q5 19 1 9Q12 9 15 19ZM17 19Q27 19 31 9Q20 9 17 19Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M16 15Q10.5 8 16 0Q21.5 8 16 15ZM15 19Q5 19 1 9Q12 9 15 19ZM17 19Q27 19 31 9Q20 9 17 19Z%22/%3E%3C/svg%3E") center/contain no-repeat}
.god .tut{color:var(--zel);font-weight:650}
.god small{margin-top:-.2rem;font:400 .68rem/1.2 var(--sans);color:var(--tih)}

/* четвёртый слайд: широкий снимок сверху, текст под ним */
.s4{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(.9rem,2.2vh,1.6rem);padding-top:clamp(1.6rem,4.5vh,3.4rem);padding-bottom:clamp(2.4rem,5vh,3.6rem)}
.s4 .ram{aspect-ratio:21/9;max-height:29vh}
.s4 .ab p{font-size:clamp(.9rem,.95vw,.98rem);line-height:1.55}
.s4 .kol{order:-1}
.s4 .ab{columns:2 15rem;column-gap:2.2rem;margin-top:.9rem}
.s4 .ab p,.s4 .ab p:first-child{margin:0 0 .75rem}
.s4 .shap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.4rem}
.s4 .shap .mt{flex-basis:100%}
/* ссылка на авторов — в нижнем поле слайда, места в тексте не занимает */
.avt{position:absolute;right:clamp(4.6rem,6vw,5.6rem);bottom:clamp(.8rem,2vh,1.3rem);font:500 .76rem/1.2 var(--sans);color:var(--tih);text-decoration:underline;text-decoration-color:var(--lin);text-underline-offset:3px;cursor:pointer}
.avt:hover{color:var(--zel);text-decoration-color:currentColor}
.avt:focus-visible,.tchk button:focus-visible,.zakr:focus-visible,#avtory a:focus-visible{outline:2px solid #A9CE55;outline-offset:3px;border-radius:4px}

/* счётчик и точки справа, кнопка «Закрыть» сверху */
.tchk{position:absolute;z-index:2;right:1.1rem;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.sch{margin-bottom:.4rem;font:600 .68rem/1 var(--sans);letter-spacing:.06em;color:var(--tih);font-variant-numeric:tabular-nums;white-space:nowrap}
.tchk button{display:grid;place-items:center;width:1.6rem;height:1.6rem;padding:0;border:0;background:none;cursor:pointer}
.tchk button::before{content:"";width:6px;height:6px;border-radius:3px;background:rgba(40,70,20,.28);transition:height .35s cubic-bezier(.2,.7,.2,1),background .3s}
.tchk button:hover::before{background:rgba(40,70,20,.55)}
.tchk button[aria-current="true"]::before{height:18px;background:var(--zel)}
.zakr{position:absolute;z-index:2;top:1rem;right:1rem;display:grid;place-items:center;width:2.2rem;height:2.2rem;padding:0;border:0;border-radius:50%;background:rgba(58,90,26,.08);color:var(--zel);font:400 1.35rem/1 var(--sans);cursor:pointer;transition:background .2s}
.zakr:hover{background:rgba(58,90,26,.16)}

/* слайд появляется: текст и снимок проступают и чуть поднимаются. Прячем только когда работает код, иначе текст остался бы невидимым */
.ras.zhivo .sl .tx>*,.ras.zhivo .sl .kol{transition:opacity .75s ease,translate .75s cubic-bezier(.2,.7,.2,1)}
.ras.zhivo .sl:not(.vid) .tx>*,.ras.zhivo .sl:not(.vid) .kol{opacity:0;translate:0 14px}
.ras.zhivo .sl .tx>:nth-child(2){transition-delay:.06s}
.ras.zhivo .sl .tx>:nth-child(3){transition-delay:.1s}
.ras.zhivo .sl .tx>:nth-child(n+4){transition-delay:.15s}
.ras.zhivo .sl .kol{transition-delay:.12s}

/* авторы фотографий */
#avtory{margin:auto;border:0;padding:2rem 2.2rem 1.6rem;border-radius:18px;width:min(42rem,92vw);max-height:86vh;overflow-y:auto;overscroll-behavior:contain;background:var(--bum);color:var(--txt);box-shadow:0 30px 80px rgba(20,40,10,.4);font:400 .92rem/1.5 var(--sans)}
#avtory::backdrop{background:rgba(30,50,30,.25)}
#avtory h2{font:italic 400 1.9rem/1.1 var(--serif);color:var(--zel);letter-spacing:-.01em}
#avtory ol{margin:1.2rem 0 0;padding:0;list-style:none}
#avtory li{padding:1rem 0;border-top:1px solid var(--lin)}
#avtory li b{display:block;font:italic 500 1.08rem/1.3 var(--serif);color:var(--zel)}
#avtory dl{display:grid;grid-template-columns:max-content 1fr;gap:.2rem 1rem;margin:.5rem 0 0}
#avtory dt{color:var(--tih)}
#avtory dd{margin:0;overflow-wrap:anywhere}
#avtory a{color:#3A5A1A;text-underline-offset:2px}
#avtory form{margin-top:1rem;text-align:right}
#avtory .btn{border:0;cursor:pointer}

/* телефон и узкое окно: окно во весь экран, снимок над текстом, длинный слайд прокручивается целиком, прежде чем придёт следующий */
@media (max-width:820px){
  #spravka{inset:0;width:100%;height:100%;height:100dvh;border-radius:0}
  .ras{scroll-snap-type:y proximity}
  .sl,.s2,.s4{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:1.4rem;padding:4.4rem 1.25rem 2.6rem;scroll-snap-stop:normal}
  .sl+.sl::before{left:1.25rem;right:1.25rem}
  .kol,.s2 .kol{order:-1}
  .ram{aspect-ratio:4/3;max-height:44vh}
  .s4 .ram{aspect-ratio:3/2}
  .s4 .ab{columns:auto}
  .s4 .ab p{font-size:1rem}
  .avt{position:static;display:inline-block;margin-top:1.2rem}
  .sl .ab p{font-size:1rem}
  .tchk{top:0;left:0;right:0;translate:none;flex-direction:row;justify-content:flex-start;padding:1.1rem 1.25rem 1.4rem;background:linear-gradient(var(--bum) 72%,rgba(250,252,242,0))}
  .zakr{z-index:3}
  .sch{margin:0 .4rem 0 0}
  .tchk button::before{width:6px;height:6px}
  .tchk button[aria-current="true"]::before{width:18px;height:6px}
}
@media (prefers-reduced-motion:reduce){
  #spravka[open]{animation:none}
  .ras{scroll-behavior:auto}
  .ram img,.ras.zhivo .sl .tx>*,.ras.zhivo .sl .kol,.tchk button::before{transition:none}
  .ras.zhivo .sl:not(.vid) .tx>*,.ras.zhivo .sl:not(.vid) .kol{opacity:1;translate:none}
}

/* снимок целиком по нажатию на фото, без обрезки по рамке (слово владельца 2026-11-12); нажатие в любом месте или Escape закрывает */
.ram{cursor:zoom-in}
.ram:focus-visible{outline:3px solid #A9CE55;outline-offset:3px}
#polno{margin:0;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:clamp(1rem,3vw,2.5rem);background:transparent;cursor:zoom-out}
#polno[open]{display:flex;align-items:center;justify-content:center;animation:rasVhod .35s cubic-bezier(.2,.7,.2,1)}
#polno::backdrop{background:rgba(10,18,8,.94)}
#polno figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:100%}
#polno img{display:block;max-width:100%;max-height:calc(100vh - 7.5rem);width:auto;height:auto;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#polno figcaption{max-width:52rem;text-align:center;font:italic 400 .95rem/1.45 var(--serif);color:rgba(250,252,242,.9)}
#polno figcaption small{display:block;margin-top:.3rem;font:400 .72rem/1.3 var(--sans);color:rgba(250,252,242,.66)}
#polno figcaption a{color:inherit;text-underline-offset:2px}
#polno .zakr{position:fixed;background:rgba(250,252,242,.16);color:#FAFCF2}
#polno .zakr:hover{background:rgba(250,252,242,.28)}
@media (prefers-reduced-motion:reduce){#polno[open]{animation:none}}