/* История театра (/pro-teatr/): таймлайн по главам. Всё под #hist; цвета — из токенов палитры (--zt-*). */
#hist {
  --h-head: "Lora", Georgia, "Times New Roman", serif;
  --h-paper: var(--zt-bg);
  --h-paper-2: color-mix(in srgb, var(--zt-ink) 9%, var(--zt-bg));
  --h-card: var(--zt-paper);
  --h-ink: var(--zt-ink);
  --h-muted: var(--zt-muted);
  --h-wine: var(--zt-accent);
  --h-gold: var(--zt-accent);
  --h-navy: var(--zt-footer);
  --h-navy-2: color-mix(in srgb, var(--zt-footer) 82%, var(--zt-footer-ink));
  --spine-x: 2.25rem;
  background: var(--zt-bg); color: var(--zt-ink); font-size: 1.1rem; line-height: 1.72;
}
/* тёмные плашки: светлый текст = цвет текста футера, золото как в шапке на главной */
#hist .h-chapters, #hist .h-story.h-dark, #hist .h-lineage, #hist .h-finale, #hist .h-years {
  --h-paper: var(--zt-footer-ink); --h-gold: #e2b96f;
}
#hist h1, #hist h2, #hist h3, #hist h4 { font-family: var(--h-head); letter-spacing: .01em; line-height: 1.2; }
#hist a { color: inherit; }
#hist img { max-width: 100%; display: block; }
#hist p { margin: 0 0 1rem; }
#hist .h-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
#hist .h-eyebrow { font: 600 .8rem/1 system-ui, sans-serif; letter-spacing: .25em; text-transform: uppercase; color: var(--h-gold); }
/* полоса «92 роки» под hero */
#hist .h-years { background: var(--h-navy); color: var(--h-paper); text-align: center; padding: 2.2rem 16px; }
#hist .h-years .h-num { font-family: var(--h-head); font-size: clamp(3rem, 9vw, 5.5rem); line-height: 1; color: var(--h-gold); }
#hist .h-years small { display: block; margin-top: .6rem; font: 500 .8rem/1.4 system-ui; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--h-paper) 65%, transparent); }
/* липкое меню глав и прогресс — под фиксированной шапкой сайта */
#hist .h-cols:has(> :only-child) { grid-template-columns: 1fr; }
#hist .h-todo { font: 500 .85rem/1.45 system-ui; background: #fff4c2; border: 1px dashed #b58a1c; padding: .8rem 1rem; border-radius: 4px; color: #5c4210; margin: 1rem 0; }
#hist .h-shows a, #hist .h-chip-off { font: 500 .76rem/1 system-ui; padding: .45rem .65rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--h-gold) 50%, transparent); background: var(--h-paper); text-decoration: none; display: inline-block; }
#hist .h-chip-off { opacity: .65; border-style: dashed; }
#hist .h-poster h4 a { text-decoration: none; }
#hist .h-poster h4 a::after { content: ""; position: absolute; inset: 0; }
#hist .h-poster { position: relative; }
#hist .h-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60}
#hist .h-progress span{display:block;height:100%;width:0;background:var(--h-gold)}
#hist .h-chapters{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--h-navy) 96%, transparent);backdrop-filter:blur(6px);border-bottom:1px solid color-mix(in srgb, var(--h-gold) 25%, transparent)}
#hist .h-chapters ul{display:flex;gap:.25rem;margin:0 auto;padding:.5rem 16px;list-style:none;overflow-x:auto;scrollbar-width:none;max-width:1100px}
#hist .h-chapters ul::-webkit-scrollbar{display:none}
#hist .h-chapters a{display:block;white-space:nowrap;text-decoration:none;color:color-mix(in srgb, var(--h-paper) 70%, transparent);font:500 .8rem/1 system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;padding:.55rem .8rem;border-radius:999px;transition:.25s}
#hist .h-chapters a:hover{color:var(--h-paper)}
#hist .h-chapters a.h-active{background:var(--h-gold);color:var(--h-navy)}
#hist .h-timeline{position:relative;padding:4rem 0 2rem}
#hist .h-spine{position:absolute;left:var(--spine-x);top:0;bottom:0;width:2px;background:var(--h-paper-2)}
#hist .h-spine i{position:absolute;inset:0 0 auto 0;height:0;background:var(--h-gold)}
#hist .h-chapter{position:relative;padding-left:calc(var(--spine-x) + 2.5rem);margin-bottom:5.5rem;scroll-margin-top:5rem}
#hist .h-chapter::before{content:"";position:absolute;left:calc(var(--spine-x) - 7px);top:.6rem;width:16px;height:16px;border-radius:50%;background:var(--h-paper);border:2px solid var(--h-gold)}
#hist .h-part{font:600 .75rem/1 system-ui;letter-spacing:.2em;text-transform:uppercase;color:var(--h-muted)}
#hist .h-chapter h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:.4rem 0 .6rem}
#hist .h-chapter .h-sub{font-style:italic;font-size:1.3rem;color:var(--h-muted);margin:0 0 1.8rem}
#hist .h-chapter h3{font-size:1.4rem;margin:2.6rem 0 1rem}
#hist .h-chapter h4{font-size:1.1rem;margin:0 0 .5rem;color:var(--h-wine)}
#hist .h-year{position:absolute;left:0;top:-.1rem;writing-mode:vertical-rl;transform:rotate(180deg);font:700 .85rem/1 var(--h-head);color:var(--h-gold);letter-spacing:.1em;background:var(--h-paper);padding:.4rem 0}
#hist .h-mark{display:flex;align-items:baseline;gap:1rem;margin:2rem 0 .5rem}
#hist .h-mark b{font:700 2.4rem/1 var(--h-head);color:var(--h-gold);flex:none}
#hist .h-mark span{font:500 .8rem/1.35 system-ui;color:var(--h-muted);text-transform:uppercase;letter-spacing:.1em}
#hist .h-cols{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:860px){#hist .h-cols{grid-template-columns:1.4fr 1fr}
#hist .h-cols.h-even{grid-template-columns:1fr 1fr}
}
#hist .h-archival{margin:0}
#hist .h-archival .h-frame{aspect-ratio:3/4;background:repeating-linear-gradient(45deg,var(--h-paper-2) 0 10px,var(--h-paper) 10px 20px);
  border:1px solid color-mix(in srgb, var(--h-ink) 15%, transparent);box-shadow:0 12px 30px -15px color-mix(in srgb, var(--h-ink) 40%, transparent);display:grid;place-items:center;text-align:center;
  color:var(--h-muted);font:500 .85rem/1.4 system-ui;padding:1rem}
