/* shared by every page: tokens, fonts, the sliding top bar, page heads, footer */
/* osifont draws Э and Ё/ё as placeholder boxes: those three fall back to Golos */
@font-face{font-family:"GOST";src:url(../fonts/osifont.ttf) format("truetype");font-display:swap;unicode-range:U+0000-0400,U+0402-042C,U+042E-0450,U+0452-FFFF}
:root{
  --sinka:#15395E; --sinka-3:#0F2B47;
  --line:#E3ECF4; --line-dim:rgba(227,236,244,.18); --line-mid:rgba(227,236,244,.55);
  --vatman:#F1F2EE; --vatman-2:#E2E4DF; --graphite:#1F2328; --steel:#5E6873; --concrete:#A9A79F;
  --current:#E0531F; --oil:#D9A441;
  --gost:"GOST","Golos Text",sans-serif;
  --text:"Golos Text",system-ui,sans-serif;
  --bind:56px; --edge:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--current) var(--sinka);scroll-behavior:smooth}
body{background:var(--vatman);color:var(--graphite);font:400 1.125rem/1.6 var(--text);overflow-x:hidden}
::selection{background:var(--current);color:#fff}
:focus-visible{outline:2px solid var(--current);outline-offset:3px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- sliding top bar (built by common.js) ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:40;background:var(--sinka);color:var(--line);border-bottom:2px solid var(--line);
  transform:translateY(-105%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.topbar.show{transform:none}
.topbar .in{display:flex;align-items:center;gap:2rem;padding:.75rem clamp(1rem,3vw,2.5rem) .75rem calc(var(--bind) + 1rem)}
.mark{display:flex;align-items:center;gap:.8rem}
.bubble{width:40px;height:40px;border:2px solid var(--current);border-radius:50%;display:grid;place-items:center;font:italic 1.125rem/1 var(--gost);flex:none}
.mark span:last-child{font:italic 1.125rem/1.1 var(--gost);letter-spacing:.04em}
.nav{display:flex;gap:1.7rem;margin-left:auto;font:500 .875rem/1 var(--text)}
.nav a{padding:.45rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--current)}
.lang{display:flex;border:1px solid var(--line-mid)}
.lang button{all:unset;cursor:pointer;font:italic 1.125rem/1 var(--gost);padding:.4rem .7rem;color:var(--line-mid)}
.lang button[aria-pressed=true]{background:var(--line);color:var(--sinka)}
.lang button:hover:not([aria-pressed=true]){color:var(--line)}
.lang button:focus-visible{outline:2px solid var(--current);outline-offset:2px}
.menu{display:none}
.topbar .wirebar{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--current);transform-origin:left;transform:scaleX(var(--pp,0))}

/* ---------- inner page head: a diazo sheet ---------- */
.phead{background:var(--sinka);color:var(--line);padding:calc(5.5rem + clamp(2rem,6vw,5rem)) clamp(1.5rem,5vw,6rem) clamp(2.5rem,6vw,5rem) calc(var(--bind) + clamp(1.5rem,5vw,6rem));
  background-image:linear-gradient(var(--line-dim) 1px,transparent 1px),linear-gradient(90deg,var(--line-dim) 1px,transparent 1px);background-size:80px 80px;background-position:-1px -1px;position:relative}
.phead .in{max-width:80rem;margin:auto}
.phead .crumbs{font:italic 1.125rem/1 var(--gost);color:var(--line-mid);margin-bottom:.9rem}
.phead .crumbs a:hover{color:var(--line)}
.phead h1{margin-top:1rem;font:italic 400 clamp(2.8rem,7vw,6.4rem)/.92 var(--gost);color:#fff;text-wrap:balance}
.phead p.lead{margin-top:1.2rem;max-width:52ch;opacity:.85}
.phead .sheetno{position:absolute;right:clamp(1.5rem,4vw,4rem);bottom:1.2rem;display:flex;font:italic .875rem/1.2 var(--gost);border:1px solid var(--line-mid)}
.phead .sheetno span{padding:.35rem .8rem}
.phead .sheetno span+span{border-left:1px solid var(--line-mid)}

.wrap{max-width:80rem;margin:auto;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,6rem) clamp(4rem,8vw,7rem) calc(var(--bind) + clamp(1.5rem,5vw,6rem))}
.wrap.narrow{max-width:none}
.h2{font:italic 400 clamp(2rem,4vw,3.4rem)/1 var(--gost)}
.qt{position:relative;padding-left:3.4rem}
.qt::before{content:"";position:absolute;left:0;top:.62em;width:2.6rem;height:1px;background:var(--current)}
.qt::after{content:"";position:absolute;left:2.4rem;top:calc(.62em - 4px);width:9px;height:9px;border-radius:50%;background:var(--current)}
.qt p{font:italic 400 clamp(1.5rem,2.3vw,2.1rem)/1.18 var(--gost);text-wrap:pretty}
.qt footer{margin-top:1.1rem;font:italic 1.125rem/1.2 var(--gost);opacity:.7}
.qt footer::before{content:"— "}
.btn{display:inline-flex;align-items:center;gap:.7rem;font:600 1.125rem/1 var(--text);padding:1rem 1.4rem;background:var(--graphite);color:var(--vatman);border:2px solid var(--graphite);transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--graphite)}
.btn svg{width:16px;height:16px}
.link{font:600 1.125rem/1 var(--text);border-bottom:2px solid var(--current);padding-bottom:.35rem}

