/* ============================================================
    HƏZİ ASLANOV / Ази Асланов — bespoke L3 memorial site.
   Theme: "Бронза героя" — dark night + bronze/brass, portrait-forward.
   Display: Playfair Display. Body: Spectral. HE: Frank Ruhl Libre + Heebo.
   ============================================================ */

:root{
  --night:#15130f;       /* page bg */
  --night-2:#1d1810;     /* alt sections */
  --card:#241e15;        /* cards */
  --ink:#ece1ca;         /* light text on dark */
  --ink-soft:#b1a386;    /* muted */
  --line:#3a3022;        /* hairline */
  --line-soft:#2a2318;
  --bronze:#b88a40;      /* bronze accent */
  --bronze-d:#946d2c;
  --brass:#dcb86c;       /* brass highlight */
  --red:#a8331f;         /* star / guards red, sparing */
  --stone:#7d7257;
  --dark:#100e0a;        /* footer */
  --r:10px; --r-lg:18px;
  --shadow:0 18px 48px rgba(0,0,0,.5);
  --shadow-s:0 8px 22px rgba(0,0,0,.4);
  --maxw:1180px; --header-h:64px;
  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Spectral",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html[lang="he"]{ --f-display:"Frank Ruhl Libre",serif; --f-body:"Heebo",sans-serif; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body); color:var(--ink); background:var(--night); line-height:1.75; font-size:17.5px; overflow-x:hidden;
  background-image:radial-gradient(circle at 18% 8%, rgba(184,138,64,.08), transparent 44%), radial-gradient(circle at 82% 92%, rgba(168,51,31,.05), transparent 46%);
}
body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>"); }
.container{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.1; color:var(--ink); }
::selection{ background:var(--bronze); color:#15130f; }

.kicker{ font-family:var(--f-body); font-weight:600; font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); display:inline-flex; align-items:center; gap:.7rem; }
.kicker::before{ content:""; width:2rem; height:1px; background:var(--bronze); display:inline-block; }
.section-head{ max-width:54rem; margin-bottom:2.6rem; }
.section-head h2{ font-size:clamp(2rem,1.4rem+2.3vw,3.1rem); margin-top:.7rem; }

/* ===== JBAR ===== */
.jbar{ position:fixed; inset-block-start:0; inset-inline:0; z-index:80; height:38px; background:#0c0a07; color:var(--ink);
  display:flex; align-items:center; gap:.6rem; padding-inline:1rem; font-size:.78rem; border-bottom:1px solid rgba(220,184,108,.12); }
