/* הגופן מאוחסן באתר עצמו (כמו בלוח, heb-cal): אותה תצוגה בכל מקום, בלי
   תלות ב-Google Fonts. Heebo, רישיון OFL. */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== צבעים: אותה שפה כמו בלוח ===== */
:root {
  --bg: #f4f2ec;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --ink: #1f1e1d;
  --ink-2: #6e6c66;
  --muted: #6b6a65; /* טקסט משני: 4.5:1 לפחות על כל הרקעים (נבדק בחישוב) */
  --line: #e6e3d9;
  --line-soft: #efece3;
  --accent: #c96442;
  --accent-soft: #faede7;
  /* גרסאות לטקסט: צבע ההדגשה נשאר למילוי ולגרפיקה, ולטקסט גוון כהה יותר
     מאותה משפחה, שעובר 4.5:1 על כל הרקעים של המצב הבהיר. */
  --accent-ink: #a75337;
  --archaeology-ink: #816727;
  --instrumental-ink: #4c6e8b;
  --on-accent: #ffffff;
  /* סוגי ראיה: כתוב = צבע האתר, ארכיאולוגי = אוכרה, מכשירי = כחול-צפחה */
  --texts: #c96442;
  --archaeology: #9a7b2f;
  --instrumental: #4f7391;
  --live: #c96442;
  --map-water: #e1e7ea; /* מים במפת הבסיס */
  --quake: #3f607a; /* רעידות חיות, בטקסט ובגרפים: כחול, כדי לא להתבלבל עם קווי השבר */
  /* צבעי המפה: שלושה סוגי סימון, שלושה צבעים שונים (בנוסף לצורות השונות) */
  --map-live: #1f6fc5;  /* רעידה אחרונה: כחול עז */
  --map-dmg: #8a4fa3;   /* מקום שנפגע: סגול */
  --warn-bg: #fbf3dc;
  --warn-ink: #7a5a10;
  --radius: 16px;
  --radius-sm: 11px;
  --measure: 68ch;
  --font: "Heebo", -apple-system, BlinkMacSystemFont, "SF Hebrew", "Segoe UI",
    "Noto Sans Hebrew", "Arial Hebrew", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1b19; --surface: #232220; --surface-2: #2b2926;
    --ink: #f5f3ee; --ink-2: #a8a59d; --muted: #95938e;
    --line: #34322d; --line-soft: #2a2825;
    --accent: #e08a6b; --accent-soft: #33241e; --on-accent: #1a120e;
    --accent-ink: #e08a6b; --archaeology-ink: #c9a656; --instrumental-ink: #86a9c4;
    --texts: #e08a6b; --archaeology: #c9a656; --instrumental: #86a9c4; --live: #e08a6b; --quake: #86a9c4; --map-water: #2c3a42; --map-live: #6aa9ee; --map-dmg: #c69ade;
    --warn-bg: #33291a; --warn-ink: #e3c47a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1b19; --surface: #232220; --surface-2: #2b2926;
  --ink: #f5f3ee; --ink-2: #a8a59d; --muted: #95938e;
  --line: #34322d; --line-soft: #2a2825;
  --accent: #e08a6b; --accent-soft: #33241e; --on-accent: #1a120e;
    --accent-ink: #e08a6b; --archaeology-ink: #c9a656; --instrumental-ink: #86a9c4;
  --texts: #e08a6b; --archaeology: #c9a656; --instrumental: #86a9c4; --live: #e08a6b; --quake: #86a9c4; --map-water: #2c3a42; --map-live: #6aa9ee; --map-dmg: #c69ade;
  --warn-bg: #33291a; --warn-ink: #e3c47a;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.03125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--font); color: var(--ink); line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -.6px; margin: .15em 0 .35em; }
h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.3px; margin: 2.2em 0 .6em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ink-2); }
.note { color: var(--muted); font-size: .88rem; }
.num, time, bdi { font-variant-numeric: tabular-nums; }

.draft-banner {
  background: var(--warn-bg); color: var(--warn-ink); text-align: center;
  font-size: .85rem; padding: .4rem 16px; border-bottom: 1px solid var(--line);
}

/* ===== סרגל עליון ===== */
.site-header {
  max-width: 1080px; margin: 0 auto; padding: .9rem 16px .75rem;
  display: flex; align-items: center; justify-content: space-between; gap: .7rem 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 700; font-size: 1.35rem; letter-spacing: -.4px; }
.brand-sub { font-size: .8rem; color: var(--ink-2); }
/* הסמל: קשת חרבה. בכל צד שתי אבנים מרובעות זו על זו ואבן שלישית שמתעקלת למרכז, ובראש אבן
   ראשה גדולה. האבן העליונה השמאלית ואבן הראשה נפלו ושוכבות בתוך הפתח. */
.rift-mark { width: 32px; height: 32px; flex: none; overflow: visible; }
.rift-mark path { fill: var(--accent); }

