@font-face {
  font-family: 'TaameyFrank';
  src: url('fonts/TaameyFrankCLM-Medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
* { box-sizing: border-box; }
:root { --bg:#111315; --panel:#17191b; --text:#fff; --muted:#c6c6c6; --line:rgba(255,255,255,.13); --gold:#d7b46a; }
html { scroll-behavior: smooth; }
body { margin:0; background: radial-gradient(circle at 50% -10%, #34383b 0%, #202326 32%, #141719 68%, #0f1112 100%); color:var(--text); font-family:Arial,sans-serif; text-align:center; }
body::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 50% -12%, rgba(255,255,255,.10), transparent 58%); pointer-events:none; }
.main-header { direction:rtl; display:flex; justify-content:space-between; align-items:center; min-height:84px; padding:14px 36px; background:rgba(17,17,17,.80); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); }
.logo { order:2; display:inline-flex; align-items:center; }
.logo img { width:62px; height:62px; object-fit:cover; border-radius:50%; display:block; border:2px solid rgba(255,255,255,.28); background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.35); }
.menu { order:1; display:flex; align-items:center; gap:22px; }
.menu a { color:var(--text); text-decoration:none; font-size:16px; transition:.2s ease; opacity:.88; }
.menu a:hover, .menu a.active { color:var(--gold); opacity:1; }
.hero { padding:72px 20px 46px; }
.yizkor-word { font-family:'TaameyFrank',serif; font-size:clamp(92px,12vw,170px); font-weight:400; color:#f9fbfc; letter-spacing:1px; line-height:1.05; margin:30px 0 10px; text-shadow:0 1px 0 rgba(255,255,255,.18), 0 10px 34px rgba(0,0,0,.35); }
.hero h2 { margin:0; font-size:clamp(22px,3vw,38px); line-height:1.35; font-weight:400; }
.tools { max-width:620px; margin:0 auto 26px; padding:0 20px; }
.search-wrap { display:block; text-align:right; color:var(--muted); }
.search-wrap input { width:100%; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.07); color:var(--text); padding:14px 18px; font-size:16px; outline:none; }
.search-wrap input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(215,180,106,.14); }
.letters { max-width:980px; margin:0 auto 32px; padding:0 20px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.letters button { width:42px; height:42px; border:1px solid #555; border-radius:50%; background:rgba(255,255,255,.04); color:#fff; font-size:18px; cursor:pointer; transition:.25s ease; }
.letters button:hover, .letters button.active { background:var(--gold); color:#111; border-color:var(--gold); transform:translateY(-2px); }
.letters button:disabled { opacity:.28; cursor:not-allowed; transform:none; }
.results-head { margin:0 auto 24px; padding:0 20px; }
.results-head h2 { margin:0 0 6px; font-size:24px; }
.results-head p { margin:0; color:var(--muted); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:22px; max-width:1180px; margin:0 auto 80px; padding:0 24px; }
.fallen-card { border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); overflow:hidden; cursor:pointer; text-align:right; color:var(--text); padding:0; transition:.25s ease; }
.fallen-card:hover { transform:translateY(-4px); border-color:rgba(215,180,106,.65); }
.fallen-card img { width:100%; height:230px; object-fit:cover; display:block; filter:grayscale(100%); transition:.3s ease; }
.fallen-card:hover img { filter:grayscale(0%); }
.card-body { display:block; padding:14px; }
.card-body h3 { margin:0 0 5px; font-size:18px; }
.card-body p { margin:0; color:var(--muted); font-size:14px; }
.empty-state { color:var(--muted); grid-column:1/-1; padding:40px 0; }
.footer-contact { border-top:1px solid var(--line); padding:32px 20px; color:var(--muted); background:rgba(16,16,16,.7); }
.modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:22px; }
.modal.is-open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(7px); }
.modal-panel { position:relative; z-index:1; width:min(920px,100%); max-height:92vh; overflow:auto; display:grid; grid-template-columns:minmax(260px,430px) 1fr; background:var(--panel); border:1px solid var(--line); border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.modal-panel img {
  width:100%;
  height:100%;
  min-height:430px;
  object-fit:cover;
  /*filter:grayscale(100%);*/
}
.modal-content { padding:42px 34px; text-align:right; display:flex; flex-direction:column; justify-content:center; }
.modal-kicker { margin:0 0 10px; color:var(--gold); }
.modal-content h3 { margin:0 0 12px; font-size:clamp(28px,4vw,42px); }
.modal-content p { color:var(--muted); line-height:1.7; }
.modal-close { position:absolute; top:14px; left:14px; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:rgba(0,0,0,.5); color:#fff; font-size:28px; cursor:pointer; z-index:2; }
.modal-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.primary-btn, .secondary-btn { border-radius:999px; padding:13px 24px; font-size:16px; text-decoration:none; cursor:pointer; }
.primary-btn { background:var(--gold); color:#111; border:1px solid var(--gold); font-weight:700; }
.secondary-btn { background:transparent; color:#fff; border:1px solid var(--line); }
@media (max-width:760px) { .main-header{padding:12px 16px; min-height:72px;} .logo img{width:50px;height:50px;} .menu{gap:12px;} .menu a{font-size:14px;} .hero{padding:44px 18px 32px;} .gallery{grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:14px;} .fallen-card img{height:190px;} .modal-panel{grid-template-columns:1fr;} .modal-panel img{min-height:300px;max-height:48vh;} .modal-content{padding:30px 22px;} }

.yizkor-contact-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.yizkor-phone,
.yizkor-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.25s ease;
}

.yizkor-phone {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid var(--line);
}

.yizkor-phone:hover {
  background: rgba(255,255,255,0.14);
}

.yizkor-whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37,211,102,0.25);
}

.yizkor-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(37,211,102,0.38);
}

@media (max-width: 520px) {
  .yizkor-phone,
  .yizkor-whatsapp {
    width: 100%;
    justify-content: center;
  }
}