:root{
  --cream:#F4EEE3; --cream-2:#EAE1CE; --cream-3:#FBF8F1;
  --ink:#241E19; --ink-soft:#55493C; --muted:#8C7F6C;
  --line:#E1D5BE; --line-2:#D8C9AC;
  --brick:#A24C36; --brick-deep:#7C3A29; --brick-bg:#F1DED4;
}
/* per-section colour identity — each major area of the site redefines the same three
   accent variables the whole stylesheet already keys off (--brick / --brick-deep /
   --brick-bg), so kickers, tile borders, icon tints and hover accents all pick up the
   section's own tone automatically without any extra per-component overrides. The
   "За нас" cluster (history, vision, team, quals, facilities) deliberately keeps the
   default brick — it's the site's "home" identity. */
[data-theme="uchproc"]{ --brick:#2F6F66; --brick-deep:#1F4D46; --brick-bg:#D9EAE7; }
[data-theme="priem"]{ --brick:#B4741A; --brick-deep:#8A560F; --brick-bg:#FBEFD8; }
[data-theme="roditeli"]{ --brick:#8C4B66; --brick-deep:#6B3650; --brick-bg:#F0DEE6; }
[data-theme="proekti"]{ --brick:#B8863B; --brick-deep:#8F6428; --brick-bg:#F3E4C7; }
[data-theme="info"]{ --brick:#46586B; --brick-deep:#324152; --brick-bg:#DCE3EA; }
[data-theme="alekotv"]{ --brick:#A0472E; --brick-deep:#7C3A29; --brick-bg:#F4E2D9; }
[data-theme="alekoznaiko"]{ --brick:#C08A2E; --brick-deep:#8F6420; --brick-bg:#F5E6C8; }
/* нови раздели със собствен цвят */
[data-theme="ekip"]{ --brick:#1F5C8C; --brick-deep:#153F60; --brick-bg:#D8E6F0; }
[data-theme="kvalifikacii"]{ --brick:#5C7A46; --brick-deep:#425934; --brick-bg:#E3EAD9; }
[data-theme="baza"]{ --brick:#8C4B66; --brick-deep:#6B3650; --brick-bg:#F0DEE6; }
[data-theme="novini"]{ --brick:#A24C36; --brick-deep:#7C3A29; --brick-bg:#F1DED4; }
[data-theme="media"]{ --brick:#2F6F66; --brick-deep:#1F4D46; --brick-bg:#D9EAE7; }
[data-theme="vizia"]{ --brick:#8F6420; --brick-deep:#6B4A16; --brick-bg:#F3E4C7; }
[data-theme="uchenici"]{ --brick:#46586B; --brick-deep:#324152; --brick-bg:#DCE3EA; }
/* началната страница — тухленото на училището, както си е */
[data-theme="nachalo"]{ --brick:#A24C36; --brick-deep:#7C3A29; --brick-bg:#F1DED4; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth;
  /* overflow-x:hidden прави html скролиращ контейнер и изключва
     position:sticky за всичко вътре. overflow-x:clip реже същото
     хоризонтално преливане, но НЕ създава скролиращ контейнер, така
     че залепените елементи работят. Старите браузъри игнорират clip
     и остават на hidden. */
  overflow-x:hidden; overflow-x:clip; }
body{ margin:0; background:var(--cream); font-family:'Manrope',sans-serif; color:var(--ink-soft); -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; width:100%; }
/* opening curtain — a brief brick-coloured wipe over the whole viewport on first
   load of the homepage, parting to reveal the hero underneath. Pure CSS animation
   (no JS needed to trigger it), so it can't get "stuck" if a script is slow to run;
   a matching JS check removes the element from flow afterwards so it never blocks
   clicks. Skipped entirely for reduced-motion and on repeat visits within a session. */
.ed-curtain{ position:fixed; inset:0; z-index:500; background:var(--brick-deep); display:flex; align-items:center; justify-content:center; }
.ed-curtain.opening{ animation:edCurtainWipe 1.1s cubic-bezier(.76,0,.24,1) forwards; }
.ed-curtain-chaos{ position:relative; width:92vw; max-width:1000px; height:80vh; margin:0 auto; }
.ed-curtain-chaos .cw-frag{ position:absolute; font-family:'Fraunces',serif; font-style:italic; font-weight:400; color:#F8F0E2; line-height:1.05; white-space:nowrap; opacity:0; transform:translateY(20px) scale(.94); transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1); }
.ed-curtain-chaos .cw-frag:nth-of-type(even){ color:#E7B79A; }
.ed-curtain-chaos .cw-frag.lit{ opacity:1; transform:none; }
.ed-curtain-chaos .cw-frag.gone{ opacity:0; transform:scale(.75) translateY(-14px); transition-duration:.5s; }
.ed-curtain-chaos .cw-frag.big{ color:#fff; top:50% !important; left:50% !important; transform:translate(-50%,-50%) scale(.15); transition:opacity .9s cubic-bezier(.34,1.56,.64,1), transform 1.1s cubic-bezier(.34,1.56,.64,1); }
.ed-curtain-chaos .cw-frag.big.lit{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@keyframes edCurtainWipe{ 0%{ clip-path:inset(0 0 0 0); } 100%{ clip-path:inset(0 0 100% 0); } }
@media (prefers-reduced-motion:reduce){ .ed-curtain{ display:none; } }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.serif{ font-family:'Fraunces',serif; }
.wrap{ max-width:1280px; margin:0 auto; padding-left:56px; padding-right:56px; }
@media (max-width:900px){ .wrap{ padding-left:24px; padding-right:24px; } }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1); }
.reveal.in{ opacity:1; transform:none !important; }
/* word-by-word "wipe up" reveal — each word sits in its own overflow:hidden mask and
   slides up from below it into place, staggered per word, instead of the whole line
   fading in at once. Used for the homepage hero title (fires on load) and a couple of
   section headings (fires on scroll, via the same IntersectionObserver as .reveal). */
.ed-word-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding:.02em .18em .16em .1em; margin:-.02em -.18em -.16em -.1em; }
.ed-word-mask > span{ display:inline-block; transform:translateY(112%); transition:transform 1.05s cubic-bezier(.22,1.12,.36,1); }
.ed-word-reveal.in .ed-word-mask > span{ transform:none; }
@media (prefers-reduced-motion:reduce){ .ed-word-mask > span{ transition:none; transform:none; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; } }

/* directional variants — elements enter from a side or from above, so groups of them
   visually "cross" each other as they settle on scroll, instead of all rising the same way */
.reveal.reveal-left{ transform:translateX(-56px); }
.reveal.reveal-right{ transform:translateX(56px); }
.reveal.reveal-down{ transform:translateY(-40px); }

/* automatic alternating cross-direction reveal for repeating grids/lists — no per-item
   classes needed, works for any number of items */
.ed-panels-grid > .reveal:nth-child(odd),
.ed-quick-grid > .reveal:nth-child(3n+1),
.ed-news-grid > .reveal:nth-child(3n+1),
.ed-team-grid > .reveal:nth-child(4n+1),
.ed-prog-grid > .reveal:nth-child(3n+1),
.ed-steps-grid > .reveal:nth-child(odd){ transform:translateX(-48px); }

.ed-quick-grid > .reveal:nth-child(3n+2),
.ed-news-grid > .reveal:nth-child(3n+2),
.ed-team-grid > .reveal:nth-child(4n+2),
.ed-prog-grid > .reveal:nth-child(3n+2),
.ed-class-grid > .reveal:nth-child(odd){ transform:translateY(-36px); }

.ed-panels-grid > .reveal:nth-child(even),
.ed-quick-grid > .reveal:nth-child(3n+3),
.ed-news-grid > .reveal:nth-child(3n+3),
.ed-team-grid > .reveal:nth-child(4n+4),
.ed-prog-grid > .reveal:nth-child(3n+3),
.ed-steps-grid > .reveal:nth-child(even){ transform:translateX(48px); }

.ed-team-grid > .reveal:nth-child(4n+3),
.ed-class-grid > .reveal:nth-child(even){ transform:translateY(36px); }

/* ---------- page transitions: sections slide past each other on navigation ---------- */
/* Native cross-document View Transitions — supported in Chromium/Edge, degrades to a plain
   navigation (no animation, no error) in browsers that don't yet implement it. */
@view-transition{
  navigation:auto;
}
::view-transition-group(root){
  animation-duration:.56s;
  animation-timing-function:cubic-bezier(.65,0,.35,1);
}
::view-transition-old(root){
  animation:edPageOut .56s cubic-bezier(.65,0,.35,1) both;
}
::view-transition-new(root){
  animation:edPageIn .56s cubic-bezier(.65,0,.35,1) both;
}
@keyframes edPageOut{
  to{ transform:translateX(-9%) scale(.97); opacity:0; }
}
@keyframes edPageIn{
  from{ transform:translateX(9%) scale(.97); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ---------- minimal nav ---------- */
/* reading-progress bar — sits just under the fixed nav on inner pages, filling as
   the visitor scrolls down. Colour comes from the page's own theme accent. */
.ed-read-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--brick); z-index:150; transition:width .1s linear; }

.ed-nav{ position:fixed; top:var(--ed-banner-h, 0px); left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:28px 56px; transition:padding .35s, background .35s, box-shadow .35s, top .2s; mix-blend-mode:normal; }
@media (max-width:900px){ .ed-nav{ padding:20px 24px; } }
.ed-nav.scrolled{ padding:16px 56px; background:rgba(244,238,227,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); }
@media (max-width:900px){ .ed-nav.scrolled{ padding:14px 24px; } }
.ed-nav .side{ flex:1 1 0; display:flex; align-items:center; gap:6px; }
.ed-nav .side.right{ justify-content:flex-end; }
.ed-back-btn{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-left:-6px; border-radius:50%; color:var(--ink); flex-shrink:0; transition:background .25s, transform .25s; }
.ed-back-btn:hover{ background:rgba(36,30,25,.08); transform:translateX(-2px); }
.ed-nav.on-dark:not(.scrolled) .ed-back-btn:hover{ background:rgba(251,248,241,.16); }
.ed-menu-btn{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:9px; }
.ed-nav.on-dark:not(.scrolled) .ed-menu-btn, .ed-nav.on-dark:not(.scrolled) .ed-back-btn, .ed-nav.on-dark:not(.scrolled) .ed-wordmark, .ed-nav.on-dark:not(.scrolled) .ed-contact{ color:#FBF8F1; }
.ed-menu-btn .bars{ display:flex; flex-direction:column; gap:3px; }
.ed-menu-btn .bars span{ width:16px; height:1.4px; background:currentColor; display:block; transition:transform .3s, opacity .3s; }
.ed-menu-btn.open .bars span:nth-child(1){ transform:translateY(4.4px) rotate(45deg); }
.ed-menu-btn.open .bars span:nth-child(2){ opacity:0; }
.ed-menu-btn.open .bars span:nth-child(3){ transform:translateY(-4.4px) rotate(-45deg); }
/* already a link to index.html in the markup on every page — this hover just makes
   that visible, so it reads as "click to go home" rather than plain static text */
.ed-wordmark{ font-family:'Fraunces',serif; font-weight:500; font-size:19px; letter-spacing:.02em; color:var(--ink); text-align:center; transition:color .25s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(60vw,420px); }
.ed-wordmark:hover{ color:var(--brick); }
.ed-wordmark sup{ font-size:10px; }
@media (max-width:520px){ .ed-wordmark sup{ display:none; } .ed-wordmark{ font-size:16px; max-width:52vw; } }
.ed-contact{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid currentColor; padding-bottom:2px; }

/* full-screen overlay menu */
.ed-overlay{ position:fixed; inset:0; z-index:99; background:var(--cream-3); display:flex; flex-direction:column; justify-content:center; padding:calc(var(--ed-banner-h,0px) + 100px) 56px 60px; opacity:0; transform:scale(1.03); pointer-events:none; transition:opacity .45s cubic-bezier(.16,.8,.3,1), transform .45s cubic-bezier(.16,.8,.3,1); overflow-y:auto; }
@media (max-width:900px){ .ed-overlay{ padding-left:24px; padding-right:24px; } }
@media (max-width:760px){ .ed-overlay{ padding-top:calc(var(--ed-banner-h,0px) + 110px); padding-bottom:40px; align-items:stretch; justify-content:flex-start; } }
.ed-overlay.open{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .ed-overlay{ transform:none; } }

/* Left column of main items — some are direct links (Начало, Документи), some are
   category buttons whose sub-links "unfold" beside them (desktop) or right under them
   as an accordion (mobile). The sub-link <div> for a category sits right after its
   button in the DOM either way — only its CSS positioning changes per breakpoint, so
   there's exactly one copy of each sub-link list, never a duplicated/out-of-sync one. */
/* align-self:flex-start keeps this column sized to its own content (the widest
   menu item) instead of stretching to the full width of the flex .ed-overlay —
   otherwise the flyout panels' "left:100%" would land far past the text,
   off the right edge of the screen, instead of right beside it. */
.ed-overlay-main{ position:relative; display:flex; flex-direction:column; gap:2px; flex-shrink:0; align-self:flex-start; }
@media (max-width:760px){ .ed-overlay-main{ width:100%; align-self:stretch; } }

/* Fraunces italic — the same serif used for every heading on the site (h1, h2,
   .ed-wordmark…) — instead of the old geometric-sans (Unbounded), which read as
   an unrelated "display" font stuck onto an otherwise editorial-serif identity. */
.ed-ov-item{ position:relative; display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:400; font-style:italic; font-size:clamp(22px,4.4vw,44px); color:var(--ink); line-height:1.5; letter-spacing:-.01em; opacity:0; transform:translateX(-34px) rotate(-1.2deg); padding:0; margin:0; background:none; border:0; text-align:left; cursor:pointer; width:100%; transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1), color .25s, padding-left .4s cubic-bezier(.34,1.56,.64,1); }
.ed-overlay.open .ed-ov-item{ opacity:1; transform:none; }
/* stagger delay is set per item via an inline style (not nth-child) because the sub-link
   panels are interleaved as siblings between the buttons, which would throw off any
   purely positional CSS selector here */
.ed-ov-item::before{ content:''; position:absolute; left:-18px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--brick); transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.ed-ov-item:hover, .ed-ov-item.active{ color:var(--brick); padding-left:20px; }
.ed-ov-item:hover::before, .ed-ov-item.active::before{ transform:scale(1); }
.ed-ov-item.current{ color:var(--brick); }
.ed-ov-item .ed-ov-chev{ font-family:'Manrope',sans-serif; font-size:.5em; color:var(--muted); transition:transform .35s cubic-bezier(.34,1.56,.64,1), color .25s; }
.ed-ov-item.active .ed-ov-chev{ transform:rotate(90deg); color:var(--brick); }
@media (max-width:760px){ .ed-ov-item .ed-ov-chev{ transform:rotate(90deg); } .ed-ov-item.active .ed-ov-chev{ transform:rotate(-90deg); } }
@media (prefers-reduced-motion:reduce){ .ed-ov-item{ transition-delay:0s !important; } .ed-ov-panel, .ed-ov-panel a{ transition-delay:0s !important; } }

/* desktop (≥760px): every panel stacks at the same spot, just right of the main column
   (positioned relative to .ed-overlay-main, not to its own DOM neighbour) — only the
   active one is visible, so switching categories reads as one panel elegantly replacing
   another rather than the page reflowing. */
.ed-ov-group{ position:relative; }
.ed-ov-panel{ position:absolute; top:6px; left:100%; margin-left:clamp(28px,6vw,96px); width:max(240px,26vw); display:flex; flex-direction:column; gap:4px; opacity:0; transform:translateX(20px); pointer-events:none; transition:opacity .4s cubic-bezier(.16,.8,.3,1), transform .4s cubic-bezier(.16,.8,.3,1); }
.ed-ov-panel.active{ opacity:1; transform:none; pointer-events:auto; }
.ed-ov-panel a{ font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; letter-spacing:.01em; color:var(--ink-soft); padding:11px 2px; border-bottom:1px solid var(--line); transition:color .25s, padding-left .3s cubic-bezier(.34,1.56,.64,1), opacity .4s cubic-bezier(.16,.8,.3,1), transform .4s cubic-bezier(.16,.8,.3,1); opacity:0; transform:translateY(8px); }
.ed-ov-panel.active a{ opacity:1; transform:none; }
.ed-ov-panel.active a:nth-child(1){ transition-delay:.04s; }
.ed-ov-panel.active a:nth-child(2){ transition-delay:.09s; }
.ed-ov-panel.active a:nth-child(3){ transition-delay:.14s; }
.ed-ov-panel.active a:nth-child(4){ transition-delay:.19s; }
.ed-ov-panel a:hover{ color:var(--brick); padding-left:10px; }
.ed-ov-panel a.current{ color:var(--brick); }

/* mobile (<760px): panel drops back into normal flow, directly under its own button,
   as a simple accordion — smooth height-open instead of an abrupt display toggle. A
   generous max-height (comfortably above any panel's real content) transitions down
   to 0, so it reads as "unfolding" instead of snapping. */
@media (max-width:760px){
  .ed-ov-panel{ position:static; width:auto; margin-left:0; opacity:1; transform:none; pointer-events:none; max-height:0; overflow:hidden; padding:0 0 0 16px; border-left:2px solid var(--line); transition:max-height .5s cubic-bezier(.16,.8,.3,1), padding .4s cubic-bezier(.16,.8,.3,1); }
  .ed-ov-panel.active{ display:flex; max-height:360px; padding:2px 0 12px 16px; pointer-events:auto; }
  .ed-ov-panel a{ font-size:15px; padding:9px 2px; border-bottom:0; }
}

.ed-overlay-foot{ margin-top:56px; display:flex; gap:28px; flex-wrap:wrap; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
@media (max-width:760px){ .ed-overlay-foot{ margin-top:32px; } }
.ed-overlay-foot a{ color:var(--muted); }
.ed-overlay-foot a:hover{ color:var(--ink); }

/* ---------- hero ---------- */
.ed-hero{ position:relative; height:100vh; min-height:560px; max-height:980px; overflow:hidden; display:flex; align-items:flex-end; }
.ed-hero-bg{ position:absolute; inset:0; }
.ed-hero-bg video, .ed-hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Overall mood vignette — mild at top, stronger at the bottom where the eyebrow/h1 sit. */
.ed-hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,14,10,.12) 0%, rgba(30,22,16,.04) 25%, rgba(20,14,10,.55) 100%); }
/* Dedicated nav-contrast strip: a FIXED pixel height (not a % of the hero), so
   "МЕНЮ"/"КОНТАКТИ" stay readable no matter what the video shows at that instant
   (a bright sunlit frame, say) or how tall the viewport is — unlike a %-based
   gradient, this always covers exactly the banner+nav zone at guaranteed opacity. */
.ed-nav-scrim{ position:absolute; top:0; left:0; right:0; height:calc(var(--ed-banner-h, 0px) + 190px); background:linear-gradient(180deg, rgba(8,6,4,.75) 0%, rgba(8,6,4,.4) 60%, rgba(8,6,4,0) 100%); pointer-events:none; }
.ed-hero-inner{ position:relative; z-index:2; width:100%; padding:0 56px 72px; text-align:center; color:#FBF8F1; }
@media (max-width:900px){ .ed-hero-inner{ padding:0 24px 56px; } }
.ed-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#F1E6D6; margin-bottom:22px; }
.ed-hero h1{ font-family:'Fraunces',serif; font-weight:400; font-style:italic; font-size:clamp(26px,6.6vw,88px); line-height:1.04; letter-spacing:-.5px; margin:0 0 26px; white-space:nowrap; }
@media (max-width:560px){ .ed-hero h1{ font-size:8.6vw; white-space:normal; } }
.ed-hero-sub{ font-size:15px; line-height:1.75; color:#E7DCC9; max-width:480px; margin:0 auto 34px; }
.ed-hero-sub.reveal{ filter:blur(6px); transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1), filter 1s ease; }
.ed-hero-sub.reveal.in{ filter:blur(0); }
.ed-hero-cta{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brick); border-bottom:1px solid var(--brick); padding-bottom:5px; margin-top:22px; transition:border-color .25s, gap .25s, color .25s; }
.ed-hero-cta:hover{ gap:15px; }
.ed-hero-cta-dark{ color:#FBF8F1; border-bottom-color:rgba(251,248,241,.55); }
.ed-hero-cta-dark:hover{ border-color:#FBF8F1; }
.ed-scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:#F1E6D6; opacity:.85; }
.ed-scroll-cue .line{ width:1px; height:34px; background:linear-gradient(180deg, currentColor, transparent); animation:edScrollPulse 2.2s ease-in-out infinite; }
@keyframes edScrollPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@media (max-width:700px){ .ed-scroll-cue{ display:none; } }

/* ---------- pinned announcement (polaroid on the hero) ----------
   Shown only for a real, current announcement — see the comment above the markup
   in index.html for how Gabriel turns it on/off and sets an expiry date. Hidden
   by default (opacity/pointer-events), JS adds .active for the ones that qualify
   (data-active="true" and not past data-expires) with a gentle entrance; once
   active it hangs from its pin and sways continuously, like a real corkboard photo. */
.ed-pin-note{ position:absolute; top:120px; right:clamp(20px,5vw,64px); z-index:5; width:320px; opacity:0; transform:translateY(-16px); pointer-events:none; transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1); }
.ed-pin-note.active{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (max-width:760px){ .ed-pin-note{ top:98px; width:152px; right:14px; } }

.ed-pin-swing{ transform-origin:10px top; animation:edPinSway 4.6s ease-in-out infinite; }
.ed-pin-note.active .ed-pin-swing{ animation-play-state:running; }
@keyframes edPinSway{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(3deg); } }
@media (prefers-reduced-motion:reduce){ .ed-pin-swing{ animation:none; transform:rotate(-2deg); } }

.ed-pin-tack{ position:absolute; top:-8px; left:10px; margin-left:-8px; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #e8695a, #A24C36 72%); box-shadow:0 3px 7px rgba(0,0,0,.45); z-index:2; }
.ed-pin-photo{ background:#FBF8F1; padding:10px 10px 0; box-shadow:0 20px 38px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.2); }
.ed-pin-photo img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--cream-3); }
.ed-pin-photo .cap{ padding:14px 6px 18px; font-family:'Fraunces',serif; font-style:italic; font-size:15px; line-height:1.34; color:#2A2420; text-align:center; }
/* text-only variant — same pinned-note card, no photo, for announcements that don't
   have (or need) an image. Swap .ed-pin-photo for .ed-pin-text in the markup. */
.ed-pin-text{ background:#FBF8F1; padding:22px 16px; box-shadow:0 20px 38px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.2); }
.ed-pin-text .cap{ font-family:'Fraunces',serif; font-style:italic; font-size:15px; line-height:1.4; color:#2A2420; text-align:center; }
.ed-pin-links{ display:flex; gap:18px; justify-content:center; margin-top:12px; }
.ed-pin-links a{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#FBF8F1; border-bottom:1px solid rgba(251,248,241,.5); padding-bottom:2px; transition:border-color .25s; }
.ed-pin-links a:hover{ border-color:#FBF8F1; }

/* ---------- eyebrow + heading pattern (reused) ---------- */
.ed-kicker{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brick); margin-bottom:16px; }
.ed-h2{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(30px,4.4vw,52px); line-height:1.1; color:var(--ink); letter-spacing:-.5px; }

/* ---------- about / history (blurred-edge photo + moving text, one soft atmosphere) ---------- */
.ed-about{ position:relative; padding:196px 0 100px; overflow:hidden; }
/* big "118 години по-късно" statement right under the heading — same dramatic serif
   treatment as the curtain's "Добре дошли", just as a normal scroll-reveal here
   instead of a timed sequence. */
.ed-history-big{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(32px,5.6vw,64px); color:var(--brick); margin:14px 0 50px; opacity:0; transform:translateY(18px) scale(.96); transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1); }
.ed-history-big.in{ opacity:1; transform:none; }
/* thin full-bleed video banner between the heading and the timeline */
.ed-history-banner{ width:100vw; position:relative; left:50%; right:50%; margin:0 -50vw 64px; height:min(34vw,260px); min-height:140px; display:flex; gap:14px; padding:0 14px; box-sizing:border-box; opacity:0; transition:opacity 1s ease; }
.ed-history-banner.in{ opacity:1; }
.ed-hb-part{ flex:1; overflow:hidden; }
.ed-hb-part video{ width:100%; height:100%; object-fit:cover; display:block; }
.ed-hb-part.bw video{ filter:grayscale(1) contrast(1.05); }
/* horizontal chronological timeline — a connecting line "draws" itself left-to-right
   as the row scrolls into view, while each year fades/lifts in with its own stagger.
   Uses its own repeatable observer (.hl-replay, in script-editorial.js) instead of
   the site-wide once-only .reveal system, so the sequence replays every time a
   visitor scrolls back to it — not just the first time ever. */
.hl-replay{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1); }
.hl-replay.in{ opacity:1; transform:translateY(0); }
.ed-history-hline{ position:relative; display:flex; justify-content:space-between; gap:16px; margin:0 0 60px; }
.ed-history-hline::before{ content:''; position:absolute; top:57px; left:0; right:0; height:1px; background:var(--line-2); transform:scaleX(0); transform-origin:left; transition:transform 2.6s cubic-bezier(.65,0,.35,1) .1s; }
.ed-history-hline.in::before{ transform:scaleX(1); }
.ed-hl-item{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ed-hl-year{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(24px,3.2vw,38px); color:var(--ink); margin-bottom:16px; }
.ed-hl-dot{ position:relative; z-index:1; width:11px; height:11px; border-radius:50%; background:var(--brick); border:3px solid var(--cream); box-shadow:0 0 0 1px var(--line-2); margin-bottom:18px; transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1) .3s; }
.ed-hl-item.in .ed-hl-dot{ transform:scale(1); }
.ed-hl-text{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); max-width:200px; }
@media (max-width:760px){
  .ed-history-hline{ flex-direction:column; gap:32px; }
  .ed-history-hline::before{ display:none; }
  .ed-hl-text{ max-width:280px; }
  .ed-history-banner{ height:200px; }
}
@media (max-width:900px){ .ed-about{ padding:96px 0 84px; } }
/* a heavily blurred, low-opacity echo of the same photo bleeds past the picture into the
   text column, so the two halves read as one soft atmosphere instead of a hard-edged split */
.ed-about-wash{ position:absolute; inset:-80px; z-index:0; pointer-events:none; background-size:cover; background-position:center; filter:blur(80px) saturate(1.05); opacity:.5; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 32%, rgba(0,0,0,.68) 44%, transparent 66%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 32%, rgba(0,0,0,.68) 44%, transparent 66%); }
@media (max-width:960px){ .ed-about-wash{ display:none; } }
.ed-about-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(260px,42%) 1fr; align-items:stretch; min-height:600px; }
@media (max-width:960px){ .ed-about-grid{ grid-template-columns:1fr; min-height:0; } }
.ed-about-media{ position:relative; overflow:hidden; }
.ed-about-photo{ position:absolute; inset:0; width:100%; height:100%; min-height:460px; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.16,.8,.3,1); }
.ed-about-media:hover .ed-about-photo{ transform:scale(1.045); }
/* soften the photo's own edges — same blur+mask vignette technique as the hero banner */
.ed-about-vignette{ position:absolute; inset:0; pointer-events:none; background-size:cover; background-position:center; filter:blur(24px); transform:scale(1.12); -webkit-mask-image:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.6) 78%, #000 100%); mask-image:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.6) 78%, #000 100%); }
@media (max-width:960px){ .ed-about-media{ min-height:320px; } .ed-about-photo{ min-height:320px; } }
.ed-about-text{ position:relative; padding:0 56px 0 72px; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:960px){ .ed-about-text{ padding:56px 24px 0; } }
@media (max-width:900px){ .ed-about-text{ padding:48px 24px 0; } }
.ed-about-text .ed-h2{ margin-bottom:6px; }

/* history timeline — a slim vertical line with a dot per milestone year, replacing
   the earlier auto-scrolling crawl. Each item reveals independently as it scrolls in. */
.ed-timeline{ position:relative; margin-top:26px; padding-left:26px; }
.ed-timeline::before{ content:''; position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:var(--line-2); }
.ed-timeline-item{ position:relative; padding-bottom:26px; }
.ed-timeline-item:last-child{ padding-bottom:0; }
.ed-timeline-dot{ position:absolute; left:-26px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--brick); box-shadow:0 0 0 4px var(--cream); }
.ed-timeline-year{ font-family:'Fraunces',serif; font-style:italic; font-size:19px; color:var(--brick); margin-bottom:4px; }
.ed-timeline-text{ font-size:14px; line-height:1.75; color:var(--ink-soft); margin:0; max-width:460px; }
.ed-about-closing{ font-size:14px; line-height:1.8; color:var(--ink-soft); margin:22px 0 0; max-width:480px; }

.ed-fact-strip{ display:flex; gap:44px; margin-top:32px; flex-wrap:wrap; }
.ed-fact-strip .f-num{ font-family:'Fraunces',serif; font-weight:400; font-style:italic; font-size:38px; color:var(--brick); line-height:1; }
.ed-fact-strip .f-lab{ font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.5; letter-spacing:.02em; }
.ed-placeholder-flag{ display:inline-block; background:var(--brick-bg); color:var(--brick-deep); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px; border-radius:3px; margin:2px 0 4px; }

/* ---------- values / pillars ---------- */


/* ---------- programs showcase ---------- */
.ed-programs{ padding:130px 0; }
@media (max-width:900px){ .ed-programs{ padding:88px 0; } }
.ed-programs-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:60px; flex-wrap:wrap; }
.ed-programs-head p{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); max-width:380px; margin:14px 0 0; }
/* homepage-only: the tiles themselves drift slowly leftward in one continuous belt —
   the track holds the 6 cards twice back to back and animates exactly one set's width,
   so the seam where it loops is invisible. Hovering (mouse only) pauses the belt so a
   card can be read/clicked calmly. Independent from .ed-prog-list/.ed-prog-row below,
   which other pages (e.g. Материална база) use for their plain text row lists. */
.ed-prog-marquee{ overflow:hidden; margin:0 -56px; padding:6px 56px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.ed-prog-track{ display:flex; width:max-content; gap:22px; animation:edProgBelt 42s linear infinite; }
.ed-prog-marquee:hover .ed-prog-track{ animation-play-state:paused; }
@keyframes edProgBelt{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ed-prog-card{ position:relative; display:flex; flex-direction:column; gap:14px; flex:0 0 300px; padding:28px 26px 26px; min-height:212px; border-radius:20px; border:1px solid var(--line); background:var(--cream-3); overflow:hidden; transition:border-color .35s, box-shadow .45s cubic-bezier(.16,.8,.3,1), transform .45s cubic-bezier(.16,.8,.3,1); }
/* each tile gets its own soft tint, cycling through a small palette that stays inside
   the site's warm brick/olive range rather than introducing new hues */
.ed-prog-card:nth-of-type(6n+1){ background:#F1DED4; }
.ed-prog-card:nth-of-type(6n+2){ background:#E9E4D3; }
.ed-prog-card:nth-of-type(6n+3){ background:#F0E6D8; }
.ed-prog-card:nth-of-type(6n+4){ background:#E3E5D6; }
.ed-prog-card:nth-of-type(6n+5){ background:#F3E0D9; }
.ed-prog-card:nth-of-type(6n+6){ background:#EAE6DA; }
/* glossy sheen — a soft diagonal highlight sitting just off the card's left edge,
   sweeping across to the right on hover like light glinting off a polished surface. */
.ed-prog-card::before{ content:''; position:absolute; top:0; left:-60%; width:38%; height:100%; background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 48%, transparent 100%); transform:skewX(-18deg); pointer-events:none; z-index:2; transition:left .75s cubic-bezier(.16,.8,.3,1); }
.ed-prog-card:hover::before{ left:120%; }
.ed-prog-card:hover{ border-color:var(--brick); box-shadow:0 24px 44px -18px rgba(36,30,25,.28); transform:translateY(-6px); }
.ed-prog-card .p-n{ position:absolute; top:22px; right:24px; font-family:'Fraunces',serif; font-style:italic; font-size:14px; color:var(--line-2); }
.ed-prog-card .p-ic{ width:52px; height:52px; border-radius:14px; background:var(--cream-2); color:var(--brick); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:auto; }
.ed-prog-card .p-t{ font-family:'Fraunces',serif; font-weight:400; font-size:22px; color:var(--ink); }
.ed-prog-card .p-d{ font-size:13px; color:var(--muted); line-height:1.6; flex-grow:1; }
.ed-prog-card .p-arrow{ display:inline-flex; align-items:center; font-size:16px; color:var(--brick); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; }
.ed-prog-card:hover .p-arrow{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .ed-prog-track{ animation:none; } }
@media (max-width:900px){ .ed-prog-marquee{ margin:0 -24px; padding:6px 24px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } }
@media (max-width:640px){ .ed-prog-card{ flex-basis:78vw; min-height:196px; } .ed-prog-track{ animation-duration:34s; } }
@media (hover:none){ .ed-prog-card::before{ display:none; } }
/* text-only list, same idea as the news section below: hovering a row floats a photo
   beside the cursor (shared #edProgPreview element + JS) instead of a picture sitting
   inline with every row. */
/* photo-grid "folders" — rounded square tiles, image fills the frame, a caption slides
   up over a dark wash on hover while the photo itself slowly zooms in. Used for pages
   that are really a browsable set of places/things (Материална база, Проекти и програми)
   rather than a list to read top to bottom. */
.ed-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; }
.ed-photo-tile{ position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:13px; overflow:hidden; background:var(--cream-2); border:0; padding:0; margin:0; font:inherit; cursor:pointer; transition:transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .4s cubic-bezier(.16,.8,.3,1); }
.ed-photo-tile:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -16px rgba(20,14,10,.35); }
/* team avatars and news cards reuse .ed-photo-tile for its image-fill/hover-zoom
   plumbing but are a different card type (headshot squares / article cards), so
   they keep their original square shape and skip the new gallery hover-lift. */
.ed-avatar-tile, .ed-news-card.ed-photo-tile{ aspect-ratio:1; border-radius:26px; cursor:default; }
.ed-avatar-tile:hover, .ed-news-card.ed-photo-tile:hover{ transform:none; box-shadow:none; }
/* video variant of the same rounded tile — a centered play button sits on top,
   scaling up slightly on hover, for pages that will hold embedded/linked videos
   (Алеко ТВ, Алекознайко) once the real YouTube links are ready. */
.ed-video-tile .v-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:rgba(20,14,10,.45); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; color:#F8F0E2; z-index:2; transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s; }
.ed-video-tile:hover .v-play{ transform:translate(-50%,-50%) scale(1.12); background:var(--brick); }
.ed-photo-tile.reveal{ transform:translateY(26px) scale(.94); }
.ed-photo-tile.reveal.in{ transform:none; }
.ed-photo-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.16,.8,.3,1); }
.ed-photo-tile:hover img{ transform:scale(1.09); }
.ed-photo-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(18,14,11,.8) 100%); opacity:0; transition:opacity .4s cubic-bezier(.16,.8,.3,1); }
.ed-photo-tile:hover::after{ opacity:1; }
.ed-photo-tile .pt-n{ position:absolute; top:18px; left:20px; font-family:'Fraunces',serif; font-style:italic; font-size:13px; color:#F8F0E2; opacity:0; transform:translateY(-8px); transition:opacity .35s, transform .35s; z-index:1; }
.ed-photo-tile .pt-label{ position:absolute; left:20px; right:20px; bottom:20px; font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(16px,2vw,21px); line-height:1.25; color:#F8F0E2; opacity:0; transform:translateY(14px); transition:opacity .4s cubic-bezier(.16,.8,.3,1) .04s, transform .4s cubic-bezier(.16,.8,.3,1) .04s; z-index:1; }
.ed-photo-tile:hover .pt-label, .ed-photo-tile:hover .pt-n{ opacity:1; transform:none; }
@media (max-width:640px){ .ed-photo-tile .pt-label, .ed-photo-tile .pt-n{ opacity:1; transform:none; } .ed-photo-tile::after{ opacity:1; background:linear-gradient(180deg, transparent 55%, rgba(18,14,11,.72) 100%); } }

/* qualifications/trainings list — same "text row with accent bar" language as the
   other row lists on the site (news, programs), adapted for a date + title + meta
   layout since each entry is a past training, not a link to another page. */
.ed-qual-list{ border-top:1px solid var(--line); }
.ed-qual-list{ position:relative; padding-left:6px; }
.ed-qual-list::after{ content:''; position:absolute; left:6px; top:14px; bottom:14px; width:2px; background:var(--line-2); }
.ed-qual-item{ position:relative; display:flex; gap:28px; padding:24px 20px 24px 26px; margin:0 -20px 0 -20px; border-radius:10px; transition:background .3s, padding-left .3s; }
.ed-qual-item::before{ content:''; position:absolute; left:0; top:10%; bottom:10%; width:3px; border-radius:2px; background:var(--brick); transform:scaleY(0); transform-origin:bottom; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.ed-qual-item::after{ content:''; position:absolute; left:2px; top:29px; width:8px; height:8px; border-radius:50%; background:var(--brick); box-shadow:0 0 0 4px var(--cream-3); z-index:1; }
.ed-qual-item:hover{ background:var(--cream-3); padding-left:34px; }
.ed-qual-item:hover::before{ transform:scaleY(1); }
.ed-qual-item .q-date{ flex:0 0 130px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--brick); padding-top:3px; }
.ed-qual-item .q-body{ flex:1; min-width:0; }
.ed-qual-item .q-t{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:17px; line-height:1.4; color:var(--ink); margin-bottom:5px; }
.ed-qual-item .q-meta{ font-size:12px; line-height:1.6; color:var(--muted); }

.ed-qual-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:24px; }
.ed-qual-card{ background:var(--cream-3); border:1px solid var(--line); border-radius:16px; padding:26px 28px; box-shadow:0 16px 32px -20px rgba(20,14,10,.25); transition:transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .35s cubic-bezier(.16,.8,.3,1); }
.ed-qual-card:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -18px rgba(20,14,10,.3); }
.ed-qual-card .qc-month{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--brick); margin-bottom:10px; }
.ed-qual-card .qc-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:19px; line-height:1.4; color:var(--ink); margin-bottom:16px; }
.ed-qual-card .qc-row{ font-size:13.5px; line-height:1.7; color:var(--ink); margin-bottom:4px; }
.ed-qual-card .qc-row:last-child{ margin-bottom:0; }
.ed-qual-card .qc-k{ color:var(--muted); font-weight:600; }
@media (max-width:640px){
  .ed-qual-grid{ grid-template-columns:1fr; gap:18px; }
  .ed-qual-card{ padding:22px 20px; }
}
@media (max-width:640px){
  .ed-qual-item{ flex-direction:column; gap:6px; padding:20px 16px; margin:0 -16px; }
  .ed-qual-item .q-date{ flex:none; }
}

.ed-prog-list{ border-top:1px solid var(--line); }
.ed-prog-row{ position:relative; display:flex; align-items:baseline; gap:28px; padding:30px 20px; margin:0 -20px; border-bottom:1px solid var(--line); border-radius:10px; transition:background .3s, padding-left .3s; }
.ed-prog-row::before{ content:''; position:absolute; left:0; top:10%; bottom:10%; width:3px; border-radius:2px; background:var(--brick); transform:scaleY(0); transform-origin:bottom; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.ed-prog-row:hover{ background:var(--cream-2); padding-left:28px; }
.ed-prog-row:hover::before{ transform:scaleY(1); }
.ed-prog-row .p-n{ flex:0 0 auto; font-family:'Fraunces',serif; font-style:italic; font-size:14px; color:var(--line-2); width:26px; }
.ed-prog-row .p-t{ flex:0 1 auto; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(19px,2.4vw,27px); color:var(--ink); transition:transform .4s cubic-bezier(.16,.8,.3,1), color .3s; }
.ed-prog-row .p-d{ flex:1 1 auto; font-size:13px; color:var(--muted); line-height:1.6; }
.ed-prog-row .p-arrow{ flex:0 0 auto; font-size:18px; color:var(--ink); opacity:0; transform:translateX(-8px); transition:opacity .3s, transform .3s, color .3s; }
.ed-prog-row:hover .p-t{ transform:translateX(10px); color:var(--brick); }
.ed-prog-row:hover .p-arrow{ opacity:1; transform:none; color:var(--brick); }
@media (max-width:760px){
  .ed-prog-row{ flex-wrap:wrap; gap:4px 20px; padding:24px 18px; margin:0 -18px; }
  .ed-prog-row .p-n{ order:1; }
  .ed-prog-row .p-arrow{ order:2; margin-left:auto; }
  .ed-prog-row .p-t{ order:3; flex-basis:100%; }
  .ed-prog-row .p-d{ order:4; flex-basis:100%; }
}

/* ---------- news ---------- */
/* scroll-driven text reveal — the section is much taller than the viewport; its inner
   text stays pinned (sticky) for the whole scroll distance while JS lights the words
   up word-by-word in step with scroll position (see script-editorial.js). The colour
   bars drift sideways at different speeds over the same scroll range for a bit of
   depth/movement behind the text. */

/* closing text + fact strip drift up slowly like a film's end credits, fading in at
   the mask's soft top/bottom edges rather than snapping into place. */
/* closing text scrolls upward continuously and endlessly, like a film's end credits —
   two identical copies stacked in the track, animated up by exactly half the track's
   height on an infinite loop, so the seam between the copies is never visible. The
   mask fades the content out at the top/bottom edges rather than cutting it abruptly. */
.ed-credits-mask{ overflow:hidden; height:620px; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.ed-credits-track{ display:flex; flex-direction:column; animation:edCreditsScroll 38s linear infinite; }
.ed-credits-block{ flex-shrink:0; padding:40px 0; }
@keyframes edCreditsScroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
.ed-about-closing{ text-align:center; max-width:62ch; margin:0 auto 28px; font-size:16px; line-height:1.75; }
.ed-about-closing.big{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(24px,3.4vw,34px); line-height:1.4; color:var(--brick); max-width:44ch; margin-bottom:32px; }
@media (max-width:640px){ .ed-credits-mask{ height:760px; } }
@media (prefers-reduced-motion:reduce){ .ed-credits-track{ animation:none; } .ed-credits-block:last-child{ display:none; } }

.ed-scroll-tell{ position:relative; height:280vh; background:var(--cream); }
.ed-scroll-tell-sticky{ position:fixed; top:0; left:0; right:0; height:100vh; display:flex; align-items:center; justify-content:center; padding:0 56px; visibility:hidden; }
.ed-scroll-tell-sticky.is-fixed{ visibility:visible; }
.ed-scroll-tell-sticky.is-bottom{ position:absolute; top:auto; bottom:0; }
.ed-scroll-tell-sticky.is-top{ position:absolute; top:0; }
/* chaotic kinetic-type layout — short phrases of wildly different sizes, scattered
   and overlapping across a fixed box, each fading/sliding in on its own as the
   scroll position reaches it (see script-editorial.js). Deliberately "explosion of
   type" rather than tidy paragraph lines. */
.ed-scroll-tell-chaos{ position:relative; width:100%; max-width:1000px; height:560px; margin:0 auto; }
.ed-scroll-tell-chaos .stf{ position:absolute; font-family:'Fraunces',serif; font-style:italic; font-weight:400; color:var(--ink); line-height:1.05; white-space:nowrap; opacity:0; transform:translateY(24px) scale(.92); transition:opacity .5s cubic-bezier(.16,.8,.3,1), transform .5s cubic-bezier(.16,.8,.3,1); }
.ed-scroll-tell-chaos .stf:nth-of-type(odd){ color:var(--brick); }
.ed-scroll-tell-chaos .stf.lit{ opacity:1; transform:none; }
@media (max-width:760px){
  .ed-scroll-tell{ height:180vh; }
  .ed-scroll-tell-sticky{ padding:0 24px; }
  .ed-scroll-tell-chaos{ height:auto; max-width:420px; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:baseline; justify-content:center; }
  .ed-scroll-tell-chaos .stf{ position:static !important; font-size:20px !important; white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  .ed-scroll-tell{ height:auto; }
  .ed-scroll-tell-sticky{ position:relative; visibility:visible; height:auto; padding:80px 24px; }
  .ed-scroll-tell-chaos .stf{ opacity:1 !important; transform:none !important; }
}

.ed-news{ background:var(--cream-2); padding:120px 0; border-top:1px solid var(--line); position:relative; }
@media (max-width:900px){ .ed-news{ padding:84px 0; } }
.ed-news-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:12px; flex-wrap:wrap; }
.ed-news-head a{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:3px; }
/* text-only news list, à la yuriroga.com's project index — the visual payoff is the
   thumbnail that floats beside the cursor on hover (see .ed-news-preview + the JS that
   drives it) rather than a picture sitting inline with every row. */
/* the latest news item gets a big, colourful "featured" treatment instead of sitting
   in the plain list with the rest — a full-bleed photo, a brick-tinted gradient wash,
   and the title set large in italic Fraunces over it, echoing the hero. The photo
   itself is a separate layer (.nh-bg) so it can zoom on hover independently of the
   text sitting on top of it. */
.ed-news-feature{ display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:stretch; margin-bottom:8px; }
@media (max-width:900px){ .ed-news-feature{ grid-template-columns:1fr; } }
.ed-news-hero{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:420px; border-radius:26px; overflow:hidden; padding:34px; color:#F8F0E2; box-shadow:0 30px 60px -24px rgba(36,20,14,.4); }
.ed-news-hero .nh-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s cubic-bezier(.16,.8,.3,1); z-index:0; }
.ed-news-hero:hover .nh-bg{ transform:scale(1.07); }
.ed-news-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(124,42,26,.15) 0%, rgba(30,18,13,.35) 45%, rgba(20,12,9,.92) 100%); z-index:1; }
.ed-news-hero > *:not(.nh-bg){ position:relative; z-index:2; }
.ed-news-hero .nh-tag{ align-self:flex-start; background:var(--brick); color:#FBF3EA; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:auto; }
.ed-news-hero .nh-date{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#F1D9C8; margin-top:22px; }
.ed-news-hero .nh-t{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(26px,3.2vw,38px); line-height:1.18; margin-top:10px; max-width:26ch; }
.ed-news-hero .nh-arrow{ display:inline-flex; margin-top:22px; font-size:13px; font-weight:700; letter-spacing:.04em; color:#FBF3EA; border-bottom:1px solid rgba(251,243,234,.55); padding-bottom:3px; align-self:flex-start; transition:border-color .3s, transform .3s; }
.ed-news-hero:hover .nh-arrow{ border-color:#FBF3EA; transform:translateX(4px); }
.ed-news-feature .ed-news-list{ display:flex; flex-direction:column; justify-content:center; gap:0; }
@media (max-width:900px){ .ed-news-hero{ min-height:320px; } }

/* the two "media corner" cards — a video-style teaser for Алеко ТВ (thumbnail, play
   button, a small zoom on hover) sitting next to a mascot card for Алекознайко (his
   portrait breaking out of the top of the card), so the pair reads as a distinct,
   more playful strip beneath the plain news list above it. */
.ed-media-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; position:relative; }
@media (min-width:701px){ .ed-media-row::after{ content:''; position:absolute; top:8%; bottom:8%; left:50%; width:1px; background:linear-gradient(180deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent); } }
/* ornamental section divider — a thin line with a small rotated-square accent in the
   middle, used to separate distinct "moments" on the homepage (news / media / etc.)
   more decoratively than a plain rule. */
.ed-ornament-divider{ display:flex; align-items:center; justify-content:center; gap:16px; margin:54px 0; }
.ed-ornament-divider span{ flex:1; max-width:220px; height:1px; background:linear-gradient(90deg, transparent, var(--line-2)); }
.ed-ornament-divider span:last-child{ background:linear-gradient(90deg, var(--line-2), transparent); }
.ed-ornament-divider i{ width:7px; height:7px; background:var(--brick); border-radius:2px; transform:rotate(45deg); flex-shrink:0; }
@media (max-width:800px){ .ed-media-row{ grid-template-columns:1fr; } }
.ed-media-card{ position:relative; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; min-height:180px; }
.ed-media-video{ justify-content:flex-end; padding:26px 28px; color:#F8F0E2; box-shadow:0 24px 48px -20px rgba(20,12,9,.4); }
.ed-media-video .mc-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .8s cubic-bezier(.16,.8,.3,1); }
.ed-media-video:hover .mc-bg{ transform:scale(1.06); }
.ed-media-video::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg, rgba(124,42,26,.25) 0%, rgba(20,12,9,.55) 55%, rgba(14,9,7,.88) 100%); }
.ed-media-video > *:not(.mc-bg){ position:relative; z-index:1; }
.ed-media-video .mc-play{ position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(248,240,226,.16); backdrop-filter:blur(6px); border:1px solid rgba(248,240,226,.4); display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s; }
.ed-media-video:hover .mc-play{ background:var(--brick); transform:scale(1.08); }
.ed-media-card .mc-kicker{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brick-bg); margin-bottom:8px; }
.ed-media-card .mc-t{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:22px; line-height:1.3; margin-bottom:8px; }
.ed-media-card .mc-sub{ font-size:12.5px; line-height:1.6; opacity:.85; max-width:38ch; }
.ed-media-mascot{ background:linear-gradient(200deg, var(--brick) 0%, var(--brick-deep) 70%); padding:24px 26px 26px; flex-direction:column; align-items:flex-start; color:#F8F0E2; box-shadow:0 24px 48px -20px rgba(20,12,9,.4); }
.ed-media-mascot .mc-mascot{ align-self:flex-start; width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--cream-3); border:3px solid rgba(248,240,226,.5); box-shadow:0 10px 22px -8px rgba(20,12,9,.5); margin:0 0 14px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.ed-media-mascot:hover .mc-mascot{ transform:scale(1.08) rotate(-4deg); }
.ed-media-mascot .mc-mascot img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.ed-media-mascot .mc-kicker{ color:var(--brick-bg); }
.ed-media-mascot .mc-t{ color:#F8F0E2; }
.ed-media-mascot .mc-sub{ color:#F8F0E2; opacity:.85; }
.ed-media-mascot .mc-arrow{ position:absolute; top:24px; right:24px; width:34px; height:34px; border-radius:50%; background:rgba(248,240,226,.16); backdrop-filter:blur(6px); border:1px solid rgba(248,240,226,.4); display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s; }
.ed-media-mascot:hover .mc-arrow{ background:#F8F0E2; color:var(--brick-deep); transform:translate(3px,-3px); }
.ed-media-mascot .mc-shape{ position:absolute; border-radius:50%; border:1.5px solid rgba(248,240,226,.25); pointer-events:none; }
.ed-media-mascot .mc-shape.a{ width:70px; height:70px; top:-20px; right:20%; animation:edCoverDrift1 8s ease-in-out infinite; }
.ed-media-mascot .mc-shape.b{ width:36px; height:36px; bottom:14px; right:14px; background:rgba(248,240,226,.08); border:none; animation:edCoverDrift2 6.5s ease-in-out infinite; }

/* rubriki.html — a simple, elegant list of clubs/media rubrics: icon left, title +
   description middle, arrow right, each separated by a soft line rather than boxed
   cards (the page already opens with its own cover banner above). */
.ed-rubric-list{ display:flex; flex-direction:column; }
.ed-rubric-row{ position:relative; display:flex; align-items:center; gap:22px; padding:28px 6px; border-top:1px solid var(--line); transition:padding-left .3s, background .3s; }
.ed-rubric-list .ed-rubric-row:last-child{ border-bottom:1px solid var(--line); }
.ed-rubric-row:hover{ padding-left:14px; background:var(--cream-2); }
.ed-rubric-row .rr-icon{ flex:0 0 auto; width:48px; height:48px; border-radius:50%; background:var(--brick-bg); color:var(--brick); display:flex; align-items:center; justify-content:center; padding:11px; }
.ed-rubric-row .rr-icon svg{ width:100%; height:100%; }
.ed-rubric-row .rr-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:4px; min-width:0; }
.ed-rubric-row .rr-t{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(20px,2.6vw,26px); color:var(--ink); }
.ed-rubric-row .rr-d{ font-size:13px; line-height:1.6; color:var(--ink-soft); max-width:56ch; }
.ed-rubric-row .rr-arrow{ flex:0 0 auto; font-size:20px; color:var(--brick); opacity:0; transform:translateX(-8px); transition:opacity .3s, transform .3s; }
.ed-rubric-row:hover .rr-arrow{ opacity:1; transform:none; }
@media (max-width:640px){ .ed-rubric-row{ gap:14px; padding:22px 4px; } .ed-rubric-row .rr-icon{ width:40px; height:40px; padding:9px; } }

/* homepage news spine — a thin vertical line with a small coloured dot per story
   (colour matching that story's category), replacing the earlier boxed-card list.
   Pure typography, no backgrounds/borders on the items themselves — hovering nudges
   the headline sideways and tints it in the category's colour. */
.ed-news-spine{ position:relative; display:flex; flex-direction:column; padding-left:26px; }
.ed-news-spine::before{ content:''; position:absolute; left:4px; top:8px; bottom:8px; width:1px; background:var(--line-2); }
.ed-news-spine-item{ position:relative; display:block; padding:22px 0; }
.ed-news-spine-item + .ed-news-spine-item{ border-top:1px solid var(--line); }
.ed-news-spine-item .nsi-dot{ position:absolute; left:-26px; top:29px; width:11px; height:11px; border-radius:50%; background:var(--brick); border:3px solid var(--cream-2); box-shadow:0 0 0 1px var(--line-2); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.ed-news-spine-item[data-cat="uchproc"] .nsi-dot{ background:#2F6F66; }
.ed-news-spine-item[data-cat="info"] .nsi-dot{ background:#46586B; }
.ed-news-spine-item:hover .nsi-dot{ transform:scale(1.35); }
.ed-news-spine-item .nsi-meta{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.ed-news-spine-item .nsi-cat{ color:var(--brick); }
.ed-news-spine-item[data-cat="uchproc"] .nsi-cat{ color:#2F6F66; }
.ed-news-spine-item[data-cat="info"] .nsi-cat{ color:#46586B; }
.ed-news-spine-item .nsi-t{ display:block; font-family:'Fraunces',serif; font-weight:400; font-style:italic; font-size:clamp(18px,2.1vw,23px); line-height:1.4; color:var(--ink); transition:transform .4s cubic-bezier(.16,.8,.3,1), color .3s; }
.ed-news-spine-item:hover .nsi-t{ transform:translateX(10px); color:var(--brick); }
@media (max-width:700px){ .ed-news-spine-item{ padding:18px 0; } }

/* novini.html's own full-archive grid — independent from the homepage's text .ed-news-list
   above; same "ed-news-*" family name but a different, older card-grid layout that the
   archive page still relies on. */
.ed-news-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
@media (max-width:900px){ .ed-news-grid{ grid-template-columns:1fr; gap:24px; } }
.ed-news-card{ position:relative; padding:28px 24px; border:1px solid var(--line); border-radius:16px; background:var(--cream-3); transition:border-color .3s, transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s; }
.ed-news-card:hover{ border-color:var(--brick); transform:translateY(-5px); box-shadow:0 20px 38px -16px rgba(36,30,25,.25); }
.ed-news-card .n-tag{ display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brick); border:1px solid var(--brick); border-radius:999px; padding:3px 11px; margin-bottom:14px; }
.ed-news-card .n-t{ font-family:'Fraunces',serif; font-weight:400; font-size:19px; line-height:1.35; color:var(--ink); margin-bottom:8px; }
.ed-news-card .n-d{ font-size:12.5px; color:var(--muted); }
.ed-news-card .n-latest{ position:absolute; top:24px; right:24px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--brick); }
.ed-news-card.hidden{ display:none; }
/* when a news card is also a photo tile, let the tile rules fully take over — drop the
   old card's own padding/border/background/hover so the photo sits flush edge-to-edge */
.ed-news-card.ed-photo-tile{ padding:0; border:0; background:none; }
.ed-news-card.ed-photo-tile:hover{ transform:none; box-shadow:none; }
.ed-news-card.ed-photo-tile .n-latest{ top:16px; right:16px; z-index:1; background:var(--brick); color:#F8F0E2; font-size:9px; padding:4px 10px; border-radius:999px; }

/* ---------- footer ---------- */
.ed-footer{ background:var(--ink); color:#D9CDBA; padding:90px 0 32px; }
@media (max-width:900px){ .ed-footer{ padding:64px 0 24px; } }
.ed-footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:64px; border-bottom:1px solid #3B332B; }
.ed-footer .f-word{ font-family:'Fraunces',serif; font-style:italic; font-size:30px; color:#FBF8F1; }
.ed-footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.ed-footer-col .f-head{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#9C8E77; margin-bottom:16px; }
.ed-footer-col a, .ed-footer-col span{ display:block; font-size:13.5px; color:#D9CDBA; margin-bottom:11px; }
.ed-footer-col a:hover{ color:#fff; }
.ed-footer-col .f-phones a{ display:inline; margin-bottom:0; }
.ed-footer-bottom{ padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:11.5px; color:#7A6E5B; }

.ed-preview-banner{ position:relative; z-index:101; background:var(--ink); color:#F1E6D6; text-align:center; padding:10px 20px; font-size:12px; font-weight:600; line-height:1.5; }
.ed-preview-banner b{ color:#EFC9B7; font-weight:800; }

/* ---------- interior page hero ---------- */
.ed-alekotv-banner{ width:100%; line-height:0; margin-top:76px; }
.ed-alekotv-banner img{ width:100%; height:auto; display:block; max-height:340px; object-fit:cover; }
.ed-alekotv-banner + .ed-page-hero{ padding-top:60px; }

/* Алекознайко page hero — mascot figure standing beside the intro text, with a speech
   bubble callout above him instead of the usual plain page-hero paragraph layout. */
.ed-featured-video{ border-radius:22px; overflow:hidden; box-shadow:0 24px 48px -20px rgba(20,14,10,.35); background:#000; }
.ed-featured-video video{ width:100%; display:block; max-height:520px; }
.ed-alekoznaiko-hero{ padding:184px 0 0; position:relative; }
/* floating doodles either side of the frame — filling the wide empty margins on
   desktop with light line-art (book, notes, pencil, letters) that gently bobs and
   rotates, each on its own speed/delay so they don't move in lockstep. Hidden below
   1100px where there's no room for them anyway. */
.ed-alekoznaiko-deco{ position:absolute; width:44px; height:44px; color:var(--muted); opacity:.55; pointer-events:none; animation:edDecoFloat 5.5s ease-in-out infinite; z-index:0; }
.ed-alekoznaiko-deco svg{ width:100%; height:100%; }
.ed-alekoznaiko-deco.left{ left:clamp(0px,4vw,60px); }
.ed-alekoznaiko-deco.right{ right:clamp(0px,4vw,60px); }
.ed-alekoznaiko-deco.d1{ top:18%; animation-duration:5.2s; }
.ed-alekoznaiko-deco.d2{ top:46%; animation-duration:6.4s; animation-delay:.6s; }
.ed-alekoznaiko-deco.d3{ top:74%; animation-duration:4.8s; animation-delay:1.2s; }
.ed-alekoznaiko-deco.right.d1{ animation-duration:6s; animation-delay:.3s; }
.ed-alekoznaiko-deco.right.d2{ animation-duration:5s; animation-delay:.9s; }
.ed-alekoznaiko-deco.right.d3{ animation-duration:6.8s; animation-delay:1.5s; }
@keyframes edDecoFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-16px) rotate(5deg); } }
@media (max-width:900px){ .ed-alekoznaiko-deco{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ed-alekoznaiko-deco{ animation:none; } }
.ed-alekoznaiko-frame{ display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; background:var(--cream-3); border:1px solid var(--line); border-radius:28px; padding:44px 48px; box-shadow:0 20px 48px -28px rgba(20,14,10,.25); max-width:920px; margin:0 auto; position:relative; z-index:1; }
.ed-alekoznaiko-figure{ position:relative; flex:0 0 auto; width:170px; }
.ed-alekoznaiko-figure img{ width:100%; height:auto; display:block; -webkit-mask-image:radial-gradient(ellipse 64% 64% at 50% 42%, #000 58%, transparent 100%); mask-image:radial-gradient(ellipse 64% 64% at 50% 42%, #000 58%, transparent 100%); }
.ed-alekoznaiko-intro{ flex:0 1 380px; min-width:240px; text-align:left; }
.ed-alekoznaiko-intro .ed-kicker{ font-size:12px; }
.ed-alekoznaiko-name{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(34px,4.4vw,50px); line-height:1.05; color:var(--ink); margin:8px 0 14px; }
.ed-alekoznaiko-intro p{ font-size:14px; line-height:1.7; color:var(--ink-soft); max-width:320px; margin:0; }

/* comic-style speech bubble — rounded balloon with a small triangular tail pointing
   down toward the character, instead of the plain flat callout used elsewhere. */
.ed-comic-bubble{ position:absolute; left:50%; bottom:100%; transform:translateX(-38%); margin-bottom:18px; width:max-content; max-width:210px; background:#fff; border:2.5px solid var(--ink); border-radius:24px; padding:13px 15px; font-size:12px; font-weight:600; line-height:1.45; color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.ed-comic-bubble::before, .ed-comic-bubble::after{ content:''; position:absolute; top:100%; left:34%; border-style:solid; }
.ed-comic-bubble::before{ border-width:14px 7px 0 7px; border-color:var(--ink) transparent transparent transparent; margin-left:-2.5px; }
.ed-comic-bubble::after{ border-width:11px 5px 0 5px; border-color:#fff transparent transparent transparent; margin-top:-3px; }

/* episode video cards — same rounded-tile language as the rest of the site but
   compact, styled like a friendly little box rather than a big featured player. */
.ed-alekoznaiko-video-card, .ed-episode-card{ position:relative; width:min(300px,88vw); background:var(--cream-3); border:1px solid var(--line); border-radius:20px; padding:12px; box-shadow:0 16px 32px -16px rgba(20,14,10,.3); text-align:left; cursor:pointer; transition:transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .4s cubic-bezier(.16,.8,.3,1); }
.ed-alekoznaiko-video-card video, .ed-episode-card-video video{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:13px; display:block; background:#000; }
.ed-alekoznaiko-video-card .ep-tag, .ed-episode-card .ep-tag{ display:block; margin-top:10px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brick); }
.ed-alekoznaiko-video-card .ep-title, .ed-episode-card .ep-title{ display:block; font-family:'Fraunces',serif; font-style:italic; font-size:15px; color:var(--ink); margin-top:2px; }
.ed-episode-card:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -16px rgba(20,14,10,.35); }
/* image-thumbnail variant of the episode card — used where the source is a YouTube
   video (Алеко ТВ) rather than a local file, so the "player" is just a poster image
   with a play badge that opens the shared video preview modal on click. */
.ed-episode-card{ border:0; font:inherit; }
.ed-episode-grid .ed-episode-card{ width:100%; }
.ed-episode-card .ep-thumb{ position:relative; display:block; aspect-ratio:16/9; border-radius:13px; overflow:hidden; background:var(--cream-2); }
.ed-episode-card .ep-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,.8,.3,1); }
.ed-episode-card:hover .ep-thumb img{ transform:scale(1.06); }
.ed-episode-card .v-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:rgba(20,14,10,.5); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; color:#F8F0E2; transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s; }
.ed-episode-card:hover .v-play{ transform:translate(-50%,-50%) scale(1.12); background:var(--brick); }
.ed-episode-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; }
.ed-episode-grid-center{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
@media (max-width:480px){
  .ed-alekoznaiko-video-card, .ed-episode-card{ width:min(260px,80vw); }
  .ed-episode-grid-center{ gap:14px; }
}

@media (max-width:900px){
  .ed-alekoznaiko-hero{ padding-top:150px; }
  .ed-alekoznaiko-frame{ flex-direction:column; text-align:center; padding:36px 26px; gap:20px; }
  .ed-alekoznaiko-figure{ order:2; width:140px; }
  .ed-alekoznaiko-intro{ order:3; text-align:center; }
  .ed-alekoznaiko-intro p{ margin:0 auto; }
  .ed-comic-bubble{ order:1; position:static; transform:none; margin:0 auto; max-width:250px; }
  .ed-comic-bubble::before, .ed-comic-bubble::after{ top:100%; left:50%; }
  .ed-comic-bubble::before{ margin-left:-8px; }
  .ed-comic-bubble::after{ margin-left:-6px; margin-top:-3px; }
}

/* section "cover" banner — a short animated strip at the top of inner pages, echoing
   the section's own theme colour with a motif icon and a few slow-drifting shapes
   behind it, so each area of the site opens with a small moment of its own instead
   of jumping straight to plain text. Sits above .ed-page-hero, which keeps its own
   top padding for the fixed nav; this banner adds its own room below the nav too. */
.ed-cover{ position:relative; height:260px; margin-top:76px; overflow:hidden; background:linear-gradient(135deg, var(--brick), var(--brick-deep)); display:flex; align-items:center; justify-content:center; }
.ed-cover-stack{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 24px; text-align:center; }
.ed-cover-icon{ width:56px; height:56px; color:rgba(255,255,255,.92); animation:edCoverBreathe 4.5s ease-in-out infinite; }
.ed-cover-icon svg{ width:100%; height:100%; }
.ed-cover-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(28px,4.4vw,48px); color:#fff; margin:0; line-height:1.15; }
/* the cover now carries the page's own title (big, inside the banner), so the
   plain kicker+h1 that would otherwise repeat it right below is hidden — the intro
   paragraph and everything else in .ed-page-hero stays. */
.ed-cover + .ed-page-hero > .ed-kicker,
.ed-cover + .ed-page-hero > h1{ display:none; }
/* live abstract figures — circles, lines, polygons that spin/drift/pulse/sway
   continuously and slowly, purely in translucent white so the same set reads fine
   over any of the site's theme-coloured gradients. Rotated across pages via
   COVER_FIGURES in build_pages.py so consecutive pages don't look identical. */
.ed-cover-figures{ position:absolute; inset:0; width:100%; height:100%; }
.ed-cover-figures .sh{ transform-box:fill-box; transform-origin:center; }
.ed-cover-figures .spin-slow{ animation:edCoverSpin 40s linear infinite; }
.ed-cover-figures .spin-slow-rev{ animation:edCoverSpin 55s linear infinite reverse; }
.ed-cover-figures .drift1{ animation:edCoverDrift1 9s ease-in-out infinite; }
.ed-cover-figures .drift2{ animation:edCoverDrift2 7.5s ease-in-out infinite; }
.ed-cover-figures .pulse{ animation:edCoverPulse 3s ease-in-out infinite; }
.ed-cover-figures .pulse2{ animation:edCoverPulse 4.5s ease-in-out infinite .6s; }
.ed-cover-figures .sway{ animation:edCoverSway 7s ease-in-out infinite; }
.ed-cover-figures .sway2{ animation:edCoverSway 9s ease-in-out infinite 1s; }
@keyframes edCoverBreathe{ 0%,100%{ transform:scale(1); opacity:.92; } 50%{ transform:scale(1.08); opacity:1; } }
@keyframes edCoverSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes edCoverDrift1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(18px,14px); } }
@keyframes edCoverDrift2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-16px,-12px); } }
@keyframes edCoverPulse{ 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.6); opacity:1; } }
@keyframes edCoverSway{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
.ed-cover + .ed-page-hero{ padding-top:44px; }
@media (max-width:640px){ .ed-cover{ height:210px; } .ed-cover-icon{ width:42px; height:42px; } .ed-cover-stack{ gap:12px; } .ed-cover + .ed-page-hero{ padding-top:34px; } }
@media (prefers-reduced-motion:reduce){ .ed-cover-icon, .ed-cover-figures .sh{ animation:none; } }

.ed-page-hero{ padding:184px 0 60px; border-bottom:1px solid var(--line); }
@media (max-width:900px){ .ed-page-hero{ padding:144px 0 46px; } }
.ed-page-title{ font-family:'Fraunces',serif; font-weight:400; font-style:italic; font-size:clamp(34px,5.6vw,68px); line-height:1.08; color:var(--ink); letter-spacing:-.5px; margin:14px 0 0; position:relative; display:inline-block; }
.ed-page-title::after{ content:''; position:absolute; left:2px; bottom:-10px; height:3px; width:64px; background:var(--brick); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .7s cubic-bezier(.16,.8,.3,1) .35s; }
.ed-page-title.in::after{ transform:scaleX(1); }
/* small sparkle/dot decorations auto-added (via JS) beside section page titles —
   picking up each page's own theme colour through currentColor/var(--brick), so no
   per-page markup is needed anywhere. Purely cosmetic, hidden on narrow screens. */
.ed-page-deco{ position:absolute; width:26px; height:26px; color:var(--brick); opacity:.45; pointer-events:none; animation:edDecoFloat 5s ease-in-out infinite; }
.ed-page-deco svg{ width:100%; height:100%; }
@media (max-width:760px){ .ed-page-deco{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ed-page-deco{ animation:none; } }
.ed-page-hero p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); max-width:560px; margin:20px 0 0; }

.ed-section{ padding:70px 0 130px; }
@media (max-width:900px){ .ed-section{ padding:54px 0 88px; } }
.ed-section.tight{ padding-top:54px; }

/* ---------- numbered steps (admissions etc) ---------- */
.ed-steps-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px 64px; }
@media (max-width:700px){ .ed-steps-grid{ grid-template-columns:1fr; gap:40px; } }
.ed-step{ transition:transform .35s cubic-bezier(.16,.8,.3,1); }
.ed-step:hover{ transform:translateY(-6px); }
.ed-step .v-n{ display:inline-block; font-family:'Fraunces',serif; font-style:italic; font-size:15px; color:var(--brick); margin-bottom:16px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.ed-step:hover .v-n{ transform:scale(1.3) rotate(-6deg); }
.ed-step .v-t{ font-family:'Fraunces',serif; font-weight:400; font-size:22px; color:var(--ink); margin-bottom:10px; }
.ed-step .v-d{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); max-width:400px; }

.ed-dates-row{ display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:64px; padding-top:36px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft); }
.ed-dates-row .d-item{ display:flex; align-items:center; gap:10px; }
.ed-dates-row .dot{ width:6px; height:6px; border-radius:50%; background:var(--brick); flex-shrink:0; }

/* ---------- subject chips ---------- */
.ed-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 52px; }
.ed-chips span{ font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:9px 18px; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-soft); }

/* ---------- dark highlight card ---------- */
.ed-highlight{ background:var(--ink); color:#F1E6D6; border-radius:2px; padding:38px; display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.ed-highlight .ic{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ed-highlight .t{ font-family:'Fraunces',serif; font-weight:400; font-size:19px; margin-bottom:8px; color:#FBF8F1; }
.ed-highlight .d{ font-size:13.5px; line-height:1.7; color:#D9CDBA; max-width:480px; }
.ed-highlight .cta{ margin-left:auto; align-self:center; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#F1E6D6; border-bottom:1px solid rgba(241,230,214,.5); padding-bottom:4px; flex-shrink:0; }

/* ---------- quick-link grid (parents, students, projects…) ---------- */
/* dividers drawn per-card (border-right/bottom), not via gap+container-background —
   so a card count that doesn't divide evenly into a row (adding a 7th card, say)
   leaves an empty cell that's simply blank instead of an ugly solid-color block */
.ed-quick-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:8px; }
@media (max-width:900px){ .ed-quick-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ed-quick-grid{ grid-template-columns:1fr; } }
.ed-quick-card{ position:relative; background:var(--cream); padding:36px 32px; overflow:hidden; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .3s, transform .3s cubic-bezier(.16,.8,.3,1); }
.ed-quick-card:hover{ background:var(--cream-3); transform:translateY(-5px); }
.ed-quick-card .t{ font-family:'Fraunces',serif; font-weight:400; font-size:19px; color:var(--ink); margin-bottom:8px; transition:color .25s; }
.ed-quick-card:hover .t{ color:var(--brick); }
.ed-quick-card .d{ font-size:13px; color:var(--muted); line-height:1.65; }

/* ---------- team ---------- */
.ed-group-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:22px; color:var(--ink); margin:70px 0 26px; }
.ed-group-title:first-child{ margin-top:0; }
.ed-team-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 28px; }
@media (max-width:900px){ .ed-team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .ed-team-grid{ grid-template-columns:1fr; } }
.ed-team-card{ transition:transform .35s cubic-bezier(.16,.8,.3,1); }
.ed-avatar-tile{ background:var(--cream-2); overflow:hidden; }
.ed-avatar-tile .avatar-fill{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 18px; font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(19px,2.6vw,26px); line-height:1.25; color:var(--brick-bg); background:var(--brick); transition:transform .7s cubic-bezier(.16,.8,.3,1); }
.ed-avatar-tile:hover .avatar-fill{ transform:scale(1.06); }
.ed-avatar-tile .pt-sub{ display:block; font-size:.72em; color:var(--cream-2); opacity:.85; margin-top:4px; }
/* same glossy sweep as the moving belt tiles on the homepage — a soft diagonal
   highlight that glides across on hover, like light off a polished surface. */
.ed-avatar-tile::before{ content:''; position:absolute; top:0; left:-60%; width:38%; height:100%; background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 48%, transparent 100%); transform:skewX(-18deg); pointer-events:none; z-index:2; transition:left .75s cubic-bezier(.16,.8,.3,1); }
.ed-avatar-tile:hover::before{ left:120%; }
.ed-lead-contacts{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 32px; }
@media (max-width:640px){ .ed-lead-contacts{ grid-template-columns:1fr; } }
.ed-lead-contact{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.ed-lead-contact .n{ color:var(--ink); font-weight:600; }
.ed-lead-contact .c{ color:var(--muted); text-align:right; }
.ed-team-card:hover{ transform:translateY(-6px); }
.ed-team-card .avatar{ width:58px; height:58px; border-radius:50%; background:var(--brick-bg); color:var(--brick-deep); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:18px; margin-bottom:16px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.ed-team-card:hover .avatar{ transform:scale(1.1) rotate(-6deg); }
.ed-team-card .name{ font-family:'Fraunces',serif; font-weight:400; font-size:16.5px; color:var(--ink); }
.ed-team-card .role{ font-size:12px; color:var(--brick); margin:4px 0 10px; }
.ed-team-card .contact{ font-size:11.5px; color:var(--muted); line-height:1.7; word-break:break-word; }
.ed-table-wrap{ overflow-x:auto; margin:0 0 18px; }
.ed-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
.ed-table th{ text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.ed-table td{ padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.ed-table tr:hover td{ background:var(--cream-2); }
.ed-table td.email{ color:var(--muted); font-size:11.5px; }
/* flowing article text — used for pages that are prose rather than cards/lists
   (e.g. Визия), styled like the "Нашата история" paragraphs on the homepage. */
.ed-prose p{ font-size:15.5px; line-height:1.85; color:var(--ink-soft); margin:0 0 22px; }
.ed-prose p:last-child{ margin-bottom:0; }
.ed-pull-quote{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(22px,3vw,28px); line-height:1.4; color:var(--brick); border-left:3px solid var(--brick); padding:4px 0 4px 26px; margin:34px 0; }

.ed-note{ font-size:11.5px; color:var(--muted); line-height:1.7; margin:-6px 0 0; }

/* ---------- teacher panels: grade/class cards (начален етап) ---------- */
.ed-grade-block{ margin:0 0 40px; }
.ed-grade-block:last-of-type{ margin-bottom:18px; }
.ed-grade-label{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:15px; color:var(--brick); margin-bottom:14px; }
.ed-class-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.ed-class-card{ position:relative; overflow:hidden; background:var(--cream-3); border:1px solid var(--line); border-top:3px solid var(--brick); padding:24px 26px 22px; transition:transform .35s cubic-bezier(.16,.8,.3,1), border-color .3s, box-shadow .4s cubic-bezier(.16,.8,.3,1); }
.ed-class-card:hover{ box-shadow:0 20px 40px -18px rgba(36,30,25,.25); }
.ed-class-card::before{ content:''; position:absolute; top:0; left:-60%; width:38%; height:100%; background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 48%, transparent 100%); transform:skewX(-18deg); pointer-events:none; z-index:2; transition:left .75s cubic-bezier(.16,.8,.3,1); }
.ed-class-card:hover::before{ left:120%; }
.ed-class-card:hover{ transform:translateY(-5px); border-top-color:var(--brick-deep); }
.ed-class-card .cls{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:25px; color:var(--ink); margin-bottom:10px; }
.ed-class-card .member{ display:flex; flex-direction:column; gap:2px; padding:8px 0; border-top:1px solid var(--line); }
.ed-class-card .member:first-of-type{ border-top:none; padding-top:0; }
.ed-class-card .member .n{ font-size:12.5px; font-weight:600; color:var(--ink); }
.ed-class-card .member .r{ font-size:10.5px; color:var(--muted); }
.ed-class-card .member .e{ font-size:10.5px; color:var(--brick); text-decoration:none; border-bottom:1px dotted transparent; word-break:break-all; margin-top:1px; }
.ed-class-card .member .e:hover{ border-bottom-color:var(--brick); }
.ed-class-card .member .e.muted{ color:var(--muted); font-style:italic; border-bottom:none; }

/* ---------- teacher panels: subject-area panels (прогимназия) ---------- */
.ed-panels-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; }
.ed-subject-panel{ position:relative; overflow:hidden; background:var(--cream-3); border:1px solid var(--line); padding:30px 32px 26px 34px; transition:transform .35s cubic-bezier(.16,.8,.3,1), border-color .3s, box-shadow .4s cubic-bezier(.16,.8,.3,1); }
.ed-subject-panel:hover{ box-shadow:0 20px 40px -18px rgba(36,30,25,.25); }
.ed-subject-panel::after{ content:''; position:absolute; top:0; left:-60%; width:38%; height:100%; background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.5) 48%, transparent 100%); transform:skewX(-18deg); pointer-events:none; z-index:2; transition:left .75s cubic-bezier(.16,.8,.3,1); }
.ed-subject-panel:hover::after{ left:120%; }
.ed-subject-panel::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brick); }
.ed-subject-panel:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.sp-head{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:19px; color:var(--ink); margin-bottom:20px; position:relative; z-index:1; }
.sp-group{ margin-bottom:18px; position:relative; z-index:1; }
.sp-group:last-child{ margin-bottom:0; }
.sp-subject{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:16px; letter-spacing:0; text-transform:none; color:var(--brick); margin-bottom:10px; }
.sp-item{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; padding:7px 0; border-top:1px solid var(--line); }
.sp-item:first-of-type{ border-top:none; padding-top:0; }
.sp-item .n{ color:var(--ink); font-weight:600; }
.sp-item .r{ font-size:10.5px; color:var(--muted); }
.sp-item .e{ font-size:10.5px; color:var(--brick); text-decoration:none; border-bottom:1px dotted transparent; word-break:break-all; margin-top:1px; }
.sp-item .e:hover{ border-bottom-color:var(--brick); }
.sp-item .e.muted{ color:var(--muted); font-style:italic; border-bottom:none; }

/* ---------- news filters / full grid ---------- */
.ed-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:52px; }
.ed-filter-chip{ font-size:12px; font-weight:700; letter-spacing:.03em; padding:9px 20px; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-soft); transition:background .2s,color .2s,border-color .2s; }
.ed-filter-chip:hover{ border-color:var(--ink); }
.ed-filter-chip.active{ background:var(--ink); color:#FBF8F1; border-color:var(--ink); }

/* ---------- documents ---------- */
/* Big clickable category buttons, closed by default — the page starts as a short,
   scannable list of 6 buttons (icon, large title, doc count) instead of one long
   scroll through every document at once; each opens its own panel right below it,
   and more than one can be open at a time since this is a reference index, not a
   single-choice menu. */
.ed-doc-cats{ border-top:1px solid var(--line); }
.ed-doc-cat{ scroll-margin-top:100px; }
.ed-doc-cat.hidden{ display:none; }
.ed-cat-back{ display:inline-flex; align-items:center; gap:6px; margin:0 0 22px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brick); border-bottom:1px solid transparent; transition:border-color .25s, transform .25s; }
.ed-cat-back:hover{ border-color:var(--brick); transform:translateX(-3px); }
/* subsection tiles: browsed as a grid of big square buttons (same visual language as
   the photo tiles above) — clicking one focuses it full-width and hides its siblings
   (reusing the hash-focus mechanism below), so the grid never has to deal with mixed
   row heights from one tile expanding while its neighbour stays short. With only one
   tile left visible, auto-fit naturally stretches it to fill the row on its own. */
.ed-doc-cat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin-bottom:14px; }
.ed-doc-cat-grid .ed-doc-cat{ margin-bottom:0; }
.ed-doc-cat-grid .ed-doc-cat-btn{ flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:0; aspect-ratio:1; padding:26px; position:relative; }
.ed-doc-cat-grid .ed-doc-cat-btn .chev{ position:absolute; top:24px; right:24px; }
.ed-doc-cat-grid .ed-doc-cat-btn .ic{ width:52px; height:52px; margin-bottom:auto; }
.ed-doc-cat-grid .ed-doc-cat-btn .txt{ gap:4px; }
.ed-doc-cat-grid .ed-doc-cat-btn[aria-expanded="true"]{ aspect-ratio:auto; }
@media (max-width:640px){ .ed-doc-cat-grid{ grid-template-columns:1fr 1fr; gap:12px; } .ed-doc-cat-grid .ed-doc-cat-btn{ aspect-ratio:.85; padding:18px; } }

/* Прием / Учебен процес / За родители — subsection list as an editorial "spine"
   (same coloured-dot-on-a-line language as the homepage news list), replacing the
   earlier boxed square-tile buttons that felt too much like a table. Scoped to
   .ed-spine-cats only, so it never touches Документи's own square-tile grid, which
   still uses the original .ed-doc-cat-grid rules above untouched. */
.ed-spine-cats{ position:relative; padding-left:26px; margin-bottom:8px; }
.ed-spine-cats::before{ content:''; position:absolute; left:4px; top:10px; bottom:10px; width:1px; background:var(--line-2); }
.ed-spine-cats .ed-doc-cat{ margin-bottom:0; }
.ed-spine-cats .ed-doc-cat + .ed-doc-cat{ border-top:1px solid var(--line); }
.ed-spine-cats .ed-doc-cat-btn{ background:none; border:none; border-radius:0; padding:22px 0; gap:16px; box-shadow:none !important; transform:none !important; }
.ed-spine-cats .sc-dot{ position:absolute; left:-26px; width:11px; height:11px; border-radius:50%; background:var(--brick); border:3px solid var(--cream); box-shadow:0 0 0 1px var(--line-2); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.ed-spine-cats .ed-doc-cat-btn:hover .sc-dot, .ed-spine-cats .ed-doc-cat-btn[aria-expanded="true"] .sc-dot{ transform:scale(1.3); }
.ed-spine-cats .ed-doc-cat-btn .t{ flex:1; font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(20px,2.6vw,26px); color:var(--ink); line-height:1.3; transition:color .25s, transform .3s; }
.ed-spine-cats .ed-doc-cat-btn .c{ flex:0 0 auto; font-family:'Manrope',sans-serif; font-style:normal; font-size:12px; font-weight:600; color:var(--muted); margin-right:6px; }
.ed-spine-cats .ed-doc-cat-btn:hover .t{ transform:translateX(6px); }
.ed-spine-cats .ed-doc-cat-btn:hover .t, .ed-spine-cats .ed-doc-cat-btn[aria-expanded="true"] .t{ color:var(--brick); }
.ed-spine-cats .ed-doc-cat-btn .chev{ color:var(--muted); }
.ed-spine-cats .ed-doc-cat-btn[aria-expanded="true"] .chev{ color:var(--brick); }
.ed-spine-cats .ed-doc-cat-inner{ padding:0 0 26px; }
/* plain text rows for each sub-item inside an expanded panel — no card box, just a
   bold label and its description, gently indented under the spine. */
.ed-sub-item{ padding:14px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.ed-sub-item:first-child{ border-top:none; padding-top:4px; }
.ed-sub-item .t{ font-size:14px; font-weight:700; color:var(--ink); }
.ed-sub-item .d{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
@media (max-width:640px){ .ed-spine-cats{ padding-left:20px; } .ed-spine-cats .sc-dot{ left:-20px; } }

.ed-doc-cat-btn{ width:100%; display:flex; align-items:center; gap:24px; padding:30px 26px; background:var(--cream-3); border:1px solid var(--line); border-radius:20px; cursor:pointer; text-align:left; transition:border-color .3s, box-shadow .4s cubic-bezier(.16,.8,.3,1), transform .4s cubic-bezier(.16,.8,.3,1); }
.ed-doc-cat-btn:hover{ border-color:var(--brick); box-shadow:0 22px 40px -18px rgba(36,30,25,.25); transform:translateY(-4px); }
.ed-doc-cat-btn[aria-expanded="true"]{ border-color:var(--brick); }
.ed-doc-cat-btn .ic{ width:58px; height:58px; border-radius:16px; background:var(--cream-2); color:var(--brick); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s, color .3s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.ed-doc-cat-btn:hover .ic{ transform:scale(1.1) rotate(-6deg); background:var(--brick-bg); }
.ed-doc-cat-btn:hover .ic{ transform:scale(1.08) rotate(-6deg); }
.ed-doc-cat-btn[aria-expanded="true"] .ic{ background:var(--brick); color:#fff; transform:rotate(-6deg); }
.ed-doc-cat-btn .txt{ flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.ed-doc-cat-btn .t{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(21px,3vw,29px); color:var(--ink); line-height:1.2; transition:color .25s; }
.ed-doc-cat-btn:hover .t, .ed-doc-cat-btn[aria-expanded="true"] .t{ color:var(--brick); }
.ed-doc-cat-btn .c{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ed-doc-cat-btn .chev{ color:var(--muted); flex-shrink:0; display:flex; transition:transform .4s cubic-bezier(.34,1.56,.64,1), color .25s; }
.ed-doc-cat-btn[aria-expanded="true"] .chev{ transform:rotate(90deg); color:var(--brick); }
.ed-doc-cat{ margin-bottom:14px; }
@media (max-width:640px){
  .ed-doc-cat-btn{ gap:14px; padding:22px 18px; }
  .ed-doc-cat-btn .ic{ width:46px; height:46px; border-radius:13px; }
  .ed-doc-cat-btn .ic svg{ width:19px; height:19px; }
}
/* CSS grid-rows trick: animates smoothly to the panel's real (variable) content
   height with no JS measuring and no fixed max-height guess to get wrong. */
.ed-doc-cat-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.16,.8,.3,1); }
.ed-doc-cat-panel.open{ grid-template-rows:1fr; }
.ed-doc-cat-inner{ overflow:hidden; min-height:0; }
.ed-doc-cat-inner .ed-doc-grid{ margin:2px 0 30px; }
/* grid of file "boxes" — same hairline-grid trick as .ed-quick-grid (1px gap on a
   colored background reads as thin dividers) so it matches the rest of the site
   instead of the old flat bordered list. Each box is a card: icon, filename, and
   (for PDFs) a small "open in new tab" icon that appears in the corner on hover.
   Dividers are drawn on each CARD (right/bottom border) rather than via a gap +
   container background: with auto-fill columns, a group whose item count doesn't
   divide evenly into a row (7 items in 5 columns, say) leaves empty grid cells in
   the last row — with the old background-through-the-gap trick those empty cells
   showed as an ugly solid tan block; card-drawn borders mean an empty cell simply
   has nothing in it, blending into the page instead. */
.ed-doc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.ed-doc-card{ position:relative; display:flex; flex-direction:column; gap:16px; background:var(--cream); padding:22px 20px 20px; font-size:15px; color:var(--ink-soft); text-align:left; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .3s, transform .3s cubic-bezier(.16,.8,.3,1); }
.ed-doc-card:hover{ background:var(--cream-3); transform:translateY(-4px); }
.ed-doc-card .fic{ width:36px; height:36px; border-radius:9px; background:var(--cream-2); color:var(--muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .25s, color .25s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.ed-doc-card:hover .fic{ background:var(--brick); color:#fff; transform:rotate(-8deg) scale(1.08); }
.ed-doc-card .fname{ line-height:1.42; color:var(--ink); font-weight:600; transition:color .25s; }
.ed-doc-card:hover .fname{ color:var(--brick); }
/* PDF cards use a <button> for "fname" (opens the preview modal) instead of a plain
   span — reset default button chrome so it reads identically to the plain-link cards,
   and stretch it to fill the remaining card height so the whole box is clickable */
.ed-doc-card .fname{ appearance:none; background:none; border:0; font:inherit; text-align:left; cursor:pointer; padding:0; }
.ed-doc-card .doc-preview{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin:0; flex:1; }
.ed-doc-card .doc-preview.muted{ font-style:italic; color:var(--muted); }
.ed-doc-card .doc-actions{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:6px; }
.ed-doc-card .doc-act-preview{ appearance:none; background:none; border:0; padding:0; font:inherit; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--muted); cursor:pointer; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.ed-doc-card .doc-act-preview:hover{ color:var(--ink); border-color:var(--ink); }
.ed-doc-card .doc-act-download{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--brick); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.ed-doc-card .doc-act-download:hover{ color:var(--brick-deep); border-color:var(--brick-deep); }
.ed-doc-contact{ font-size:12.5px; color:var(--muted); margin-top:16px; line-height:1.75; }

/* current page marker in overlay menu */
/* current-page marker now lives on .ed-ov-item / .ed-ov-panel a / .ed-ov-panel-mobile a — see above */

/* ---------- generic reveal stagger for repeating grids/lists ---------- */
.ed-team-grid > *:nth-child(1),.ed-quick-grid > *:nth-child(1),.ed-news-grid > *:nth-child(1),.ed-doc-grid > *:nth-child(1){ transition-delay:.02s; }
.ed-team-grid > *:nth-child(2),.ed-quick-grid > *:nth-child(2),.ed-news-grid > *:nth-child(2),.ed-doc-grid > *:nth-child(2){ transition-delay:.06s; }
.ed-team-grid > *:nth-child(3),.ed-quick-grid > *:nth-child(3),.ed-news-grid > *:nth-child(3),.ed-doc-grid > *:nth-child(3){ transition-delay:.1s; }
.ed-team-grid > *:nth-child(4),.ed-quick-grid > *:nth-child(4),.ed-news-grid > *:nth-child(4),.ed-doc-grid > *:nth-child(4){ transition-delay:.14s; }
.ed-quick-grid > *:nth-child(5),.ed-news-grid > *:nth-child(5),.ed-doc-grid > *:nth-child(5){ transition-delay:.18s; }
.ed-quick-grid > *:nth-child(6),.ed-doc-grid > *:nth-child(6){ transition-delay:.22s; }
.ed-doc-grid > *:nth-child(7){ transition-delay:.26s; }

/* ---------- document preview modal (dokumenti.html only) ---------- */
.ed-doc-preview{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:32px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.ed-doc-preview.open{ opacity:1; pointer-events:auto; }
.ed-doc-preview-backdrop{ position:absolute; inset:0; background:rgba(36,30,25,.72); }
.ed-doc-preview-panel{ position:relative; width:min(920px,100%); height:min(86vh,880px); background:var(--cream-3); border:1px solid var(--line-2); box-shadow:0 30px 80px rgba(0,0,0,.35); display:flex; flex-direction:column; transform:translateY(18px) scale(.98); transition:transform .4s cubic-bezier(.16,.8,.3,1); }
.ed-doc-preview.open .ed-doc-preview-panel{ transform:none; }
.ed-doc-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px 15px 22px; border-bottom:1px solid var(--line); flex-shrink:0; }
.ed-doc-preview-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ed-doc-preview-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.ed-doc-preview-openlink{ font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--brick); text-decoration:none; border-bottom:1px solid var(--brick); white-space:nowrap; }
.ed-doc-preview-close{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); background:var(--cream); color:var(--ink-soft); font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s, color .25s, transform .3s; flex-shrink:0; }
.ed-doc-preview-close:hover{ background:var(--brick); color:#fff; border-color:var(--brick); transform:rotate(90deg); }
.ed-doc-preview-body{ position:relative; flex:1; background:var(--cream-2); min-height:0; }
.ed-doc-preview-body iframe{ width:100%; height:100%; border:0; display:block; background:#fff; }
.ed-doc-preview-body img{ width:100%; height:100%; object-fit:contain; display:block; background:var(--cream-2); }
.ed-doc-preview-fallback{ position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:10.5px; color:var(--muted); margin:0; pointer-events:none; }
@media (max-width:640px){ .ed-doc-preview{ padding:0; } .ed-doc-preview-panel{ width:100%; height:100%; border:0; } }
@media (prefers-reduced-motion:reduce){ .ed-doc-preview, .ed-doc-preview-panel, .ed-doc-preview-close{ transition:none; } }

/* video preview modal (Алеко ТВ) — same chrome as the document preview modal above,
   holding a YouTube embed instead of a PDF. Tiles are buttons (not links) so a click
   opens this instead of navigating away; "Отвори в YouTube" still leaves the site. */
.ed-video-preview{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:32px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.ed-video-preview.open{ opacity:1; pointer-events:auto; }
.ed-video-preview-backdrop{ position:absolute; inset:0; background:rgba(20,14,10,.8); }
.ed-video-preview-panel{ position:relative; width:min(920px,100%); background:#000; border:1px solid var(--line-2); box-shadow:0 30px 80px rgba(0,0,0,.4); display:flex; flex-direction:column; transform:translateY(18px) scale(.98); transition:transform .4s cubic-bezier(.16,.8,.3,1); }
.ed-video-preview.open .ed-video-preview-panel{ transform:none; }
.ed-video-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px 13px 20px; background:var(--cream-3); flex-shrink:0; }
.ed-video-preview-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ed-video-preview-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.ed-video-preview-body{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.ed-video-preview-body iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:640px){ .ed-video-preview{ padding:0; } .ed-video-preview-panel{ width:100%; } }
@media (prefers-reduced-motion:reduce){ .ed-video-preview, .ed-video-preview-panel{ transition:none; } }

/* floating chat widget — Алекознайко. Demo/placeholder logic for now (canned answers
   in script-editorial.js), visual shell built to be swapped for a real assistant later
   without touching markup. Fixed bottom-right on every page, above everything except
   the grain overlay. */
.ed-chat-widget{ position:fixed; right:22px; bottom:22px; z-index:400; }
.ed-chat-fab{ width:64px; height:64px; border-radius:50%; overflow:hidden; border:3px solid var(--cream-3); box-shadow:0 16px 32px -10px rgba(20,12,9,.45); background:var(--brick-bg); cursor:pointer; position:relative; transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s, visibility .25s; }
.ed-chat-fab:hover{ transform:scale(1.06) translateY(-2px); }
.ed-chat-fab img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.ed-chat-fab.hidden{ opacity:0; visibility:hidden; transform:scale(.7); pointer-events:none; }
.ed-chat-ping{ position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:#6E9C5C; border:2px solid var(--cream-3); }
.ed-chat-ping::after{ content:''; position:absolute; inset:0; border-radius:50%; background:#6E9C5C; animation:edChatPing 2.2s cubic-bezier(.16,.8,.3,1) infinite; }
@keyframes edChatPing{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.4); opacity:0; } }

.ed-chat-panel{ position:absolute; right:0; bottom:0; width:346px; max-width:calc(100vw - 32px); height:490px; max-height:calc(100vh - 120px); background:var(--cream-3); border-radius:24px; box-shadow:0 30px 70px -18px rgba(20,12,9,.5); display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(16px) scale(.96); transform-origin:bottom right; pointer-events:none; transition:opacity .3s cubic-bezier(.16,.8,.3,1), transform .35s cubic-bezier(.16,.8,.3,1); }
.ed-chat-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.ed-chat-header{ display:flex; align-items:center; gap:12px; padding:16px 16px 16px 18px; background:var(--brick); color:#FBF3EA; flex-shrink:0; }
.ed-chat-header img{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:top center; border:2px solid rgba(251,243,234,.5); flex-shrink:0; }
.ed-chat-header .ch-info{ flex:1; min-width:0; }
.ed-chat-header .ch-name{ font-family:'Fraunces',serif; font-style:italic; font-size:16px; line-height:1.2; }
.ed-chat-header .ch-status{ display:flex; align-items:center; gap:5px; font-size:11px; color:#F1D9C8; margin-top:2px; }
.ed-chat-header .ch-status .dot{ width:6px; height:6px; border-radius:50%; background:#8FCB7A; flex-shrink:0; }
.ed-chat-close{ background:rgba(251,243,234,.14); border:0; width:30px; height:30px; border-radius:50%; color:#FBF3EA; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .25s; }
.ed-chat-close:hover{ background:rgba(251,243,234,.28); }

.ed-chat-body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.ed-chat-msg{ max-width:82%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.55; }
.ed-chat-msg.bot{ align-self:flex-start; background:var(--cream-2); color:var(--ink); border-bottom-left-radius:4px; }
.ed-chat-msg.user{ align-self:flex-end; background:var(--brick); color:#FBF3EA; border-bottom-right-radius:4px; }
.ed-chat-msg.bot.typing{ opacity:.55; animation:edChatPulse 1.1s ease-in-out infinite; }
@keyframes edChatPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.8; } }

.ed-chat-quick{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; flex-shrink:0; }
.ed-chat-quick .qc{ font-size:11.5px; font-weight:600; color:var(--brick); background:var(--brick-bg); border:0; border-radius:999px; padding:7px 13px; cursor:pointer; transition:background .25s, transform .25s; }
.ed-chat-quick .qc:hover{ background:var(--brick); color:#FBF3EA; transform:translateY(-1px); }

.ed-chat-input{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--line); flex-shrink:0; background:var(--cream-3); }
.ed-chat-input input{ flex:1; min-width:0; border:0; background:var(--cream-2); border-radius:999px; padding:11px 16px; font-size:13.5px; font-family:inherit; color:var(--ink); }
.ed-chat-input input:focus{ outline:2px solid var(--brick); outline-offset:1px; }
.ed-chat-input button{ width:38px; height:38px; border-radius:50%; background:var(--brick); color:#FBF3EA; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform .25s, background .25s; }
.ed-chat-input button:hover{ transform:scale(1.06); background:var(--brick-deep); }

@media (max-width:520px){
  .ed-chat-widget{ right:14px; bottom:14px; }
  .ed-chat-fab{ width:56px; height:56px; }
  .ed-chat-panel{ width:calc(100vw - 24px); height:calc(100vh - 100px); border-radius:20px; }
}
@media (prefers-reduced-motion:reduce){ .ed-chat-ping::after{ animation:none; } }