/* =========================================================================
   RUSDRAM — Azerbaijan State Academic Russian Drama Theatre (Samad Vurgun)
   Shared design system. Theme: "drama & light" — velvet curtain, brass, the
   paper of a playbill, spotlight from the dark. Each page layers its own scene.
   ========================================================================= */

:root {
  /* palette */
  --black:     #0c0a0b;  /* house-lights-down black */
  --black-2:   #141012;  /* raised panel */
  --black-3:   #1c1619;  /* card on black */
  --velvet:    #7a1626;  /* curtain burgundy */
  --velvet-br: #a01f30;  /* lit velvet */
  --velvet-dp: #470c14;  /* deep fold */
  --brass:     #c9a24b;  /* brass / gilt */
  --brass-br:  #e7cd84;  /* lit brass highlight */
  --brass-dp:  #9a7a2f;
  --paper:     #f3e9d6;  /* playbill paper */
  --paper-2:   #e7d9bd;  /* aged paper */
  --ink:       #1a1413;  /* ink on paper */
  --ink-soft:  #4a3f38;
  --smoke:     rgba(243,233,214,.72); /* body text on dark */
  --smoke-dim: rgba(243,233,214,.5);
  --line:      rgba(201,162,75,.22);  /* brass hairline */

  /* fonts — multilingual: Latin + Cyrillic + Hebrew */
  --f-display: "Playfair Display", "Frank Ruhl Libre", Georgia, serif;
  --f-serif:   "Cormorant Garamond", "Frank Ruhl Libre", Georgia, serif;
  --f-body:    "Inter", "Heebo", system-ui, -apple-system, sans-serif;
  --f-mono:    "Cormorant Garamond", Georgia, serif;

  --maxw: 1240px;
  --header-h: 78px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  color: var(--smoke);
  background: var(--black);
  line-height: 1.7;
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--velvet-br); color: var(--paper); }

h1,h2,h3,h4 { line-height: 1.04; font-weight: 700; }

.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.container-wide { width: min(100% - 1.6rem, 1500px); margin-inline: auto; }

/* ---- kicker / eyebrow (theatrical brass label) ---- */
.kicker {
  font-family: var(--f-body);
  font-weight: 600; font-size: .72rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--brass);
  display: inline-flex; align-items: center; gap: .7em;
}
.kicker::before {
  content: ""; width: 2.4em; height: 1px; background: currentColor; opacity: .7;
}
[dir="rtl"] .kicker { letter-spacing: .08em; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-body); font-weight: 600;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 1em 1.7em; border-radius: 2px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn-primary {
  background: linear-gradient(120deg, var(--velvet), var(--velvet-br));
  color: var(--paper);
  box-shadow: 0 12px 34px -14px rgba(160,31,48,.8);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 46px -16px rgba(160,31,48,.9); }
.btn-gold {
  background: linear-gradient(120deg, var(--brass), var(--brass-br));
  color: #2a1d05;
  box-shadow: 0 12px 34px -14px rgba(201,162,75,.6);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 46px -16px rgba(201,162,75,.75); }
.btn-ghost { border: 1px solid var(--brass); color: var(--brass); }
.btn-ghost:hover { transform: translateY(-3px); background: rgba(201,162,75,.1); color: var(--brass-br); }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  height: var(--header-h); display: flex; align-items: center;
  transition: background .4s var(--ease), backdrop-filter .4s, box-shadow .4s, height .4s;
}
.site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,6,7,.75), rgba(8,6,7,0));
  transition: opacity .4s;
}
.site-header.scrolled {
  height: 64px;
  background: rgba(12,10,11,.86);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px #000;
}
.site-header.scrolled::after { opacity: 0; }

.header-inner {
  width: min(100% - 2.4rem, 1500px); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--paper); }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--f-display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: .04em; color: var(--paper);
}
.brand-tag {
  font-size: .56rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brass); margin-top: .28rem; font-weight: 600;
}
[dir="rtl"] .brand-tag { letter-spacing: .08em; }

.site-nav {
  display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.6rem);
  margin-inline-start: auto;
}
.site-nav a {
  color: var(--smoke); font-weight: 500; font-size: .82rem;
  letter-spacing: .05em; position: relative; padding: .4rem 0; white-space: nowrap;
}
.site-nav a::after {
  content: ""; position: absolute; inset-block-end: -2px; inset-inline-start: 0;
  width: 0; height: 1.5px; background: var(--brass); transition: width .3s var(--ease);
}
.site-nav a:hover { color: var(--paper); }
.site-nav a:hover::after, .site-nav a.active::after { width: 100%; }
.site-nav a.active { color: var(--brass); }

/* language switcher */
.lang { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--paper); font-weight: 600; font-size: .74rem;
  letter-spacing: .1em; padding: .5em .85em;
  border: 1px solid var(--line); border-radius: 2px;
  transition: border-color .3s, background .3s;
}
.lang-toggle:hover { border-color: var(--brass); background: rgba(201,162,75,.08); }
.lang-toggle svg { width: 1em; height: 1em; }
.lang-menu {
  position: absolute; inset-block-start: calc(100% + .6rem); inset-inline-end: 0;
  background: rgba(20,16,18,.98); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 4px;
  padding: .4rem; min-width: 160px; display: none; flex-direction: column;
  box-shadow: 0 24px 50px -18px #000; z-index: 120;
}
[dir="rtl"] .lang-menu { inset-inline-end: auto; inset-inline-start: 0; }
.lang-menu.open { display: flex; animation: pop .25s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px); } }
.lang-opt {
  text-align: start; color: var(--smoke); padding: .6rem .8rem;
  border-radius: 2px; font-weight: 600; font-size: .85rem; transition: background .2s, color .2s;
}
.lang-opt:hover { background: rgba(201,162,75,.1); color: var(--paper); }
.lang-opt.is-active { color: var(--brass); background: rgba(201,162,75,.14); }