.jbar-logo{ font-family:var(--f-display); font-weight:700; letter-spacing:.02em; white-space:nowrap; flex:none; }
.jbar-logo b{ color:var(--brass); }
.jbar-sep{ opacity:.4; flex:none; }
.jbar-marquee{ position:relative; overflow:hidden; flex:1; height:100%; display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.jbar-track{ display:inline-flex; gap:3rem; white-space:nowrap; will-change:transform; animation:jbarscroll 42s linear infinite; }
.jbar-track span{ opacity:.8; }
.jbar-marquee:hover .jbar-track{ animation-play-state:paused; }
@keyframes jbarscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html[dir="rtl"] .jbar-track{ animation-name:jbarscroll-rtl; }
@keyframes jbarscroll-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* ===== HEADER ===== */
.site-header{ position:fixed; inset-block-start:38px; inset-inline:0; z-index:70; height:var(--header-h);
  background:rgba(21,19,15,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s; }
.site-header.scrolled{ box-shadow:var(--shadow-s); background:rgba(21,19,15,.94); }
.header-inner{ height:100%; width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; display:flex; align-items:center; gap:1.2rem; }
.brand{ display:inline-flex; align-items:center; gap:.65rem; flex:none; }
.brand-mark{ width:30px; height:auto; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--f-display); font-weight:700; font-size:1.18rem; color:var(--ink); letter-spacing:.01em; }
.brand-tag{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:.25rem; }
.site-nav{ display:flex; gap:.2rem; margin-inline-start:auto; flex-wrap:wrap; }
.site-nav a{ font-family:var(--f-body); font-weight:600; font-size:.95rem; color:var(--ink-soft); padding:.45rem .7rem; border-radius:7px; position:relative; transition:color .2s, background .2s; }
.site-nav a:hover{ color:var(--ink); background:rgba(184,138,64,.1); }
.site-nav a.active{ color:var(--brass); }
.site-nav a.active::after{ content:""; position:absolute; inset-inline:.7rem; inset-block-end:.2rem; height:2px; background:var(--bronze); }
.lang{ position:relative; flex:none; }
.lang-toggle{ display:inline-flex; align-items:center; gap:.4rem; background:var(--night-2); border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem; cursor:pointer; color:var(--ink); font-family:var(--f-body); font-weight:600; font-size:.82rem; }
.lang-toggle svg{ width:16px; height:16px; }
.lang-menu{ position:absolute; inset-block-start:calc(100% + .4rem); inset-inline-end:0; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:.3rem; display:none; min-width:7rem; z-index:5; }
.lang-menu.open{ display:block; }
.lang-opt{ display:block; width:100%; text-align:start; background:transparent; border:0; border-radius:7px; padding:.5rem .8rem; cursor:pointer; color:var(--ink-soft); font-family:var(--f-body); font-size:.9rem; }
.lang-opt:hover{ background:var(--night-2); color:var(--ink); }
.lang-opt.is-active{ color:var(--brass); font-weight:700; }
.nav-burger{ display:none; width:42px; height:38px; background:transparent; border:0; cursor:pointer; position:relative; flex:none; }
.nav-burger span, .nav-burger::before, .nav-burger::after{ content:""; position:absolute; inset-inline:8px; height:2px; background:var(--ink); transition:.3s; }
.nav-burger span{ inset-block-start:18px; } .nav-burger::before{ inset-block-start:12px; } .nav-burger::after{ inset-block-start:24px; }
.nav-burger.open span{ opacity:0; } .nav-burger.open::before{ transform:translateY(6px) rotate(45deg); } .nav-burger.open::after{ transform:translateY(-6px) rotate(-45deg); }

/* ===== BUTTONS ===== */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-body); font-weight:600; font-size:.95rem; letter-spacing:.02em;
  padding:.85rem 1.6rem; border-radius:9px; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s, background .25s; border:2px solid transparent; }
.btn-primary{ background:var(--bronze); color:#15130f; box-shadow:var(--shadow-s); }
.btn-primary:hover{ background:var(--brass); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ border-color:var(--bronze); color:var(--brass); }
.btn-ghost:hover{ background:var(--bronze); color:#15130f; transform:translateY(-2px); }

/* ===== HERO ===== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:calc(var(--header-h) + 38px + 3rem) 0 clamp(3rem,7vw,6rem); overflow:hidden; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-3; background:center/cover no-repeat; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, rgba(12,10,7,.5) 0%, rgba(12,10,7,.5) 35%, rgba(12,10,7,.92) 100%); }
.hero-inner{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; max-width:50rem; }
.hero h1{ font-size:clamp(3rem,2rem+7vw,7rem); color:#fff; letter-spacing:.005em; text-shadow:0 14px 50px rgba(0,0,0,.6); margin:.5rem 0 1rem; }
.hero-sub{ max-width:42rem; font-size:clamp(1.1rem,1rem+.7vw,1.45rem); color:rgba(236,225,202,.94); font-style:italic; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.hero-scroll{ position:absolute; inset-block-end:1.4rem; inset-inline-end:clamp(1rem,3vw,2.4rem); z-index:1; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(236,225,202,.6); writing-mode:vertical-rl; }
html[dir="rtl"] .hero-scroll{ writing-mode:vertical-lr; }

/* ===== PAGE HERO ===== */
.page-hero{ position:relative; min-height:58vh; display:flex; align-items:flex-end; padding:calc(var(--header-h) + 38px + 3rem) 0 clamp(2.4rem,5vw,4rem); overflow:hidden; isolation:isolate; text-align:center; }
.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(12,10,7,.5) 0%, rgba(12,10,7,.55) 45%, rgba(12,10,7,.9) 100%); }
.page-hero .container{ position:relative; }
.page-hero .kicker{ justify-content:center; margin-bottom:1rem; }
.page-hero h1{ font-size:clamp(2.4rem,1.6rem+4vw,4.8rem); color:#fff; text-shadow:0 10px 36px rgba(0,0,0,.6); }
.page-hero p{ max-width:60ch; margin:1.1rem auto 0; color:rgba(236,225,202,.9); font-size:1.1rem; font-style:italic; }

/* ===== SECTIONS ===== */
.sec{ padding:clamp(3.4rem,7vw,6rem) 0; position:relative; z-index:2; }
.sec.alt{ background:var(--night-2); }
.prose-narrow{ max-width:70ch; margin:0 auto; }
.prose-narrow.center{ text-align:center; }
.prose-narrow p{ color:var(--ink-soft); margin-bottom:1.1rem; }
.prose-narrow p strong{ color:var(--ink); }
.lead{ font-size:1.18rem; color:var(--ink); }
.prose-narrow h2{ font-family:var(--f-display); font-size:clamp(1.8rem,1.3rem+2vw,2.8rem); margin:.4rem 0 1.1rem; }

/* alternating image / text rows */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; margin-bottom:clamp(2.6rem,5vw,4.4rem); }
.frow:last-child{ margin-bottom:0; }
.frow:nth-child(even) .frow-media{ order:2; }
@media(max-width:820px){ .frow{ grid-template-columns:1fr; } .frow:nth-child(even) .frow-media{ order:0; } }
.frow-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.frow-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease); }
.frow-media.tall img{ aspect-ratio:3/4; }
.frow-media:hover img{ transform:scale(1.04); }
.frow-media figcaption{ font-size:.76rem; color:var(--ink-soft); padding:.55rem .2rem 0; font-style:italic; }
.frow-copy .kicker{ margin-bottom:.7rem; }
.frow-copy h2{ font-family:var(--f-display); font-size:clamp(1.7rem,1.2rem+1.7vw,2.5rem); margin-bottom:1rem; }
.frow-copy p{ color:var(--ink-soft); margin-bottom:.9rem; }