/* אנימציה: פחות משתי שניות. הקשת שלמה, הכול רועד, האבן העליונה השמאלית נופלת,
   ואחריה אבן הראשה. המצב במנוחה הוא הפריים האחרון (fill-mode backwards), כך שבלי תנועה
   (העדפת מערכת או "עצירת אנימציות") או בלי JS, הסמל עומד חרב.
   מתנגנת בטעינה, במעבר עכבר, ושוב כשהסמל חוזר למסך או 15 שניות אחרי הפעם הקודמת
   (static/js/brand-anim.js, אותה לוגיקה כמו באתר העב"מים). אין לולאה ב-CSS. */
@keyframes rift-shake   { 0%, 100% { transform: none; } 15% { transform: translateX(-.8px); } 30% { transform: translateX(.8px); } 45% { transform: translateX(-.7px); } 60% { transform: translateX(.6px); } 75% { transform: translateX(-.4px); } }
@keyframes rift-shake-2 { 0%, 100% { transform: none; } 15% { transform: translateX(-.8px); } 30% { transform: translateX(.8px); } 45% { transform: translateX(-.7px); } 60% { transform: translateX(.6px); } 75% { transform: translateX(-.4px); } }
@keyframes rift-fall-a {
  0%, 45% { transform: none; }
  65% { transform: translate(1.08px, 5.14px) rotate(-70deg); }
  84% { transform: translate(2.69px, 15.19px) rotate(-128deg); }
  93% { transform: translate(2.69px, 14.29px) rotate(-116deg); }
  100% { transform: translate(2.69px, 14.69px) rotate(-120deg); }
}
@keyframes rift-fall-a-2 {
  0%, 45% { transform: none; }
  65% { transform: translate(1.08px, 5.14px) rotate(-70deg); }
  84% { transform: translate(2.69px, 15.19px) rotate(-128deg); }
  93% { transform: translate(2.69px, 14.29px) rotate(-116deg); }
  100% { transform: translate(2.69px, 14.69px) rotate(-120deg); }
}
@keyframes rift-fall-k {
  0%, 58% { transform: none; }
  66% { transform: translate(-1.2px, 1.2px) rotate(-28deg); }
  78% { transform: translate(-2.2px, 8.45px) rotate(-95deg); }
  90% { transform: translate(0.30px, 19.28px) rotate(-190deg); }
  96% { transform: translate(0.30px, 18.48px) rotate(-176deg); }
  100% { transform: translate(0.30px, 18.78px) rotate(-180deg); }
}
@keyframes rift-fall-k-2 {
  0%, 58% { transform: none; }
  66% { transform: translate(-1.2px, 1.2px) rotate(-28deg); }
  78% { transform: translate(-2.2px, 8.45px) rotate(-95deg); }
  90% { transform: translate(0.30px, 19.28px) rotate(-190deg); }
  96% { transform: translate(0.30px, 18.48px) rotate(-176deg); }
  100% { transform: translate(0.30px, 18.78px) rotate(-180deg); }
}
.rift-all { animation: rift-shake .7s linear .2s; }
.rift-fall-a, .rift-fall-k { transform-box: fill-box; transform-origin: 50% 50%; stroke: var(--bg); stroke-width: .9; paint-order: stroke; }
.rift-fall-a { transform: translate(2.69px, 14.69px) rotate(-120deg); animation: rift-fall-a 1.3s ease-in .2s backwards; }
.rift-fall-k { transform: translate(0.30px, 18.78px) rotate(-180deg); animation: rift-fall-k 1.7s ease-in .2s backwards; }
/* מעבר עכבר מנגן שוב (שם אחר לאנימציה, כי דפדפן לא מתחיל מחדש אנימציה ששמה לא השתנה).
   רק עכבר אמיתי: בטלפון :hover נתקע אחרי נגיעה. */
@media (hover: hover) {
  .brand:hover .rift-all { animation-name: rift-shake-2; }
  .brand:hover .rift-fall-a { animation-name: rift-fall-a-2; }
  .brand:hover .rift-fall-k { animation-name: rift-fall-k-2; }
}
@media (prefers-reduced-motion: reduce) { .rift-mark * { animation: none !important; } }
/* הלשוניות: פס אחד עדין עם רקע ומסגרת; הלשונית הפעילה מודגשת ברקע ובטקסט בצבע האתר.
   במסך צר: רשת של שתי עמודות, כל הלשוניות גלויות בלי גלילה. */
