/* ============================================================
   МОЛОКАНЕ В АЗЕРБАЙДЖАНЕ — bespoke L3 styles. Theme: "linen & psalm".
   Linen cream + cranberry red (embroidery) + wheat-gold + dark-wood bands.
   Display: Alegreya. Body: Manrope. Labels: JetBrains Mono.
   HE: Frank Ruhl Libre + Heebo. RTL aware.
   ============================================================ */
:root{
  --paper:#f2ece0;        /* linen cream */
  --paper-2:#e7dcc8;      /* deeper linen */
  --card:#faf4e8;         /* light card */
  --ink:#2a2117;          /* warm dark */
  --ink-soft:#6b5a44;     /* muted brown */
  --line:#d8c9ab;
  --line-soft:#e4d8bd;
  --red:#a83a32;          /* cranberry embroidery (also glyph) */
  --red-d:#892b25;
  --wheat:#c2962f;        /* wheat-gold */
  --wheat-br:#ddb24f;     /* bright gold on dark */
  --ink-on:#f2ece0;
  --dark:#241a10;         /* dark-wood band */
  --dark-2:#2f2316;
  --r:10px; --r-lg:16px;
  --shadow:0 16px 44px rgba(36,26,16,.20);
  --shadow-s:0 6px 18px rgba(36,26,16,.13);
  --maxw:1180px;
  --header-h:64px;
  --f-display:"Alegreya",Georgia,serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --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(--paper);
  line-height:1.7; font-size:17px; overflow-x:hidden;
  background-image:
    radial-gradient(circle at 14% 14%, rgba(168,58,50,.05), transparent 42%),
    radial-gradient(circle at 86% 86%, rgba(194,150,47,.06), transparent 44%);
}
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  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>");
  mix-blend-mode:multiply;
}
.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.12; letter-spacing:.005em; }
::selection{ background:var(--red); color:#fff; }

/* ---------- labels / kickers ---------- */
.label{
  font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--red); display:inline-flex; align-items:center; gap:.6rem;
}
.label::before{ content:""; width:1.8rem; height:2px; background:var(--wheat); display:inline-block; }
.shead.center .label::before, .center .label::before{ display:none; }

/* ============================ JBAR ============================ */
.jbar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:80; height:38px;
  background:var(--dark); color:var(--ink-on);
  display:flex; align-items:center; gap:.6rem; padding-inline:1rem;
  font-size:.78rem; border-bottom:1px solid rgba(242,236,224,.1);
}
.jbar-logo{ font-family:var(--f-display); font-weight:700; letter-spacing:0; white-space:nowrap; flex:none; }
.jbar-logo b{ color:var(--wheat-br); }
.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:.85; }
.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 ============================ */
.top{
  position:fixed; inset-block-start:38px; inset-inline:0; z-index:70; height:var(--header-h);
  display:flex; align-items:center; gap:1.4rem; padding-inline:clamp(1rem,3vw,2rem);
  background:rgba(242,236,224,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s;
}
.top.scrolled{ box-shadow:var(--shadow-s); background:rgba(242,236,224,.95); }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--f-display);
  font-weight:700; font-size:1.24rem; letter-spacing:0; color:var(--ink); flex:none; }
.brand .bm{ display:inline-flex; }
.menu{ display:flex; gap:.25rem; margin-inline-start:auto; flex-wrap:wrap; }
.menu a{ font-family:var(--f-mono); font-weight:600; font-size:.74rem; letter-spacing:.04em;
  text-transform:uppercase; padding:.45rem .6rem; border-radius:7px; color:var(--ink-soft);
  position:relative; transition:color .2s, background .2s; }
