/* =========================================================================
   7 ОКТЯБРЯ — мемориал. Shared design system (kubinka architecture, dark theme).
   Theme: "поминальный свет" — coal black, candle gold, hostage-ribbon yellow, ash.
   Grave, dignified, humane.
   ========================================================================= */

:root {
  --bg:       #0d0c0f;  /* coal black            */
  --bg-2:     #15131a;  /* tinted panel          */
  --bg-card:  #1a1820;  /* raised card           */
  --ink:      #ece6da;  /* candlelight text      */
  --ink-soft: #b1a99b;  /* muted ash-tan         */
  --terra:    #d9a441;  /* candle gold (primary) */
  --terra-dp: #b9862f;
  --ochre:    #f0c33a;  /* ribbon yellow         */
  --ochre-dp: #d6a92a;
  --teal:     #6f7a83;  /* slate (3rd accent)    */
  --teal-dp:  #515b63;
  --stone:    #8a8276;
  --line:     rgba(236,230,218,.16);
  --line-soft:rgba(236,230,218,.08);

  --f-display:"Cormorant Garamond", "Frank Ruhl Libre", Georgia, serif;
  --f-body:   "Inter", "Heebo", system-ui, -apple-system, sans-serif;
  --f-accent: "Cormorant Garamond", "Frank Ruhl Libre", Georgia, serif;

  --maxw: 1200px;
  --header-h: 78px;
  --r: 6px;
  --r-lg: 12px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow: 0 24px 54px -28px rgba(0,0,0,.8);
}

*, *::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(--ink); background: var(--bg);
  line-height: 1.75; font-size: clamp(1rem,.95rem+.25vw,1.1rem);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(60% 40% at 50% -5%, rgba(217,164,65,.08), transparent 60%); }
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(--terra); color: var(--bg); }
h1,h2,h3,h4 { line-height: 1.12; font-weight: 600; font-family: var(--f-display); }

.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; position:relative; z-index:1; }
.container-wide { width: min(100% - 1.6rem, 1440px); margin-inline: auto; }

.kicker {
  font-family: var(--f-body); font-weight: 700; font-size: .72rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--terra);
  display: inline-flex; align-items: center; gap: .7em;
}
.kicker::before { content:""; width: 2.2em; height: 1px; background: currentColor; opacity: .7; }
[dir="rtl"] .kicker { letter-spacing: .08em; }