.site-nav {
  order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .15rem; padding: .25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.site-nav a {
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25;
  white-space: nowrap; color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: .4rem .8rem; border-radius: 9px; position: relative;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
/* ירידת שורה בלשונית הארוכה: רק בנייד */
.m-br { display: none; }
@media (max-width: 640px) {
  .m-br { display: inline; }
  .site-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0; overflow: hidden; background: var(--line); }
  .site-nav a {
    display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal;
    min-height: 44px; padding: .45rem .5rem; border-radius: 0; background: var(--surface); font-size: .86rem; line-height: 1.25;
  }
  .site-nav a:hover { background: var(--surface-2); }
  /* מספר אי-זוגי של לשוניות: האחרונה על כל הרוחב, בלי תא ריק */
  .site-nav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.theme-btn {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
}
.theme-btn:hover { background: var(--surface); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

main { max-width: 1080px; margin: 0 auto; padding: 1.2rem 16px 3rem; }
.site-footer {
  border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .85rem;
  max-width: 1080px; margin: 2rem auto 0; padding: 1.4rem 16px 3rem;
}
.site-footer p { margin: .3rem 0; }

/* ===== כרטיסים ושבבים ===== */
.card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.section-title { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .2px; margin: 0 0 .4rem; }
.chip {
  display: inline-block; font-size: .75rem; font-weight: 500; line-height: 1.5;
  padding: .12rem .6rem; border-radius: 999px; margin: .15rem 0 0 .25rem;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-soft);
}
.chip.k-texts { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.chip.k-archaeology { color: var(--archaeology-ink); }
.chip.k-instrumental { color: var(--instrumental-ink); }

/* ===== פס רעידה אחרונה ===== */
.live-strip {
  background: var(--accent-soft); border-radius: var(--radius);
  padding: .9rem 1.15rem; margin: 0 0 2rem;
}
.live-kicker { margin: 0; font-size: .78rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: .45rem; }
.live-main { margin: .15rem 0; font-size: 1.15rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: baseline; }
.live-place { font-weight: 600; letter-spacing: -.3px; }
.live-mag bdi { font-weight: 700; color: var(--accent-ink); font-size: 1.25rem; letter-spacing: -.4px; }
.live-ago { color: var(--ink-2); font-size: .95rem; }
.live-strip .echo { margin: .35rem 0 0; color: var(--ink); }
.live-source { margin: .45rem 0 0; font-size: .75rem; color: var(--muted); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(201,100,66,.55); animation: pulse 2s ease-out infinite; } /* פועמת כל הזמן; נעצרת עם כפתור העצירה של הפס (WCAG 2.2.2) ובבקשה לפחות תנועה */
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(201,100,66,0); } 100% { box-shadow: 0 0 0 0 rgba(201,100,66,0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* ===== דף הבית ===== */
.hero { max-width: var(--measure); }
.lede { font-size: 1.12rem; color: var(--ink-2); }
.today, .home-map, .all-events { margin-top: 2.4rem; }
.more { font-weight: 600; text-decoration: none; }

.event-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.event-card {
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: .75rem .9rem; text-decoration: none; color: var(--ink); position: relative;
}
.event-card::before {
  content: ''; position: absolute; top: .95rem; inset-inline-end: .9rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--texts);
}
.event-card.k-archaeology::before { background: var(--archaeology); }
.event-card.k-instrumental::before { background: var(--instrumental); }
.event-card:hover { border-color: var(--line); background: var(--surface-2); }
.event-card-year { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.event-card-title { font-weight: 600; font-size: 1rem; line-height: 1.35; letter-spacing: -.2px; }
.event-card-seg { font-size: .75rem; color: var(--ink-2); }

/* ===== דף רעידה ===== */
.event-header { max-width: var(--measure); }
.kicker { color: var(--accent-ink); font-weight: 600; font-size: .9rem; margin: 0; }
.status-tag {
  display: inline-block; background: var(--warn-bg); color: var(--warn-ink);
  font-size: .75rem; font-weight: 600; padding: .1rem .6rem; border-radius: 999px; margin: 0 0 .4rem;
}
.draft-note {
  background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius-sm);
  padding: .55rem .85rem; font-size: .88rem; margin: .5rem 0 0;
}
.distant-note { color: var(--ink-2); margin-top: 0; }
.event-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin-top: 1rem; }
@media (min-width: 900px) {
  .event-layout { grid-template-columns: minmax(0, var(--measure)) 290px; gap: 3rem; align-items: start; }
  .facts { grid-column: 2; grid-row: 1; position: sticky; top: 1rem; }
  .prose { grid-column: 1; grid-row: 1; }
}
.facts {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1rem 1.1rem; font-size: .93rem; line-height: 1.5;
}
.facts dl { margin: 0; }
.facts dt { font-size: .75rem; font-weight: 600; color: var(--muted); margin-top: .85rem; }
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: .1rem 0 0; font-weight: 600; letter-spacing: -.2px; }
.facts .sub { display: block; font-weight: 400; color: var(--ink-2); font-size: .86rem; letter-spacing: 0; }
.certainty {
  display: inline-block; margin-top: .3rem; font-size: .72rem; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: .05rem .55rem;
}
.prose { max-width: var(--measure); }
.prose h2:first-child { margin-top: .4rem; }
.prose p { margin: 0 0 1em; }
.prose blockquote {
  margin: 1.1rem 0; padding: .7rem 1rem; background: var(--surface);
  border: 1px solid var(--line-soft); border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm); font-size: 1.02rem; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .todo, .empty h2 { color: var(--muted); }
.sources ul { padding-inline-start: 1.2rem; }
.sources li { margin-bottom: .3rem; overflow-wrap: anywhere; }
.license { font-size: .8rem; color: var(--muted); }
.live-list { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.live-list li { display: flex; gap: .9rem; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); padding: .5rem .9rem; }
.live-list li:last-child { border-bottom: 0; }
.live-list .live-mag bdi { font-size: 1rem; }
.notes { font-size: .85rem; color: var(--ink-2); line-height: 1.55; }
.notes hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0 1rem; }
.notes ol { padding-inline-start: 1.4rem; }
.notes a { overflow-wrap: anywhere; }
.footnote-ref { font-size: .72em; font-weight: 600; }
.footnote-backref { text-decoration: none; }
section + section { margin-top: 2rem; }