html[dir="rtl"] .menu a{ font-family:var(--f-body); }
.menu a:hover{ color:var(--ink); background:rgba(168,58,50,.08); }
.menu a.cur{ color:var(--red); }
.menu a.cur::after{ content:""; position:absolute; inset-inline:.6rem; inset-block-end:.16rem; height:2px; background:var(--wheat); }
.langs{ display:flex; gap:.15rem; flex:none; background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:.18rem; }
.langs button{ font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.05em;
  border:0; background:transparent; color:var(--ink-soft); padding:.32rem .5rem; border-radius:6px; cursor:pointer; transition:.2s; }
.langs button:hover{ color:var(--ink); }
.langs button.active{ background:var(--red); color:#fff; }
.burger{ display:none; font-size:1.4rem; background:transparent; border:0; color:var(--ink); cursor:pointer; flex:none; }

/* ============================ BUTTONS ============================ */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-weight:700;
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; padding:.85rem 1.6rem; border-radius:8px;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s, background .25s; border:2px solid transparent; }
.btn-primary{ background:var(--red); color:#fff; box-shadow:var(--shadow-s); }
.btn-primary:hover{ background:var(--red-d); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ border-color:currentColor; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); 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, .phero .bg, .pband .bg{ position:absolute; inset:0; z-index:-2; }
.hero .bg img, .phero .bg img, .pband .bg img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(28,20,12,.38) 0%, rgba(28,20,12,.3) 38%, rgba(28,20,12,.88) 100%); }
.hero .wrap{ color:var(--paper); max-width:48rem; }
.hero .label{ color:var(--wheat-br); }
.hero .label::before{ background:var(--wheat-br); }
.hero h1{ font-size:clamp(3rem,2rem+7vw,7rem); color:#fff; letter-spacing:-.005em;
  text-shadow:0 14px 50px rgba(0,0,0,.5); margin:.4rem 0 1rem; }
.hero .lead{ font-size:clamp(1.1rem,1rem+.7vw,1.4rem); color:rgba(242,236,224,.95); max-width:42rem; }
.hero .cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.hero .btn-ghost{ color:#fff; }
.hero .btn-ghost:hover{ background:#fff; color:var(--ink); }
.scrollcue{ position:absolute; inset-block-end:1.4rem; inset-inline-end:clamp(1rem,3vw,2.4rem); z-index:1;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.3em; color:rgba(242,236,224,.7);
  writing-mode:vertical-rl; }
html[dir="rtl"] .scrollcue{ writing-mode:vertical-lr; }

/* ============================ PAGE HERO ============================ */
.phero{ position:relative; min-height:62vh; display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 38px + 3rem) 0 clamp(2.4rem,5vw,4rem); overflow:hidden; isolation:isolate; }
.phero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(28,20,12,.34) 0%, rgba(28,20,12,.42) 50%, rgba(28,20,12,.88) 100%); }
.phero .wrap{ color:var(--paper); max-width:44rem; }
.phero .label{ color:var(--wheat-br); } .phero .label::before{ background:var(--wheat-br); }
.phero h1{ font-size:clamp(2.6rem,1.7rem+5vw,5.2rem); color:#fff;
  text-shadow:0 10px 36px rgba(0,0,0,.5); margin:.3rem 0 .8rem; }
.phero p{ font-size:clamp(1.05rem,1rem+.5vw,1.3rem); color:rgba(242,236,224,.95); max-width:38rem; }
/* portrait focal points for the first block */
.hero .bg img[src*="presbyter"], .phero .bg img[src*="presbyter"],
.hero .bg img[src*="grandma"], .phero .bg img[src*="grandma"],
.hero .bg img[src*="dress"], .phero .bg img[src*="dress"]{ object-position:center 28%; }