.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-body); font-weight: 600; font-size: .86rem; letter-spacing: .03em;
  padding: .9em 1.7em; border-radius: var(--r);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn-primary { background: var(--terra); color: #1a1206; font-weight:700; box-shadow: 0 12px 26px -12px rgba(217,164,65,.5); }
.btn-primary:hover { transform: translateY(-3px); background: var(--ochre); }
.btn-ghost { border: 1.5px solid currentColor; color:#fff; }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--terra); color: var(--terra); }

/* ============ 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 0 -34px 0; z-index:-1; pointer-events:none; background: linear-gradient(to bottom, rgba(5,4,6,.85) 0%, rgba(5,4,6,.45) 55%, transparent 100%); transition: opacity .4s; }
.site-header.scrolled { height: 64px; background: rgba(13,12,15,.94); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 8px 26px -16px rgba(0,0,0,.7); border-bottom: 1px solid var(--line-soft); }
.site-header.scrolled::after { opacity: 0; }

.header-inner { width: min(100% - 2.4rem, 1440px); margin-inline:auto; display:flex; align-items:center; gap:1.4rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:#fff; transition: color .4s; }
.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:600; font-size:1.3rem; letter-spacing:.01em; }
.brand-tag { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; opacity:.78; margin-top:.22rem; font-weight:600; font-family:var(--f-body); }
[dir="rtl"] .brand-tag { letter-spacing:.06em; }

.site-nav { display:flex; align-items:center; gap:clamp(.5rem,1.3vw,1.4rem); margin-inline-start:auto; }
.site-nav a { color: rgba(236,230,218,.82); font-weight:600; font-size:.84rem; position:relative; padding:.4rem 0; white-space:nowrap; transition: color .3s; }
.site-nav a::after { content:""; position:absolute; inset-block-end:-3px; inset-inline-start:0; width:0; height:2px; background: var(--terra); transition: width .3s var(--ease); }
.site-nav a:hover { color:#fff; }
.site-nav a:hover::after, .site-nav a.active::after { width:100%; }
.site-nav a.active { color: var(--terra); }

.lang { position:relative; }
.lang-toggle { display:inline-flex; align-items:center; gap:.4em; color:#fff; font-family:var(--f-body); font-weight:700; font-size:.76rem; letter-spacing:.04em; padding:.5em .85em; border:1.5px solid rgba(255,255,255,.4); border-radius:var(--r); transition:.3s; }
.lang-toggle:hover { background: rgba(255,255,255,.12); border-color: var(--terra); }
.lang-toggle svg { width:1em; height:1em; }
.lang-menu { position:absolute; inset-block-start:calc(100% + .5rem); inset-inline-end:0; background: var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:.4rem; min-width:160px; display:none; flex-direction:column; box-shadow: var(--shadow); 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(--ink-soft); padding:.6rem .8rem; border-radius:var(--r); font-weight:600; font-size:.88rem; transition:.2s; }
.lang-opt:hover { background: var(--bg-2); color: var(--ink); }
.lang-opt.is-active { color: var(--terra); background: var(--bg-2); }

.nav-burger { display:none; width:44px; height:44px; position:relative; color:#fff; 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,360px); flex-direction:column; align-items:flex-start; justify-content:center; gap:1.3rem; padding:2rem 2.4rem; background: var(--bg-card); box-shadow:-20px 0 50px -30px rgba(0,0,0,.7); 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{ color: var(--ink); font-size:1.2rem; font-family: var(--f-display); }
}

/* ============ FOOTER ============ */
.site-footer { background: #08070a; color: rgba(236,230,218,.66); padding: clamp(3rem,6vw,5rem) 0 2rem; position:relative; }
.site-footer::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background: linear-gradient(90deg, var(--terra), var(--ochre)); }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:2.4rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(236,230,218,.12); }
.footer-brand .brand{ color:#fff; margin-bottom:1rem; } .footer-brand p{ max-width:44ch; font-size:.9rem; }
.footer-col h4 { font-family:var(--f-body); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--terra); margin-bottom:1rem; font-weight:700; }
.footer-col a, .footer-col p { display:block; padding:.3rem 0; font-size:.9rem; transition: color .25s, padding-inline-start .25s; }
.footer-col a:hover { color:#fff; padding-inline-start:.4rem; }
.footer-bottom { padding-top:1.5rem; font-size:.76rem; line-height:1.8; opacity:.6; display:flex; flex-direction:column; gap:.3rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }

/* ============ REVEAL + helpers ============ */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s 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 { position:fixed; inset:0; z-index:200; display:none; background: rgba(5,4,6,.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:var(--r); box-shadow: 0 30px 80px -20px #000; }
.lightbox .lb-cap { position:absolute; inset-block-end:5vh; inset-inline:0; text-align:center; color: rgba(236,230,218,.85); font-size:.9rem; }

/* page-hero shared */
.page-hero { position:relative; min-height:56vh; display:flex; align-items:flex-end; padding: calc(var(--header-h) + 4rem) 0 3rem; text-align:center; overflow:hidden; isolation:isolate; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(8,6,9,.55) 0%, rgba(8,6,9,.6) 45%, rgba(8,6,9,.95) 100%); }
.page-hero .container { position:relative; }
.page-hero .kicker { justify-content:center; margin-bottom:1rem; color:#fff; }
.page-hero .kicker::before { background: var(--ochre); }
.page-hero h1 { font-size: clamp(2.4rem,1.6rem+3.8vw,4.6rem); color:#fff; text-shadow: 0 8px 30px rgba(0,0,0,.5); }
.page-hero p { max-width: 62ch; margin: 1.1rem auto 0; color: rgba(236,230,218,.9); font-size: 1.08rem; font-family: var(--f-accent); font-style: italic; }

.section-head { max-width: 64ch; }
.section-head .kicker { margin-bottom: 1rem; }
.section-head h2 { font-size: clamp(2rem,1.4rem+2.6vw,3.2rem); color: var(--ink); }
.section-head p { margin-top: 1rem; color: var(--ink-soft); }
.note-line { text-align: center; font-size: .84rem; color: var(--ink-soft); font-style: italic; }

/* ===== 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:#08090c;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 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.jbar-track{display:flex;width:max-content;align-items:center;white-space:nowrap;text-decoration:none;
  color:#a9a79d;font-weight:500;animation:jbarscroll 38s linear infinite;will-change:transform}
.jbar-marquee:hover .jbar-track{animation-play-state:paused}
.jbar-track span{padding-right:3.5rem;flex-shrink:0}
[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;width:auto;display:block;overflow:hidden;text-overflow:ellipsis}
  .jbar-track span[aria-hidden]{display:none}
  .jbar-marquee{-webkit-mask-image:none;mask-image:none}
}