/* ===== מפה ===== */
.map { border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--surface-2); z-index: 0; }
/* Leaflet מחשב מיקום של תוויות וחלונות לפי כיוון שמאל-לימין. הטקסט שבתוכם חוזר ל-RTL. */
.map.leaflet-container { direction: ltr; background: var(--surface-2); }
.map .leaflet-tooltip, .map .leaflet-popup-content, .map .leaflet-control-attribution { direction: rtl; }
.map-key, .timeline-legend {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  font-size: .8rem; color: var(--ink-2);
}
.map-key { margin: .5rem 0 0; }
/* המתגים שמתחת למפה: כל שכבה בשורה משלה, עם הסמל שלה, ואזור לחיצה נוח לאצבע */
.map-legend { margin-top: .6rem; }
.map-toggles { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); margin: 0; padding: .35rem .7rem .45rem; display: grid; gap: .1rem; }
.map-toggles legend { font-size: .8rem; font-weight: 600; color: var(--ink-2); padding: 0 .3rem; }
.tg { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-size: .86rem; color: var(--ink-2); cursor: pointer; line-height: 1.4; }
.tg strong { color: var(--ink); font-weight: 600; }
.tg input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.tg .lg { flex: none; margin: 0; }
.tg-live strong { color: var(--instrumental-ink); }
.tg-hist strong { color: var(--accent-ink); }
.lg { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; margin-inline-end: .3rem; }
.lg-live { background: var(--map-live); width: 12px; height: 12px; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px var(--map-live); }
.lg-hist { width: 18px; height: 18px; background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1.5px dashed var(--accent); position: relative; }
.lg-hist::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--accent); }
.lg-seg { border-radius: 3px; background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px dashed var(--accent); }
.lg.k-texts { background: var(--texts); }
.lg.k-archaeology { background: var(--archaeology); }
.lg.k-instrumental { background: var(--instrumental); }
.lg-nomag { background: transparent; border: 2px dashed var(--muted); }
.lg-range { border-radius: 2px; height: 4px; width: 22px; background: var(--muted); }
.leaflet-container { font-family: var(--font); }

/* ===== ציר הזמן ===== */
.page-intro { max-width: var(--measure); }
.timeline-wrap {
  margin: 1rem 0; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: .6rem;
}
.timeline { width: 100%; height: auto; display: block; font-family: var(--font); }
.timeline-v { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 700px) {
  .timeline-h { display: none; }
  .timeline-v { display: block; }
}
.era-band { fill: var(--surface-2); }
.era-sep { stroke: var(--line); stroke-width: 1; }
.era-name, .era-name-v { font-weight: 600; font-size: 14px; fill: var(--ink-2); }
.era-year { font-size: 11px; fill: var(--muted); }
.axis { stroke: var(--ink-2); stroke-width: 1.4; }
.instruments { stroke: var(--instrumental); stroke-width: 1.4; stroke-dasharray: 4 3; }
.instruments-label { font-size: 11px; fill: var(--instrumental-ink); }
.leader { stroke: var(--line); stroke-width: 1; }
.label-year { font-size: 11px; fill: var(--muted); }
.label-title { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.tl-label:hover .label-title { fill: var(--accent-ink); }
.range { stroke-width: 5; stroke-linecap: round; opacity: .4; }
.range.k-texts { stroke: var(--texts); }
.range.k-archaeology { stroke: var(--archaeology); }
.range.k-instrumental { stroke: var(--instrumental); }
.dot { stroke: var(--surface); stroke-width: 1.5; }
.dot.k-texts, .dot-center.k-texts { fill: var(--texts); }
.dot.k-archaeology, .dot-center.k-archaeology { fill: var(--archaeology); }
.dot.k-instrumental, .dot-center.k-instrumental { fill: var(--instrumental); }
.dot.no-mag { fill: var(--surface); stroke-width: 2; stroke-dasharray: 3 2; }
.dot.no-mag.k-texts { stroke: var(--texts); }
.dot.no-mag.k-archaeology { stroke: var(--archaeology); }
.dot.no-mag.k-instrumental { stroke: var(--instrumental); }
.tl-event:hover .dot { stroke: var(--ink); }

/* ===== חלון מקור צף (הערות שוליים) ===== */
.footnote-ref { text-decoration: none; padding: 0 .1em; }
.footnote-ref::before { content: "["; }
.footnote-ref::after { content: "]"; }
.source-sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1000;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; pointer-events: none;
}
.source-sheet[hidden] { display: none; }
.source-sheet-inner {
  pointer-events: auto; width: 100%; max-width: 640px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.14);
  padding: .8rem 1.1rem .6rem; font-size: .95rem; line-height: 1.55;
  animation: sheet-in .18s ease-out;
}
.source-sheet-label { margin: 0 0 .2rem; font-size: .75rem; font-weight: 600; color: var(--accent-ink); }
.source-sheet-body p { margin: 0 0 .4rem; }
.source-sheet-body a { overflow-wrap: anywhere; }
.source-sheet-hint { margin: .2rem 0 0; font-size: .7rem; color: var(--muted); text-align: center; }
@keyframes sheet-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .source-sheet-inner { animation: none; } }
.notes ol li { margin-bottom: .35rem; overflow-wrap: anywhere; }
.notes li:target { background: var(--accent-soft); border-radius: 6px; }
.lg-fault.lg-strong { height: 5px; }
.lg-fault { width: 22px; height: 3px; border-radius: 2px; background: var(--accent); }