/* timeline */
.tl{ position:relative; max-width:880px; margin:0 auto; }
.tl::before{ content:""; position:absolute; inset-block:0; inset-inline-start:50%; width:2px; background:linear-gradient(var(--bronze),var(--red)); transform:translateX(-50%); }
.tl-item{ position:relative; width:50%; padding:1.1rem 2.4rem; }
.tl-item:nth-child(odd){ inset-inline-start:0; text-align:end; }
.tl-item:nth-child(even){ inset-inline-start:50%; }
.tl-item::after{ content:""; position:absolute; inset-block-start:1.7rem; width:15px; height:15px; border-radius:50%; background:var(--night); border:3px solid var(--bronze); }
.tl-item:nth-child(odd)::after{ inset-inline-end:-7.5px; } .tl-item:nth-child(even)::after{ inset-inline-start:-7.5px; }
.tl-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem 1.4rem; box-shadow:var(--shadow-s); display:inline-block; text-align:start; }
.tl-year{ font-family:var(--f-display); font-weight:700; font-size:1.35rem; color:var(--brass); }
.tl-t{ font-family:var(--f-display); font-weight:700; color:var(--ink); margin:.2rem 0 .4rem; font-size:1.12rem; }
.tl-d{ color:var(--ink-soft); font-size:.92rem; }
@media(max-width:720px){
  .tl::before{ inset-inline-start:8px; }
  .tl-item, .tl-item:nth-child(even){ width:100%; inset-inline-start:0; text-align:start; padding-inline-start:2.2rem; padding-inline-end:0; }
  .tl-item:nth-child(odd){ text-align:start; }
  .tl-item::after, .tl-item:nth-child(odd)::after, .tl-item:nth-child(even)::after{ inset-inline-start:1px; }
}

/* cards */
.kgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.kgrid.two{ grid-template-columns:repeat(2,1fr); }
.kgrid.four{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .kgrid, .kgrid.four{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .kgrid, .kgrid.two, .kgrid.four{ grid-template-columns:1fr; } }
.kcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--shadow-s); position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s; }
.kcard::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:4px; background:linear-gradient(90deg,var(--bronze),var(--brass)); transform:scaleX(0); transform-origin:inline-start; transition:transform .4s var(--ease); }
.kcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--bronze-d); }
.kcard:hover::before{ transform:scaleX(1); }
.kcard .ci{ font-family:var(--f-display); font-size:1.7rem; color:var(--brass); line-height:1; margin-bottom:.5rem; }
.kcard h3{ font-size:1.25rem; color:var(--ink); margin-bottom:.5rem; }
.kcard p{ color:var(--ink-soft); font-size:.95rem; }

