/* =========================================================================
   KUBINKA — historic Baku quarter. Shared design system.
   Theme: "memory of a vanishing quarter" — warm sandstone & ochre, terracotta,
   dusty teal shutters, old-photograph sepia. Heritage, humane, serious.
   ========================================================================= */

:root {
  --bg:       #f6efe1;  /* warm paper */
  --bg-2:     #ece0c9;  /* aged sand panel */
  --bg-card:  #fbf7ec;
  --ink:      #2a2018;  /* warm dark brown */
  --ink-soft: #6c5d4c;
  --terra:    #b5532c;  /* terracotta accent */
  --terra-dp: #8f3f20;
  --ochre:    #c4912f;  /* ochre / brass */
  --ochre-dp: #a3771f;
  --teal:     #5d8a85;  /* dusty shutter teal */
  --teal-dp:  #3e635f;
  --stone:    #8a7a62;
  --line:     rgba(42,32,24,.14);
  --line-soft:rgba(42,32,24,.08);

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

  --maxw: 1200px;
  --header-h: 78px;
  --r: 6px;
  --r-lg: 12px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow: 0 18px 44px -24px rgba(42,30,18,.5);
}

*, *::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;
}
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.1; font-weight: 700; font-family: var(--f-display); }

.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.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: var(--bg); box-shadow: 0 12px 26px -12px rgba(143,63,32,.6); }
.btn-primary:hover { transform: translateY(-3px); background: var(--terra-dp); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { transform: translateY(-3px); }
.btn-ghost { border: 1.5px solid currentColor; }
.btn-ghost:hover { transform: translateY(-3px); }

/* ============ HEADER (transparent over hero → paper on scroll) ============ */
.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(10,7,3,.82) 0%, rgba(10,7,3,.46) 55%, transparent 100%); transition: opacity .4s; }
.site-header.scrolled { height: 64px; background: rgba(247,241,228,.97); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 8px 26px -16px rgba(42,30,18,.55); 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; }
.scrolled .brand { color: var(--ink); }
.brand-mark { width: 40px; height: 40px; 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.22rem; letter-spacing:.01em; }
.brand-tag { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; opacity:.82; 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.5rem); margin-inline-start:auto; }
.site-nav a { color: rgba(255,255,255,.9); font-weight:600; font-size:.84rem; position:relative; padding:.4rem 0; white-space:nowrap; transition: color .3s; }
.scrolled .site-nav a { color: var(--ink-soft); }
.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; } .scrolled .site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after, .site-nav a.active::after { width:100%; }
.scrolled .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,.5); border-radius:var(--r); transition:.3s; }
.scrolled .lang-toggle { color: var(--ink); border-color: var(--line); }
.lang-toggle:hover { background: rgba(255,255,255,.15); } .scrolled .lang-toggle:hover { background: var(--bg-2); border-color: var(--ochre); }
.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; }
.scrolled .nav-burger { color: var(--ink); }
.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,.5); 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, .scrolled .site-nav a{ color: var(--ink); font-size:1.2rem; font-family: var(--f-display); }
}

/* ============ FOOTER ============ */
.site-footer { background: #211913; color: rgba(246,239,225,.72); padding: clamp(3rem,6vw,5rem) 0 2rem; position:relative; }
.site-footer::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px; background: linear-gradient(90deg, var(--terra), var(--ochre), var(--teal)); }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:2.4rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(246,239,225,.14); }
.footer-brand .brand{ color:#fff; margin-bottom:1rem; } .footer-brand p{ max-width:42ch; font-size:.9rem; }
.footer-col h4 { font-family:var(--f-body); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ochre); 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:.62; 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(20,14,8,.94); 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(246,239,225,.85); font-size:.9rem; }

/* page-hero shared (image hero on every inner page) */
.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; filter: saturate(.9); }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(28,18,10,.4) 0%, rgba(28,18,10,.45) 45%, rgba(28,18,10,.9) 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.2rem,1.5rem+3.6vw,4.4rem); color:#fff; text-shadow: 0 8px 30px rgba(0,0,0,.45); }
.page-hero p { max-width: 62ch; margin: 1.1rem auto 0; color: rgba(246,239,225,.92); font-size: 1.08rem; }

.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:#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 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 36s 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}}
/* reduced-motion: НЕ обрезать маской — показать читаемый текст, без дубля */
@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}
}