.nav-burger {
  display: none; width: 44px; height: 44px; position: relative; color: var(--paper);
  margin-inline-start: .2rem;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; inset-inline: 10px; height: 2px; background: currentColor;
  transition: transform .3s var(--ease), opacity .3s;
}
.nav-burger span { inset-block-start: 21px; }
.nav-burger span::before { inset-block-start: -7px; }
.nav-burger span::after { inset-block-start: 7px; }
.nav-burger.open span { background: transparent; }
.nav-burger.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-burger { display: block; order: 3; }
  .lang { order: 2; margin-inline-start: auto; }
  .site-nav {
    position: fixed; inset-block-start: 0; inset-inline-end: 0;
    height: 100dvh; width: min(84vw, 380px);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.3rem; padding: 2rem 2.6rem;
    background: linear-gradient(180deg, rgba(18,8,11,.99), rgba(12,10,11,.99));
    border-inline-start: 1px solid var(--line);
    transform: translateX(110%); transition: transform .45s var(--ease); margin: 0;
  }
  [dir="rtl"] .site-nav { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-110%); }
  .site-nav.open { transform: translateX(0); }
  .site-nav a { font-size: 1.25rem; font-family: var(--f-display); }
}

/* =========================================================================
   FOOTER (shared)
   ========================================================================= */
.site-footer {
  background: var(--black-2); color: var(--smoke-dim);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem; position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 2.4rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--line);
}
.footer-brand .brand { color: var(--paper); margin-bottom: 1rem; }
.footer-brand p { max-width: 38ch; font-size: .9rem; line-height: 1.7; }
.footer-col h4 {
  font-family: var(--f-body); font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 1.1rem; font-weight: 700;
}
.footer-col a, .footer-col p { display: block; padding: .32rem 0; font-size: .9rem; transition: color .25s, padding-inline-start .25s; }
.footer-col a:hover { color: var(--paper); padding-inline-start: .4rem; }
.footer-bottom {
  padding-top: 1.6rem; font-size: .76rem; line-height: 1.8; opacity: .6;
  display: flex; flex-direction: column; gap: .3rem;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* =========================================================================
   SCROLL REVEAL + shared helpers
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .4s; } .reveal.d6 { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(6,4,5,.95); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 4vw; cursor: zoom-out;
}
.lightbox.open { display: flex; animation: pop .3s var(--ease); }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 4px; box-shadow: 0 30px 80px -20px #000; }
.lightbox .lb-cap { position: absolute; inset-block-end: 5vh; inset-inline: 0; text-align: center; color: var(--smoke); font-size: .9rem; }

/* generic section heading */
.section-head { max-width: 64ch; }
.section-head .kicker { margin-bottom: 1rem; }
.section-head h2 { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2.8vw, 3.6rem); line-height: 1.05; color: var(--paper); }
.section-head p { margin-top: 1rem; color: var(--smoke-dim); font-size: 1.05rem; }

/* decorative brass rule */
.rule-gold { width: 64px; height: 2px; background: linear-gradient(90deg, var(--brass), transparent); border: 0; }

/* curtain top accent (reusable) */
.curtain-edge {
  height: 14px; width: 100%;
  background:
    radial-gradient(14px 14px at 14px 0, var(--velvet-dp) 60%, transparent 62%) repeat-x;
  background-size: 28px 14px;
  opacity: .9;
}

/* ===== jnews.az attribution bar — marquee ===== */
.jbar{position:fixed;top:0;left:0;right:0;z-index:200;height:38px;display:flex;align-items:center;
  gap:.7rem;background:#0c0d11;color:#cfcdc4;font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:.78rem;line-height:1;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.jbar-logo{font-weight:800;color:#fff;font-size:.9rem;flex-shrink:0;text-decoration:none;white-space:nowrap;transition:color .25s}
.jbar-logo b{color:#e0a93a;font-weight:800}
.jbar-logo:hover{color:#e0a93a}
.jbar-sep{color:rgba(255,255,255,.28);flex-shrink:0}
.jbar-marquee{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.jbar-track{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;
  color:#a9a79d;font-weight:500;animation:jbarscroll 40s linear infinite;will-change:transform}
.jbar-marquee:hover .jbar-track{animation-play-state:paused}
.jbar-track span{padding-right:3.5rem}
[dir="rtl"] .jbar-track span{padding-right:0;padding-left:3.5rem}
@keyframes jbarscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .jbar-track{animation-name:jbarscroll-rtl}
@keyframes jbarscroll-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
.site-header{top:38px!important}
@media(max-width:600px){.jbar{font-size:.72rem;gap:.5rem}.jbar-logo{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.jbar-track{animation:none}}