/* ============================ BLOCKS ============================ */
.block{ padding:clamp(3rem,6vw,5.5rem) 0; position:relative; z-index:2; }
.shead{ max-width:56rem; margin-bottom:2.4rem; }
.shead.center{ margin-inline:auto; text-align:center; }
.shead h2, .split h2, .pband h2{ font-size:clamp(1.9rem,1.3rem+2.4vw,3.2rem); color:var(--ink); margin-top:.5rem; }
.shead .label{ margin-bottom:.2rem; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  background:var(--dark); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--shadow); }
.stat{ text-align:center; padding:.4rem; border-inline-start:1px solid rgba(242,236,224,.12); }
.stat:first-child{ border:0; }
.stat b{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(1.9rem,1.3rem+2.4vw,3.2rem);
  color:var(--wheat-br); line-height:1.05; }
.stat span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.03em; color:rgba(242,236,224,.8); line-height:1.45; display:block; margin-top:.5rem; }
@media(max-width:680px){ .stats{ grid-template-columns:1fr 1fr; } .stat:nth-child(odd){ border:0; } }

/* split */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,4vw,3.6rem); align-items:center; }
.split.rev .copy{ order:2; }
.split .copy h2{ margin:.5rem 0 1rem; }
.split .lead-p{ font-size:1.18rem; color:var(--ink); font-weight:500; margin-bottom:1rem; }
.split .body-p{ color:var(--ink-soft); margin-bottom:1rem; }
.split .media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); }
.split .media img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 42%; transition:transform .7s var(--ease); }
.split .media img[src*="grandma"], .split .media img[src*="dress"]{ object-position:center 24%; }
.split .media:hover img{ transform:scale(1.05); }
.cap{ position:absolute; inset-block-end:0; inset-inline:0; padding:1.4rem .9rem .7rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.03em; color:#fff;
  background:linear-gradient(transparent, rgba(28,20,12,.85)); }
@media(max-width:820px){ .split{ grid-template-columns:1fr; } .split.rev .copy{ order:0; } }

.lead-p{ font-size:1.2rem; color:var(--ink); font-weight:500; max-width:56rem; }
.lead-p.center{ margin-inline:auto; text-align:center; }
.body-p{ color:var(--ink-soft); }

/* cards */
.cards{ display:grid; gap:1.2rem; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem 1.6rem;
  box-shadow:var(--shadow-s); position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s; }
.card::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--red),var(--wheat)); transform:scaleX(0); transform-origin:inline-start; transition:transform .4s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.card:hover::before{ transform:scaleX(1); }
.cn{ font-family:var(--f-mono); font-weight:700; font-size:.82rem; color:var(--red); letter-spacing:.1em; }
.card h3{ font-size:1.3rem; color:var(--ink); margin:.4rem 0 .5rem; }
.card p{ color:var(--ink-soft); font-size:.95rem; }
@media(max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr)!important; } }
@media(max-width:540px){ .cards{ grid-template-columns:1fr!important; } }

/* index feature list */
.index{ display:grid; gap:.8rem; }
.idx{ display:grid; grid-template-columns:auto 92px 1fr auto; align-items:center; gap:1.2rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:.9rem 1.2rem;
  box-shadow:var(--shadow-s); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.idx:hover{ transform:translateX(6px); box-shadow:var(--shadow); border-color:var(--red); }
html[dir="rtl"] .idx:hover{ transform:translateX(-6px); }
.idx .in{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; color:var(--red); }
.idx .ic{ width:92px; height:64px; border-radius:8px; overflow:hidden; flex:none; }
.idx .ic img{ width:100%; height:100%; object-fit:cover; }
.idx .tw{ display:flex; flex-direction:column; gap:.15rem; }
.idx .it{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--ink); }
.idx .id{ font-size:.9rem; color:var(--ink-soft); }
.idx .ar{ font-size:1.3rem; color:var(--wheat); transition:transform .3s; }
.idx:hover .ar{ transform:translateX(4px); }
html[dir="rtl"] .idx .ar{ transform:scaleX(-1); }
@media(max-width:600px){ .idx{ grid-template-columns:auto 1fr auto; } .idx .ic{ display:none; } }