/* stat row */
.statrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
@media(max-width:720px){ .statrow{ grid-template-columns:1fr 1fr; } }
.statc{ border-top:2px solid var(--bronze); padding-top:1.1rem; }
.statc b{ display:block; font-family:var(--f-display); font-size:clamp(2.1rem,4.4vw,3.2rem); font-weight:700; color:var(--brass); line-height:1.05; }
.statc span{ font-size:.9rem; color:var(--ink-soft); }

/* quote */
.quote{ background:#0e0c08; color:var(--ink); padding:clamp(3.4rem,7vw,5.5rem) 0; border-block:1px solid var(--line); }
.quote blockquote{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.6rem,1.1rem+2.3vw,2.9rem); line-height:1.22; color:#fff; text-align:center; max-width:50rem; margin-inline:auto; font-style:italic; }
.quote .qnote{ text-align:center; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-top:1.5rem; }

/* image bleed band */
.bleed-band{ position:relative; padding:clamp(3.6rem,7vw,6rem) 0; overflow:hidden; isolation:isolate; }
.bleed-bg{ position:absolute; inset:0; z-index:-2; background:center/cover no-repeat; }
.bleed-band::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(12,10,7,.93) 28%, rgba(12,10,7,.6)); }
.bleed-band .box{ max-width:40rem; }
.bleed-band h2{ color:#fff; margin:.5rem 0 1rem; font-size:clamp(1.9rem,1.3rem+2vw,3rem); }
.bleed-band p{ color:rgba(236,225,202,.9); margin-bottom:1.6rem; }

/* FAQ accordion */
.acc{ max-width:820px; margin:1.6rem auto 0; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; text-align:start; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem 0; background:none; border:0; cursor:pointer; font-family:var(--f-display); font-size:1.22rem; font-weight:700; color:var(--ink); }
.acc-q::after{ content:"+"; color:var(--brass); font-size:1.5rem; flex:none; transition:transform .3s; }
.acc-item.open .acc-q::after{ transform:rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.acc-item.open .acc-a{ max-height:360px; }
.acc-a p{ color:var(--ink-soft); padding-bottom:1.3rem; }

/* note line */
.note-line{ font-size:.9rem; line-height:1.7; color:var(--ink-soft); border-inline-start:3px solid var(--bronze); background:var(--night-2); border-radius:var(--r); padding:1.1rem 1.3rem; max-width:62rem; }

/* ===== FOOTER ===== */
.site-footer{ background:var(--dark); color:var(--ink); padding:clamp(3rem,5vw,4.5rem) 0 2rem; position:relative; z-index:2; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1.3fr; gap:2.4rem; }
.footer-brand p{ color:rgba(236,225,202,.7); font-size:.92rem; max-width:34ch; }
.footer-col h4{ font-family:var(--f-display); font-size:1rem; color:var(--brass); margin-bottom:1rem; }
.footer-col a{ display:block; color:rgba(236,225,202,.8); font-size:.95rem; padding:.28rem 0; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:.8rem; color:rgba(236,225,202,.55); }
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr; gap:1.8rem; } }

/* reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d2{ transition-delay:.1s } .reveal.d3{ transition-delay:.2s } .reveal.d4{ transition-delay:.3s }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .jbar-track{ animation:none; } *{ scroll-behavior:auto; } }

/* mobile nav */
@media(max-width:880px){
  .nav-burger{ display:block; margin-inline-start:auto; }
  .lang{ order:-1; }
  .site-nav{ position:fixed; inset-block-start:calc(38px + var(--header-h)); inset-inline:0; flex-direction:column; gap:.2rem; background:var(--night); border-bottom:1px solid var(--line); padding:1rem clamp(1rem,3vw,2rem); margin:0; box-shadow:var(--shadow); clip-path:inset(0 0 100% 0); transition:clip-path .35s var(--ease); }
  .site-nav.open{ clip-path:inset(0 0 0 0); }
  .site-nav a{ font-size:1.1rem; padding:.7rem .4rem; }
}
@media(max-width:430px){ .jbar-sep, .jbar-marquee{ display:none; } .jbar{ justify-content:center; } }