#hist .h-archival.h-wide .h-frame{aspect-ratio:3/2}
#hist .h-archival img{filter:sepia(.55) contrast(1.05) brightness(.97)}
#hist .h-archival figcaption{font-style:italic;font-size:1rem;color:var(--h-muted);margin-top:.6rem}
#hist blockquote{margin:2rem 0;padding:0 0 0 1.5rem;border-left:2px solid var(--h-gold);font-style:italic;font-size:1.45rem;line-height:1.4}
#hist blockquote cite{display:block;margin-top:.6rem;font:500 .8rem/1.3 system-ui;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--h-muted)}
#hist .h-story{margin:2.2rem 0;padding:1.6rem 1.6rem 1.2rem;background:var(--h-card);border:1px solid color-mix(in srgb, var(--h-gold) 45%, transparent);border-radius:6px;position:relative}
#hist .h-story::before{content:attr(data-label);position:absolute;top:-.7rem;left:1.2rem;background:var(--h-gold);color:var(--h-navy);
  font:600 .7rem/1 system-ui;letter-spacing:.15em;text-transform:uppercase;padding:.4rem .6rem;border-radius:3px}
#hist .h-story.h-dark{background:var(--h-navy);color:var(--h-paper);border-color:color-mix(in srgb, var(--h-gold) 60%, transparent)}
#hist .h-story.h-dark h4{color:var(--h-gold)}
#hist .h-mini{list-style:none;margin:1.5rem 0;padding:0;border-left:1px dashed var(--h-gold);}
#hist .h-mini li{position:relative;padding:0 0 1rem 1.4rem}
#hist .h-mini li::before{content:"";position:absolute;left:-5px;top:.55rem;width:9px;height:9px;border-radius:50%;background:var(--h-gold)}
#hist .h-mini b{font:700 1rem var(--h-head);color:var(--h-wine);margin-right:.4rem}
#hist .h-vbox{max-width:340px;margin:0 auto}
#hist .h-vbox svg{width:100%;height:auto;display:block}
#hist .h-vbox .h-w{fill:hsl(28 38% 30%)}
#hist .h-vbox .h-s{fill:var(--h-navy)}
#hist .h-vbox .h-c{fill:var(--h-wine)}
#hist .h-vbox .h-lbl{font:600 13px system-ui;fill:var(--h-paper);text-anchor:middle;letter-spacing:.06em}
#hist .h-vbox .h-dim{font:500 12px system-ui;fill:var(--h-muted);text-anchor:middle}
#hist .h-vbox .h-cut{stroke:var(--h-wine);stroke-width:2;stroke-dasharray:7 5}
#hist .h-vbox .h-upper{transition:opacity .6s,transform .6s}
#hist .h-vbox.h-cutoff .h-upper{opacity:.18;transform:translateY(-14px)}
#hist .h-vbtn{display:block;margin:1rem auto 0;font:600 .78rem system-ui;letter-spacing:.06em;padding:.6rem 1rem;border-radius:999px;border:1px solid color-mix(in srgb, var(--h-wine) 50%, transparent);background:transparent;color:var(--h-wine);cursor:pointer}
#hist .h-vbtn:hover{background:var(--h-wine);color:var(--h-card)}
#hist .h-lineage{background:var(--h-navy);color:var(--h-paper);border-radius:6px;padding:2rem 1rem;margin:2rem 0}
#hist .h-lineage svg{width:100%;height:auto;display:block}
#hist .h-lineage .h-node rect{fill:var(--h-navy-2);stroke:color-mix(in srgb, var(--h-gold) 60%, transparent)}
#hist .h-lineage .h-node.h-root rect{fill:var(--h-gold);stroke:none}
#hist .h-lineage .h-node.h-th rect{fill:var(--h-wine);stroke:color-mix(in srgb, var(--h-gold) 60%, transparent)}
#hist .h-lineage .h-node text{fill:var(--h-paper);font:600 14px var(--h-head);text-anchor:middle}
#hist .h-lineage .h-node .h-s{font:italic 14px var(--h-head);fill:color-mix(in srgb, var(--h-paper) 70%, transparent)}
#hist .h-lineage .h-node.h-root text{fill:var(--h-navy)}
#hist .h-lineage .h-node.h-root .h-s{fill:color-mix(in srgb, var(--h-navy) 75%, transparent)}
#hist .h-lineage .h-edge{fill:none;stroke:var(--h-gold);stroke-width:2}
#hist .h-lineage .h-edge.h-succ{stroke:color-mix(in srgb, var(--h-gold) 55%, transparent);stroke-dasharray:6 6}
#hist.h-js .h-lineage .h-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.4s ease}
#hist.h-js .h-lineage .h-edge.h-succ.h-draw{stroke-dasharray:6 6;stroke-dashoffset:0;opacity:0;transition:opacity 1s ease 1.2s}
#hist.h-js .h-lineage.h-in .h-draw{stroke-dashoffset:0}
#hist.h-js .h-lineage.h-in .h-edge.h-succ.h-draw{opacity:1}
#hist.h-js .h-lineage .h-node{opacity:0;transition:opacity .6s ease}
#hist.h-js .h-lineage.h-in .h-node{opacity:1}
#hist .h-legend{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;font:500 .8rem/1 system-ui;color:color-mix(in srgb, var(--h-paper) 70%, transparent);margin-top:1rem}
#hist .h-legend i{display:inline-block;width:28px;height:0;border-top:2px solid var(--h-gold);vertical-align:middle;margin-right:.5rem}
#hist .h-legend i.h-d{border-top:2px dashed color-mix(in srgb, var(--h-gold) 60%, transparent)}
#hist .h-posters{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 4px 1.5rem}
#hist .h-poster{flex:0 0 min(78%,250px);scroll-snap-align:start;aspect-ratio:2/3;padding:1.2rem;background:linear-gradient(var(--h-paper-2),hsl(38 35% 82%));
  border:1px solid color-mix(in srgb, var(--h-ink) 20%, transparent);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 30px -18px color-mix(in srgb, var(--h-ink) 50%, transparent);transform:rotate(-1deg);transition:transform .3s}