footer.end{background:var(--graphite);color:var(--concrete);padding:1.6rem var(--edge) 1.6rem var(--bind);font:400 .875rem/1.4 var(--text)}
footer.end div{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.wire{position:fixed;left:26px;top:0;bottom:0;width:3px;background:rgba(127,140,155,.35);z-index:20;pointer-events:none}
.wire i{position:absolute;inset:0;background:var(--current);transform-origin:top;transform:scaleY(var(--pp,0))}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:860px){
  .topbar .nav,.topbar .mark span:last-child{display:none}
  .topbar .menu{display:block;margin-left:auto;position:static}
  .menu summary{list-style:none;cursor:pointer;font:500 1.125rem/1 var(--text);padding:.55rem .85rem;border:1px solid var(--line-mid)}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{background:var(--line);color:var(--sinka)}
  .menu nav{position:absolute;left:0;right:0;top:100%;background:var(--line);color:var(--sinka);display:grid;font:500 1.125rem/1 var(--text)}
  .menu nav a{padding:1.05rem 1.25rem;border-bottom:1px solid rgba(21,57,94,.18)}
  .topbar .in{gap:.7rem;padding-left:calc(var(--bind) + .4rem)}
}
@media (max-width:700px){
  :root{--bind:22px;--edge:8px}
  .wire{left:9px;width:2px}
  .lang button{padding:.4rem .55rem}
  .phead,.wrap{padding-left:calc(var(--bind) + 1.1rem);padding-right:1.1rem}
  .phead{padding-top:calc(5rem + 1.5rem)}
}

/* ---------- music button (common.js shows it only when the admin added tracks) ---------- */
.music{all:unset;box-sizing:border-box;position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:45;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:var(--sinka);color:var(--line);border:2px solid var(--line);box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:transform .2s}
.music:hover{transform:scale(1.06)}
.music:focus-visible{outline:2px solid var(--current);outline-offset:3px}
.music svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.music .sp{fill:currentColor}
.music .w1,.music .w2{display:none}
.music[aria-pressed=true]{border-color:var(--current)}
.music[aria-pressed=true] .w1,.music[aria-pressed=true] .w2{display:block}
.music[aria-pressed=true] .x{display:none}
.music i{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--current);opacity:0}
.music[aria-pressed=true] i{animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(.85);opacity:.7}to{transform:scale(1.25);opacity:0}}
@media (max-width:380px){.phead h1{font-size:2.4rem;overflow-wrap:anywhere;hyphens:auto}}
@media (max-width:380px){.lang button{padding:.4rem .42rem;font-size:1rem}.menu summary{padding:.5rem .6rem}.topbar .in{gap:.45rem}}

/* the outer window of the "one music per visit" frame (common.js) */
html.framed,html.framed body{overflow:hidden;scroll-snap-type:none;height:100%}
iframe.shell{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:1;background:var(--sinka)}