/* ===== רעידות שיוחסו בטעות / מפוקפקות ===== */
.verdict-note {
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: .6rem .9rem; color: var(--ink-2); font-size: .92rem; margin: .6rem 0 0;
}
.verdict-note strong { color: var(--ink); }
.event-card.is-misattributed, .event-card.is-doubtful { background: var(--surface-2); border-style: dashed; } /* בלי opacity: היא מורידה את ניגודיות הטקסט מתחת ל-4.5:1 */
.event-card.is-misattributed::before, .event-card.is-doubtful::before { background: var(--muted); }
.dot.k-verdict { fill: var(--surface); stroke: var(--muted); stroke-width: 2; stroke-dasharray: 2 2; }
.dot-center.k-verdict { fill: var(--muted); }
.unverified {
  display: inline-block; font-size: .7rem; font-weight: 600; color: var(--warn-ink);
  background: var(--warn-bg); border-radius: 999px; padding: 0 .5rem; vertical-align: middle;
}

/* תוויות על המפה: שמות המקטעים והכיתוב "מיקום משוער" */
.leaflet-tooltip.seg-label {
  background: color-mix(in srgb, var(--surface) 85%, transparent); border: 0; box-shadow: none;
  color: var(--accent-ink); font: 600 .78rem/1.2 Heebo, sans-serif; padding: 1px 5px; white-space: nowrap;
}
/* שמות ערים במפת הבסיס */
.leaflet-tooltip.city-label {
  background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--ink-2); font: .72rem/1 Heebo, sans-serif; white-space: nowrap;
}
.leaflet-tooltip.city-label::before { display: none; }
.leaflet-tooltip.seg-label.dim { opacity: .5; font-weight: 400; }
.leaflet-tooltip.seg-label::before, .leaflet-tooltip.approx-label::before { display: none; }
.leaflet-tooltip.approx-label {
  background: var(--surface); border: 1px solid var(--accent); color: var(--ink);
  font: .75rem/1.2 Heebo, sans-serif; padding: 1px 6px; box-shadow: none;
}
.map-popup { direction: rtl; text-align: right; font-family: Heebo, sans-serif; line-height: 1.45; }
.map-popup .src { color: var(--ink-2); font-size: .85em; margin-top: .3rem; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); }

/* מקור שעוד לא נבדק (בקובצי התוכן: TODO) */
.unchecked {
  display: inline-block; font-size: .78em; line-height: 1.3; padding: 0 .4em; border-radius: 999px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap;
}