#hist .h-poster:nth-child(even){transform:rotate(1.2deg)}
#hist .h-poster:hover{transform:rotate(0) translateY(-4px)}
#hist .h-poster .h-y{font:700 2.4rem/1 var(--h-head);color:var(--h-navy)}
#hist .h-poster h4{font:700 1.15rem/1.2 var(--h-head);margin:.5rem 0;color:var(--h-wine)}
#hist .h-poster p{font-size:1rem;line-height:1.35;margin:0}
#hist .h-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0;text-align:center}
#hist .h-stats div{border-top:1px solid var(--h-gold);padding-top:1rem}
#hist .h-stats b{display:block;font:700 clamp(2rem,6vw,3.4rem)/1 var(--h-head);color:var(--h-navy)}
#hist .h-stats span{font:500 .8rem/1.3 system-ui;text-transform:uppercase;letter-spacing:.1em;color:var(--h-muted)}
#hist .h-cathedral{display:grid;gap:1.5rem;align-items:center}
@media(min-width:760px){#hist .h-cathedral{grid-template-columns:150px 1fr}
}
#hist .h-cathedral svg{width:150px;height:auto;margin:0 auto;display:block;color:var(--h-gold)}
#hist .h-shadow{position:relative;height:clamp(220px,32vw,360px);overflow:hidden;margin:0 0 5rem;background:radial-gradient(ellipse at 50% 55%,hsl(42 80% 78%) 0%,hsl(36 70% 55%) 45%,var(--h-navy) 85%)}
#hist .h-shadow .h-layer{position:absolute;inset:auto -10% 0 -10%;will-change:transform}
#hist .h-shadow svg{width:100%;height:auto;display:block}
#hist .h-shadow .h-l1 path{fill:color-mix(in srgb, var(--h-navy) 55%, transparent)}
#hist .h-shadow .h-l2 path,#hist .h-shadow .h-l2 circle{fill:color-mix(in srgb, var(--h-navy) 90%, transparent)}
#hist .h-shadow .h-l3 path{fill:var(--h-navy)}
#hist .h-shadow p{position:absolute;top:1.2rem;left:0;right:0;text-align:center;margin:0;font:italic 1.3rem/1.3 var(--h-head);color:var(--h-navy)}
#hist .h-techs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
#hist .h-tech{background:var(--h-card);border:1px solid color-mix(in srgb, var(--h-ink) 10%, transparent);border-radius:6px;padding:1.3rem;transition:.3s}
#hist .h-tech:hover{border-color:var(--h-gold);box-shadow:0 18px 35px -22px color-mix(in srgb, var(--h-ink) 45%, transparent)}
#hist .h-tech svg{width:76px;height:76px;color:var(--h-navy)}
#hist .h-tech svg .h-p{transform-box:fill-box;transform-origin:50% 100%}
#hist .h-tech:hover svg .h-p{animation:bob 1.2s ease-in-out infinite}
#hist .h-tech:hover svg .h-r{animation:sway 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-4deg)}70%{transform:translateY(-2px) rotate(4deg)}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
#hist .h-tech h3{font-size:1.1rem;margin:.5rem 0 .4rem}
#hist .h-tech p{margin:0 0 .8rem;font-size:1.05rem;line-height:1.45}
#hist .h-tech .h-first{display:inline-block;font:600 .65rem/1 system-ui;letter-spacing:.12em;text-transform:uppercase;background:var(--h-wine);color:var(--h-card);padding:.35rem .5rem;border-radius:3px;margin-bottom:.6rem}
#hist .h-shows{display:flex;flex-wrap:wrap;gap:.4rem}
#hist .h-shows a{font:500 .76rem/1 system-ui;text-decoration:none;padding:.45rem .65rem;border-radius:999px;background:var(--h-paper);border:1px solid color-mix(in srgb, var(--h-gold) 50%, transparent)}
#hist .h-shows a:hover{background:var(--h-gold)}
#hist .h-people{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.5rem;padding:0;list-style:none}
#hist .h-people li{font:500 .85rem/1 system-ui;padding:.5rem .7rem;border-radius:4px;background:var(--h-paper-2)}
#hist .h-todo{font:500 .85rem/1.45 system-ui;background:hsl(48 100% 90%);border:1px dashed hsl(40 70% 45%);padding:.8rem 1rem;border-radius:4px;color:hsl(35 60% 25%);margin:1rem 0}
#hist .h-finale{background:var(--h-navy);color:var(--h-paper);text-align:center;padding:5rem 16px}
#hist .h-finale h2{font-size:clamp(1.8rem,5vw,3rem);margin:.6rem 0 1rem}
#hist .h-finale p{max-width:46ch;margin:0 auto 2rem;color:color-mix(in srgb, var(--h-paper) 80%, transparent)}
#hist .h-btn{display:inline-block;font:600 .9rem/1 system-ui;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:1rem 1.8rem;border-radius:999px;background:var(--h-gold);color:var(--h-navy);margin:.3rem}
#hist .h-btn.h-ghost{background:transparent;color:var(--h-paper);border:1px solid color-mix(in srgb, var(--h-paper) 40%, transparent)}
#hist .h-source{font-size:1rem;color:var(--h-muted);padding:2.5rem 16px;max-width:1100px;margin:0 auto}
#hist .h-source blockquote{font-size:1.2rem}
#hist.h-js .h-rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
#hist.h-js .h-rv.h-in{opacity:1;transform:none}
@media(max-width:640px){#hist{--spine-x:.9rem}
#hist .h-year{display:none}
#hist .h-chapter{padding-left:2.2rem}
#hist .h-stats{grid-template-columns:1fr}
#hist .h-story{padding:1.4rem 1rem 1rem}
}
@media (prefers-reduced-motion: reduce){#hist *,#hist *::before,#hist *::after{animation:none!important;transition:none!important}
#hist.h-js .h-rv{opacity:1;transform:none}
#hist.h-js .h-lineage .h-draw{stroke-dashoffset:0}
#hist.h-js .h-lineage .h-edge.h-succ.h-draw,#hist.h-js .h-lineage .h-node{opacity:1}

}


/* липкое меню и прогресс — под фиксированной шапкой; шапка прячется при прокрутке вниз, тогда уходят к краю */
#hist .h-progress { top: var(--zt-header-h, 82px); z-index: 49; transition: top .3s; }
#hist .h-chapters { top: var(--zt-header-h, 82px); transition: top .3s; }
#hist .h-chapter { scroll-margin-top: calc(var(--zt-header-h, 82px) + 4.2rem); }
body:has(#site-header.header--hidden) #hist .h-progress,
body:has(#site-header.header--hidden) #hist .h-chapters { top: 0; }
#hist .h-chapters ul { max-width: 1400px; justify-content: safe center; }

/* подписи плашек: цвет плашки — акцент палитры, текст — контрастный к нему */
#hist .h-story::before { color: var(--zt-accent-contrast, #fff); }
#hist .h-story.h-dark::before { color: var(--h-navy); }
#hist .h-archival .h-frame--img { display: block; padding: 0; background: none; aspect-ratio: 3/4; overflow: hidden; }
#hist .h-archival .h-frame--img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* правый отступ: .h-timeline обнуляла боковой padding у .h-wrap */
#hist .h-timeline { padding-right: 20px; }