/* sayt/static/zhurnal.css серия как номер журнала: обложка раскрывается, внутри — бумажная страница с привычным книжным шрифтом */
.zhurnal { position: relative; max-width: 46rem; margin: 2.5rem auto 4rem; perspective: 2200px; padding: 0 .75rem; }

/* обложка номера: как советский научно-популярный журнал */
.oblozhka-nomera {
  --shir: min(100%, 32rem, 58vh); width: var(--shir); margin: 0 auto;
  position: relative; z-index: 3; aspect-ratio: 3 / 4; background: #e9dfc6; color: #2b2621; cursor: pointer;
  display: grid; grid-template-rows: auto auto 1fr auto auto auto; padding: 1.4rem 1.4rem 1.1rem; overflow: hidden;
  box-shadow: 0 1px 0 #c9bb98, 6px 8px 0 -2px #d8ccad, 12px 16px 40px rgb(0 0 0 / .55);
  transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform 1.5s cubic-bezier(.6, .05, .25, 1), box-shadow 1.5s;
}
.oblozhka-nomera::after { /* корешок и потёртость бумаги */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .18), transparent 4%), radial-gradient(ellipse at 70% 20%, transparent 50%, rgb(120 90 40 / .18));
}
.on-shapka { margin: 0; font: 400 clamp(1.9rem, 7vw, 3rem)/1 "Zagolovok", serif; text-transform: uppercase; letter-spacing: .02em; }
.on-shapka span { color: var(--kirpich); }
.on-vypusk { margin: .3rem 0 .9rem; font: .85rem "Mashinka", monospace; text-transform: uppercase; letter-spacing: .12em;
  border-top: 2px solid #2b2621; border-bottom: 1px solid #2b2621; padding: .25rem 0; }
.oblozhka-nomera img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) contrast(1.05); min-height: 0; }
.on-zag { margin: .7rem 0 0; font: 400 clamp(1.5rem, 5vw, 2.2rem)/1.05 "Zagolovok", serif; color: var(--kirpich); }
.on-mesto { margin: .2rem 0 .6rem; font-size: .95rem; color: #5a4e40; }
.on-niz { display: flex; justify-content: space-between; margin: 0; font: .8rem "Mashinka", monospace; color: #5a4e40; }
.on-otkryt { color: var(--kirpich); animation: manit 2.4s ease-in-out infinite; }
@keyframes manit { 50% { opacity: .45; } }
.oblozhka-nomera:hover { transform: rotateY(-8deg); }

/* раскрытие: обложка уходит влево, под ней — первая страница */
.zhurnal .glava { display: none; }
.zhurnal.otkryt .glava { display: block; animation: stranica 1.2s ease-out .25s both; }
.zhurnal.otkryt .oblozhka-nomera { position: absolute; top: 0; left: 50%; margin-left: calc(var(--shir) / -2); transform: rotateY(-178deg);
  box-shadow: none; pointer-events: none; }
.zhurnal.otkryto-srazu .oblozhka-nomera, .zhurnal.zakryt-oblozhku .oblozhka-nomera { display: none; }
.zhurnal.otkryto-srazu .glava { animation: none; }
@keyframes stranica { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* бумажная страница: светлая бумага, тёмные чернила, книжный шрифт */
.zhurnal .glava {
  max-width: none; margin: 0; padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1.2rem, 6vw, 3.6rem) 2.5rem;
  background: #efe6d0 linear-gradient(90deg, rgb(90 70 40 / .16), transparent 3.5%, transparent 96.5%, rgb(90 70 40 / .08));
  color: #2b2621; box-shadow: 0 1px 0 #c9bb98, 0 18px 50px rgb(0 0 0 / .5); font-size: 1.2rem; line-height: 1.72;
}
.zhurnal .glava a { color: var(--kirpich); }
.zhurnal .glava-shapka { margin-top: 0; border-bottom: 1px solid #c9bb98; padding-bottom: 1.4rem; }
.zhurnal .glava-shapka h1 { color: #2b2621; }
.zhurnal .glava-data { color: #6b5d4c; }
.zhurnal .knopka-muzyka { color: #2b2621; border-color: #8c7c63; }
.zhurnal .glava-shapka + .odin + .podpis-kadra + p::first-letter, .zhurnal .glava-shapka ~ p:first-of-type::first-letter {
  float: left; font: 700 3.6em/.85 "Tekst", serif; color: var(--kirpich); margin: .08em .1em 0 0;
}
.zhurnal .odin, .zhurnal .albom { margin: 2rem 0 .9rem; }
.zhurnal .kadr img { padding: .45rem .45rem 1.6rem; background: #f8f3e6; box-shadow: 0 6px 18px rgb(60 40 20 / .35); }
.zhurnal .odin .kadr { transform: rotate(-.5deg); }
.zhurnal .albom .kadr:nth-child(even) { transform: rotate(.6deg); }
.zhurnal .podpis-kadra { color: var(--kirpich); }
.zhurnal .razdel span::before, .zhurnal .razdel span::after { color: #c9bb98; }
.zhurnal .vkladysh { color: var(--kirpich); border-color: #a89a7c; }
.zhurnal .sosedi { border-color: #c9bb98; }
@media (prefers-reduced-motion: reduce) { .zhurnal.otkryt .oblozhka-nomera { display: none; } }