/* ===== 30 הימים האחרונים ===== */
.recent .lede { font-size: 1.05rem; }
.notice { background: var(--accent-soft); border-inline-start: 3px solid var(--accent); border-radius: var(--radius); padding: .6rem .9rem; font-size: .95rem; }
.page-notice { display: flex; gap: .8rem; align-items: flex-start; margin: 1rem 0 1.4rem; }
.page-notice p { margin: 0; }
.warn-icon { flex: none; width: 2.6rem; height: auto; margin-top: .15rem; }
.warn-tri { fill: #f2c12e; stroke: #1f1e1d; stroke-width: 2.5; stroke-linejoin: round; }
.warn-wave { fill: none; stroke: #1f1e1d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chart-wrap { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .5rem; }
.chart { width: 100%; height: auto; display: block; font-family: Heebo, sans-serif; }
.chart-bar { fill: var(--quake); }
.chart-axis, .chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-label { fill: var(--ink-2); font-size: 12px; }
.chart-val { fill: var(--ink-2); font-size: 10px; }
.chart-dot { fill: var(--quake); fill-opacity: .45; stroke: var(--quake); stroke-width: .5; }
.chart-band.b0 { fill: var(--accent-soft); }
.chart-band.b1 { fill: var(--surface-2); }
.chart-band-label { fill: var(--accent-ink); font-size: 11px; font-weight: 600; }
.chart-note { font-size: .85rem; margin-top: .4rem; }
.chart-data { margin-top: .4rem; font-size: .9rem; }
.chart-data summary { cursor: pointer; color: var(--accent-ink); padding: .65rem 0; width: max-content; }
.chart-data table { margin-top: .3rem; }
.chart-data caption { text-align: start; color: var(--ink-2); padding-bottom: .3rem; }
/* חתך העומק: צביטה מקרבת, גלילה אנכית נשארת לדף */
svg[data-zoom] { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
svg[data-zoom].is-zoomed { cursor: grab; }
.chart-zoom { display: flex; align-items: center; gap: .35rem; justify-content: flex-end; margin-top: .3rem; }
.chart-zoom button {
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem; font: inherit; font-size: .95rem; line-height: 1;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.chart-zoom button:disabled { opacity: .45; cursor: default; }
.quake-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.quake { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .7rem .9rem; scroll-margin-top: 1rem; }
.quake:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.quake-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.quake-mag { font-weight: 700; color: var(--quake); font-size: 1.1rem; }
.quake-place { font-weight: 600; }
.quake-time { color: var(--ink-2); font-size: .9rem; margin-inline-start: auto; }
.quake-facts { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: .4rem 0 0; font-size: .9rem; }
.quake-facts div { display: flex; gap: .35rem; }
.quake-facts dt { color: var(--ink-2); }
.quake-facts dd { margin: 0; }
.quake .echo { margin: .4rem 0 0; font-size: .9rem; }
.live-more { margin: .3rem 0 0; font-size: .9rem; }
.live-more a { color: inherit; }
.mag-bands { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mag-bands li { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .35rem .7rem; font-size: .9rem; }
.mag-bands strong { color: var(--quake); font-size: 1.05rem; margin-inline-end: .2rem; }

/* ===== מכשירי מדידה ===== */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); border-radius: var(--radius); }
table.data th, table.data td { text-align: start; padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data th { color: var(--ink-2); font-weight: 600; }
table.data td:nth-child(2), table.data td:nth-child(3) { white-space: nowrap; }

/* מקומות שנפגעו */
/* המרקר עצמו שקוף וגדול (אזור הלחיצה), והריבוע שרואים הוא ::before במרכזו */
.dmg { background: none; border: 0; display: grid; place-items: center; }
.dmg::before { content: ""; width: 9px; height: 9px; box-sizing: border-box; background: var(--map-dmg); border: 1px solid var(--surface); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 0 .5px var(--map-dmg); }
.dmg.doubtful::before { background: var(--surface); border: 1.5px dashed var(--map-dmg); }
.lg-dmg { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--map-dmg); }
.dmg-entry { margin-top: .35rem; }

/* סוג הרעידה בראש החלון שנפתח במפה */
.pop-kind { display: block; width: fit-content; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 0 .5rem; margin-bottom: .25rem; }
.pop-hist { color: var(--accent-ink); background: var(--accent-soft); }
.pop-live { color: var(--instrumental-ink); background: color-mix(in srgb, var(--quake) 14%, var(--surface)); }
/* הרעידה האחרונה ביותר: טבעת שמתרחבת פעמיים ונעצרת */
.live-ring { border-radius: 50%; border: 2px solid var(--map-live); animation: live-ring 1.6s ease-out 3; opacity: 0; }
@keyframes live-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-ring { animation: none; opacity: .6; } }
html.a11y-still .live-ring { opacity: .6; }
.quake-links { margin: .35rem 0 0; font-size: .88rem; }
table.data a.ext { font-size: .82em; }

/* ===== הפס החי בראש כל דף ===== */
/* הפס הנע: 5 הרעידות האחרונות. בעברית הטקסט נכנס משמאל וזז ימינה, כך שתחילת כל שורה נראית קודם. */
.live-ticker {
  display: flex; align-items: center; gap: .6rem; padding: 0 0 0 .4rem;
  background: var(--accent-soft); border-bottom: 1px solid var(--line-soft); font-size: .88rem;
}
.lt-head {
  flex: none; display: flex; align-items: center; gap: .45rem; padding: .5rem 1rem;
  font-weight: 700; color: var(--accent-ink); text-decoration: none; background: var(--accent-soft);
  position: relative; z-index: 1; box-shadow: -8px 0 10px -4px var(--accent-soft);
}
.lt-head:hover { text-decoration: underline; }
.lt-viewport { flex: 1; overflow: hidden; min-width: 0;
  mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.lt-track { display: flex; width: max-content; animation: lt-move 45s linear infinite; }
.lt-list { display: flex; list-style: none; margin: 0; padding: 0; }
.lt-list li { flex: none; }
.lt-list a { display: flex; align-items: baseline; gap: .45rem; padding: .5rem 1.1rem; color: var(--ink); text-decoration: none; border-inline-start: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.lt-list a:hover .lt-place { text-decoration: underline; }
.lt-place { font-weight: 600; }
.lt-mag { font-weight: 700; color: var(--accent-ink); }
.lt-ago { color: var(--ink-2); }
@keyframes lt-move { from { transform: translateX(0); } to { transform: translateX(50%); } }
.live-ticker:hover .lt-track, .live-ticker:focus-within .lt-track, .live-ticker.paused .lt-track { animation-play-state: paused; }
.lt-pause {
  flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: .6rem; cursor: pointer; display: grid; place-items: center;
}
.live-ticker.paused .lt-pause span { font-size: .8rem; }
/* בלי תנועה: רשימה אחת רגילה שנגללת ביד, בלי העותק השני ובלי כפתור */
@media (prefers-reduced-motion: reduce) {
  .lt-track { animation: none; }
  .lt-list[aria-hidden] , .lt-pause { display: none; }
  .lt-viewport { overflow-x: auto; mask-image: none; }
}
html.a11y-still .lt-track { animation: none; }
html.a11y-still .lt-list[aria-hidden], html.a11y-still .lt-pause { display: none; }
html.a11y-still .lt-viewport { overflow-x: auto; mask-image: none; }
.lb-kicker { font-weight: 600; color: var(--ink-2); }
.lb-place { font-weight: 600; }
.lb-mag { font-weight: 700; color: var(--accent-ink); }
.lb-ago { color: var(--ink-2); }
.lb-more { margin-inline-start: auto; color: var(--accent-ink); }

/* ===== דפי ההצהרות: פרטיות ונגישות ===== */
.legal .lede { font-size: 1.1rem; color: var(--ink); }
.legal h2 { margin-top: 2rem; }
.tbl-scroll { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tbl-scroll:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.legal-tbl { border-collapse: collapse; width: 100%; font-size: .9rem; }
.legal-tbl caption { text-align: start; font-weight: 600; padding: .6rem .8rem; }
.legal-tbl th, .legal-tbl td { text-align: start; vertical-align: top; padding: .5rem .8rem; border-top: 1px solid var(--line); }
.legal-tbl th { background: var(--surface-2); font-weight: 600; }
.legal-tbl code, .legal code { direction: ltr; unicode-bidi: isolate; font-size: .85rem; overflow-wrap: anywhere; }
.datactl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; margin: 1rem 0; }
.datactl .st { margin: 0 0 .8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-row button {
  font: inherit; font-size: .9rem; min-height: 44px; padding: .5rem .9rem; cursor: pointer;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--ink-2); border-radius: 8px;
}
.btn-row button:hover { border-color: var(--ink); }
#dv-out pre { direction: ltr; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); padding: .8rem; border-radius: 8px; font-size: .85rem; }
.dv-msg { margin: .8rem 0 0; }
.note-box { background: var(--surface-2); border-inline-start: 4px solid var(--accent); border-radius: 8px; padding: .8rem 1rem; margin: 1.2rem 0; }
.legal .updated { color: var(--ink-2); font-size: .9rem; margin-top: 2rem; }
.legal .contact p { margin: .2rem 0; }
.footer-links { font-size: .9rem; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
/* דף עדים וחוקרים: הפתיח הסיפורי של כל ערך (בטקסט: *...*) בלי הטיה מלאכותית, בולט מעט */
.page-md h3 + p:has(> em:only-child) {
  border-inline-start: 3px solid var(--accent); padding: .1rem .9rem .15rem 0; margin: .4rem 0 1rem;
}
.page-md h3 + p > em:only-child { font-style: normal; font-weight: 500; color: var(--ink); font-size: 1.14em; line-height: 1.6; }
.page-md h3 { margin-top: 2.2rem; }
.gl-fig { margin: 1rem 0; }
/* מונח שמקשר למילון: קו תחתון מנוקד ועדין, בצבע הטקסט, כדי לא להתחרות בקישורים הרגילים */
a.gl-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent); text-underline-offset: .2em; }
a.gl-term:hover { color: var(--accent-ink); }
.gl-fig svg { width: 100%; max-width: 460px; height: auto; display: block; margin-inline: auto; }
.gl-panel rect { fill: var(--surface); stroke: var(--line); }
.gl-panel text { fill: var(--ink-2); font-size: 13px; font-family: var(--font); }
.gl-fault { stroke: var(--quake); stroke-width: 2.5; stroke-dasharray: 6 4; }
.gl-fence { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.gl-arrow { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* תוויות השכבות מתחת למפה בצבע השכבה */
.tg-dmg strong { color: color-mix(in srgb, var(--map-dmg) 80%, var(--ink)); }
.star-ref { text-decoration: none; color: var(--accent-ink); margin-inline-start: .15rem; font-weight: 600; }
.live-ticker.paused .pulse { animation: none; }
html.a11y-still .pulse { animation: none; }

/* ===== דף מכשירי מדידה ===== */
/* תווית שנפתחת בלחיצה על נקודה או עמודה בגרף (static/js/site.js) */
.chart-hit { cursor: pointer; }
.chart-dot.is-on { fill-opacity: 1; stroke: var(--ink); stroke-width: 1; }
.chart-tip {
  position: absolute; z-index: 30; max-width: min(280px, 80vw); padding: .4rem .6rem;
  background: var(--ink); color: var(--bg); border-radius: 8px; font-size: .82rem; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; transform: translate(50%, calc(-100% - 10px));
}
/* עמודות אופקיות: פילוח לפי חלק של השבר */
.hbars { display: grid; gap: .45rem; margin: .6rem 0 0; }
.hb-row { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr 2.5rem; align-items: center; gap: .6rem; font-size: .92rem; }
.hb-label { color: var(--ink); }
.hb-track { display: flex; height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.hb-bar { display: block; flex: none; height: 100%; background: var(--quake); border-radius: 7px; }
.hb-val { font-weight: 700; color: var(--instrumental-ink); font-variant-numeric: tabular-nums; }
/* איך מוצאים את מוקד-העל: שלוש תחנות ושלושה מעגלים */
.tri { margin: 1rem 0 1.4rem; }
.tri-svg { width: 100%; max-width: 560px; display: block; margin-inline: auto; height: auto; }
.tri-bg { fill: var(--surface); stroke: var(--line-soft); }
.tri-ring { fill: color-mix(in srgb, var(--quake) 7%, transparent); stroke: var(--quake); stroke-width: 1.6; stroke-dasharray: 5 4;
  transform-box: fill-box; transform-origin: 50% 50%; vector-effect: non-scaling-stroke; }
.tri-st path { fill: var(--ink); }
.tri-st text, .tri-epi text { fill: var(--ink-2); font-size: 12px; font-family: var(--font); }
.tri-epi text { fill: var(--accent-ink); font-weight: 700; }
/* רקע מאחורי הטקסט, כדי שקווי המעגלים לא יחצו אותו */
.tri-st text, .tri-epi text { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.tri-epi-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.tri-epi-pulse { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.tri-replay { font: inherit; font-size: .82rem; color: var(--accent-ink); background: none; border: 1px solid var(--line); border-radius: 999px; padding: .1rem .7rem; margin-inline-start: .4rem; cursor: pointer; }
/* האנימציה: המעגלים מתרחבים בזה אחר זה, ואז מופיע מוקד-העל. המצב במנוחה הוא התמונה המלאה. */
@keyframes tri-grow { from { transform: scale(0); opacity: 0; } 15% { opacity: 1; } }
@keyframes tri-in { from { opacity: 0; } }
@keyframes tri-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
.tri.play .tri-s1 { animation: tri-in .4s ease-out .1s backwards; }
.tri.play .tri-s2 { animation: tri-in .4s ease-out .2s backwards; }
.tri.play .tri-s3 { animation: tri-in .4s ease-out .3s backwards; }
.tri.play .tri-r1 { animation: tri-grow 1.1s ease-out .6s backwards; }
.tri.play .tri-r2 { animation: tri-grow 1.1s ease-out 1.5s backwards; }
.tri.play .tri-r3 { animation: tri-grow 1.1s ease-out 2.4s backwards; }
.tri.play .tri-epi { animation: tri-in .4s ease-out 3.5s backwards; }
.tri.play .tri-epi-pulse { animation: tri-pulse 1.4s ease-out 3.7s 2; }
@media (prefers-reduced-motion: reduce) { .tri * { animation: none !important; } .tri-replay { display: none; } }
html.a11y-still .tri * { animation: none !important; }
html.a11y-still .tri-replay { display: none; }

/* תמונות בגוף הדף (data/images.yaml) */
.photo { margin: 1.4rem 0 1.6rem; }
.photo img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-sm);
  background: var(--line-soft); border: 1px solid var(--line-soft);
}
.photo-link { display: block; }
.photo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.photo figcaption { margin-top: .5rem; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.photo .credit { display: block; margin-top: .15rem; font-size: .8rem; color: var(--muted); }
.photo .credit a { color: inherit; }
.photo-group {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.1rem; margin: 1.4rem 0 1.6rem; align-items: start;
}
.photo-group.n3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .photo-group, .photo-group.n3 { grid-template-columns: 1fr; } }
.photo-group .photo { margin: 0; }
.photo-group .photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.image-credits { font-size: .9rem; padding-inline-start: 1.2rem; }
.image-credits li { margin-bottom: .35rem; }
a[rel="license"] { white-space: nowrap; }

/* כרטיס רעידה עם תמונה (data/event_photos.yaml) */
.event-card.has-photo { padding-top: 0; overflow: hidden; }
.event-card.has-photo::before { top: .6rem; z-index: 1; box-shadow: 0 0 0 2px var(--surface); }
.event-card-photo {
  position: relative; display: block; flex: none; margin: 0 -.9rem .55rem; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.event-card-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.event-card-ill {
  position: absolute; bottom: .4rem; inset-inline-start: .45rem; padding: .05rem .45rem;
  font-size: .7rem; font-weight: 600; color: #fff; background: rgba(31, 30, 29, .66); border-radius: 999px;
}
.event-card.has-photo:hover .event-card-photo img { opacity: .92; }

/* ===== עוד אתרים שלי (המקור: weather-dashboard/assets/theme.css) =====
   אזור גלילה רגיל שזז לאט כשלא נוגעים בו (static/js/sister.js); ברשימה שני עותקים
   כדי שהתנועה תהיה רציפה. במצב "בלי תנועה" ההעתק מוסתר. */
.sister { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.6; margin-top: 1rem; }
.sister-lbl { flex: none; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.sister-view {
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
}
.sister-view::-webkit-scrollbar { display: none; }
.sister-track { display: flex; width: max-content; }
.sister-set { display: flex; gap: 8px; padding-inline-end: 8px; }
.sister a {
  flex: none; white-space: nowrap; font-size: .8rem; color: var(--ink-2); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
  transition: color .2s, border-color .2s;
}
.sister a:hover { color: var(--accent-ink); border-color: var(--accent); }
.sister a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sister-clone { display: none; } }
html.a11y-still .sister-clone { display: none; }
@media print { .sister { display: none; } }