/* quote band */
.qband{ background:var(--dark); }
.qband blockquote{ font-family:var(--f-display); font-weight:500; font-style:italic; font-size:clamp(1.7rem,1.1rem+2.4vw,3rem);
  line-height:1.3; color:var(--paper); text-align:center; max-width:48rem; margin-inline:auto; }
.qband .qby{ text-align:center; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--wheat-br); margin-top:1.4rem; }

/* promo band */
.pband{ position:relative; padding:clamp(3.4rem,7vw,6rem) 0; overflow:hidden; isolation:isolate; }
.pband::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(28,20,12,.92) 28%, rgba(28,20,12,.5)); }
.pband .box{ max-width:40rem; color:var(--paper); }
.pband .label{ color:var(--wheat-br); } .pband .label::before{ background:var(--wheat-br); }
.pband h2{ color:#fff; margin:.5rem 0 1rem; }
.pband p{ color:rgba(242,236,224,.92); margin-bottom:1.6rem; }
.pband .btn-primary{ background:var(--wheat); color:var(--dark); }
.pband .btn-primary:hover{ background:var(--wheat-br); }

/* definition list */
.dlist{ display:grid; gap:0; border-top:2px solid var(--ink); }
.drow{ display:grid; grid-template-columns:.4fr 1fr; gap:1.4rem; padding:1.4rem .4rem; border-bottom:1px solid var(--line); align-items:baseline; }
.drow dt{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; color:var(--red); line-height:1.15; }
.drow dd{ color:var(--ink-soft); }
@media(max-width:640px){ .drow{ grid-template-columns:1fr; gap:.3rem; } }

/* note */
.note{ font-family:var(--f-mono); font-size:.84rem; line-height:1.7; color:var(--ink-soft);
  border-inline-start:3px solid var(--wheat); background:var(--paper-2); border-radius:var(--r);
  padding:1.1rem 1.3rem; max-width:62rem; }
html[dir="rtl"] .note{ border-inline-start:none; border-inline-end:3px solid var(--wheat); }

/* ============================ FOOTER ============================ */
.foot{ background:var(--dark); color:var(--ink-on); padding:clamp(3rem,5vw,4.5rem) 0 2rem; position:relative; z-index:2; }
.foot::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px; background:linear-gradient(90deg,var(--red),var(--wheat),var(--red)); }
.fgridf{ display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:2.4rem; }
.fbrand .brand{ color:#fff; }
.fbrand p{ color:rgba(242,236,224,.74); font-size:.95rem; max-width:34ch; }
.fcol h4{ font-family:var(--f-mono); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wheat-br); margin-bottom:1rem; }
.fcol a{ display:block; color:rgba(242,236,224,.84); font-size:.96rem; padding:.28rem 0; transition:color .2s; }
.fcol a:hover{ color:#fff; }
.fcol p{ color:rgba(242,236,224,.6); font-size:.84rem; margin-top:1rem; line-height:1.6; }
.fcol .cred{ font-size:.78rem; opacity:.7; }
.fbot{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.4rem;
  border-top:1px solid rgba(242,236,224,.12); font-size:.8rem; color:rgba(242,236,224,.6); }
@media(max-width:820px){ .fgridf{ grid-template-columns:1fr; gap:1.8rem; } }

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

/* ============================ MOBILE NAV ============================ */
@media(max-width:880px){
  .burger{ display:block; margin-inline-start:auto; }
  .menu{ position:fixed; inset-block-start:calc(38px + var(--header-h)); inset-inline:0; flex-direction:column; gap:.2rem;
    background:var(--paper); 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); }
  .menu.open{ clip-path:inset(0 0 0 0); }
  .menu a{ font-size:1.1rem; padding:.7rem .4rem; }
  .menu a.cur::after{ inset-inline:.4rem; }
  .langs{ order:-1; }
}
@media(max-width:430px){
  .jbar-sep, .jbar-marquee{ display:none; }
  .jbar{ justify-content:center; }
}