/* ── Geniza Explorer — Museum-grade RTL Hebrew stylesheet ─────────────────── */

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  /* Palette — light papyrus */
  --bg:           #faf8f3;
  --bg-2:         #f2ede4;
  --bg-card:      #ffffff;
  --bg-card-h:    #fdf9f5;
  --bg-input:     #ffffff;
  --text:         #1e1b17;
  --text-2:       #5c5044;
  /* --text-3 was #9c887c (3.2:1 on --bg) and --gold was used for links at
     4.2:1 — both below the 4.5:1 WCAG AA floor for body text. Darkened just
     enough to pass while keeping the warm papyrus cast. --gold itself is
     unchanged: it is a fill colour for badges, bars and rules, where the 3:1
     non-text threshold applies.

     Second pass: #806d60 still measured 4.21:1 on --bg-card and 4.12:1 on the
     lighter badges — it cleared the 4.5 floor only against --bg itself, and
     every other surface it is used on fell short. #78655a is the darkest of
     the warm greys that clears 4.5:1 against all nine surfaces in this file
     (worst case 4.63:1, on --badge-letter). */
  --text-3:       #78655a;
  --text-faint:   #9c887c;   /* decorative only — never for text */
  --gold:         #b5621e;
  --gold-light:   #d4883a;
  --gold-dark:    #7a3e0e;
  --link:         #a05418;   /* 5.2:1 on --bg, 5.6:1 on white */
  --link-hover:   #7a3e0e;   /* hover darkens, so contrast only improves */
  --border:       #e6ddd2;
  --border-2:     #d4c6b8;
  --divider:      rgba(181,98,30,.15);

  /* Surprise panel — גוונים חמים ולא משפחת צבע שנייה. ראו ההערה ב-.surprise-btn */
  --surprise-1:        #f9f0e4;
  --surprise-2:        #f5ead9;
  --surprise-shadow:   rgba(122,62,14,.15);
  --surprise-shadow-2: rgba(122,62,14,.08);
  --surprise-shadow-h: rgba(122,62,14,.22);

  /* Type badges (light bg) */
  --badge-letter: #ede9f9;
  --badge-legal:  #e8f5ee;
  --badge-lit:    #fde8e8;
  --badge-rel:    #eef5e8;
  --badge-para:   #e8eef5;
  --badge-other:  #f0ede8;

  /* Fonts */
  --font-serif: 'Frank Ruhl Libre', 'David Libre', serif;
  --font-ui:    'Heebo', 'Arial', sans-serif;

  /* Spacing — סקאלה אחת, בקפיצות של .25rem (4px על בסיס 16px).
     לפני כן היו בקובץ 34 ערכי מרווח שונים, ובהם שלישיות כמעט־זהות
     (.6/.65/.7 ; .35/.4/.45 ; 1.2/1.25/1.3/1.35) שנוצרו כל אחת בנפרד
     ולא נבדלו זו מזו בעין. כל מרווח בקובץ מתיישר עכשיו על אחד עשר
     השלבים האלה. ערך שאינו ברשימה הוא סימן שצריך שלב חדש, לא ערך חדש.
     --sp-0 הוא השלב האופטי: 2px, לתיקוני יישור שאינם מרווח (למשל
     ה-margin-top של .card-icons, שמיישר אייקון לקו הבסיס של הטקסט). */
  --sp-0:  .125rem;
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  2rem;
  --sp-8:  2.5rem;
  --sp-9:  3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;

  --radius:    6px;
  --radius-lg: 12px;
  --shadow:    0 2px 10px rgba(30,20,10,.08);
  --shadow-lg: 0 8px 32px rgba(30,20,10,.13);

  /* Motion — שלושה משכים ועקומה אחת, במכוון.
     קודם היו בקובץ שבעה משכים (.12s עד .5s) פזורים על 26 כללים, ורובם
     בלי easing כלל, כך שכל ריחוף התנהג קצת אחרת. --ease היא ease-out
     סטנדרטית בלי חריגה מעבר ליעד: עקומה שחורגת וחוזרת (הישנה,
     cubic-bezier(.34,1.56,.64,1), על הקובייה) נקראת כשובבות, וזה לא
     הרושם שארכיון אמור לעשות. */
  --dur-fast: .15s;   /* צבע, גבול — לא אמור להיות מורגש */
  --dur-base: .25s;   /* transform, צל — כל מה שיש לו משקל */
  --dur-slow: .45s;   /* חשיפה מכוונת, שהעין אמורה לעקוב אחריה */
  --ease:     cubic-bezier(.4, 0, .2, 1);
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 100% ולא 16px: אחוזים מכבדים את גודל הגופן שהמשתמש הגדיר בדפדפן
   שלו, ומהווים את הבסיס שמדרגות תפריט הנגישות מכפילות. */
html { font-size: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.6;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

/* פקדי טופס אינם יורשים גופן מהדף — הדפדפן נותן להם גודל קבוע משלו
   (13.3333px בכרומיום). הגודל הזה אינו מגיב לפקד גודל הטקסט, ולכן טקסט
   שיושב ישירות בכפתור נשאר קפוא בזמן שכל השאר גדל. הביקורת תפסה את זה
   ב-.surprise-btn. הכלל יושב לפני כללי הרכיבים, וכל font-size מפורש
   שלהם גובר עליו. */
button, input, select, textarea { font: inherit; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

img { display: block; max-width: 100%; }

/* ── Site Header ─────────────────────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(180deg, #f8f3e8 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--divider);
  text-align: center;
  padding: var(--sp-10) var(--sp-6) var(--sp-9);
  position: relative;
  overflow: hidden;
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,168,76,.08) 0%, transparent 70%);
  pointer-events: none;
}

.header-inner { position: relative; max-width: 700px; margin: 0 auto; }

.header-ornament {
  font-size: 1.5rem;
  color: var(--gold);
  opacity: .6;
  margin-bottom: var(--sp-3);
  letter-spacing: .5em;
  display: block;
}

.site-title {
  font-family: var(--font-ui);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: var(--sp-2);
}

.site-subtitle {
  font-size: clamp(.95rem, 2.5vw, 1.15rem);
  color: var(--text-2);
  font-weight: 300;
  margin-bottom: var(--sp-3);
  max-width: 560px;
  margin-inline: auto;
}

.site-source {
  font-size: .85rem;
  color: var(--text-3);
}
.site-source a { color: var(--text-3); }
.site-source a:hover { color: var(--gold); }

/* ── Intro text ──────────────────────────────────────────────────────────────── */
.site-intro {
  font-size: clamp(.88rem, 2vw, 1rem);
  color: var(--text-3);
  font-weight: 300;
  max-width: 600px;
  margin: var(--sp-4) auto 0;
  line-height: 1.75;
}

/* ── Browse section ──────────────────────────────────────────────────────────── */
.browse-section {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-6);
}

.browse-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.browse-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}


.browse-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.browse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 99px;
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: .82rem;
  cursor: pointer;
  transition-property: background, border-color, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
  white-space: nowrap;
}
.chip:hover {
  background: var(--bg-card-h);
  border-color: var(--gold-dark);
  color: var(--gold-light);
}
.chip--active {
  background: var(--gold-dark);
  border-color: var(--gold);
  color: #fff;
  font-weight: 600;
}
/* Surprise cube */
.surprise-wrap {
  display: flex;
  justify-content: center;
}

.surprise-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-9);
  /* הכפתור היה סגול־כחול (#8a4cb0, #6a20b0, #f0e8f8, #e8f0fb ורוויית צל
     סגולה) בתוך עמוד פפירוס חם — חמישה צבעים שלא הופיעו בבלוק הטוקנים
     כלל, וצבע מותג שני בפועל. הקובייה עצמה כבר זהובה־אדומה־כחולה, ולכן
     מסגרת בזהב של האתר מיישבת אותה עם העמוד במקום להתחרות בה.
     שני עוצרי הגרדיאנט נבחרו כך ש---text-3 (של .surprise-sub) עדיין
     חוצה 4.5:1 מעליהם — 4.89 ו-4.64, מול 4.63 שהוא הגרוע ביותר בקובץ. */
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--surprise-1) 60%, var(--surprise-2) 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: center;
  transition-property: transform, box-shadow, border-color, background;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease);
  box-shadow: 0 4px 20px var(--surprise-shadow), 0 1px 4px var(--surprise-shadow-2);
  min-width: 260px;
  max-width: 400px;
}

.surprise-btn:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 36px var(--surprise-shadow-h), 0 3px 10px var(--surprise-shadow);
  border-color: var(--gold-dark);
  background: linear-gradient(160deg, #fff 0%, var(--surprise-1) 55%, var(--surprise-2) 100%);
}

.surprise-btn:active {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 5px 16px var(--surprise-shadow-h);
}

.surprise-dice {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  transition: transform var(--dur-slow) var(--ease);
}

.surprise-btn:hover .surprise-dice {
  transform: rotate(20deg) scale(1.14);
}

.surprise-title {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gold-dark);
  font-family: var(--font-ui);
  line-height: 1.2;
  letter-spacing: .02em;
}

.surprise-sub {
  display: block;
  font-size: .8rem;
  color: var(--text-3);
  margin-top: calc(-1 * var(--sp-0));
  font-style: italic;
}

@media (max-width: 600px) {
  .surprise-btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: var(--sp-5) var(--sp-6);
  }
  .surprise-dice { width: 86px; height: 86px; }
  .surprise-title { font-size: 1.35rem; }
}

/* Desktop: float the cube as a transparent corner accent above the hero */
@media (min-width: 900px) {
  .surprise-wrap {
    position: absolute;
    top: 1.25rem;
    left: 1.5rem;
    z-index: 5;
    margin: 0;
  }
  .surprise-wrap .surprise-btn,
  .surprise-wrap .surprise-btn:hover,
  .surprise-wrap .surprise-btn:active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: var(--sp-1) var(--sp-2);
    min-width: 0;
    max-width: none;
    gap: var(--sp-1);
  }
  .surprise-wrap .surprise-btn:hover {
    transform: translateY(-3px) scale(1.04);
  }
  .surprise-wrap .surprise-dice { width: 78px; height: 78px; }
  .surprise-wrap .surprise-title { font-size: 1rem; }
  .surprise-wrap .surprise-sub { font-size: .72rem; }
}

/* Reset button */
.btn-reset {
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text-3);
  font-family: var(--font-ui);
  font-size: .8rem;
  cursor: pointer;
  transition-property: color, border-color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.btn-reset:hover { color: var(--text); border-color: var(--text-3); }

.btn-reset-inline {
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--link);
  font-family: var(--font-ui);
  font-size: .88rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.btn-reset-inline:hover { background: var(--bg-card-h); }

/* Card geo line */
.card-geo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.card-lib {
  font-size: .75rem;
  color: var(--text-3);
}

/* ── Search Bar ──────────────────────────────────────────────────────────────── */
.search-bar-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,248,243,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) 0;
}

.search-bar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.search-icon {
  position: absolute;
  top: 50%;
  right: .85rem;
  transform: translateY(-50%);
  font-size: .9rem;
  pointer-events: none;
  color: var(--text-3);
}

.search-input {
  width: 100%;
  padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3);
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: .95rem;
  direction: rtl;
  transition-property: border-color, box-shadow;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}

.search-clear {
  position: absolute;
  top: 50%;
  left: .6rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: .8rem;
  padding: var(--sp-1);
  line-height: 1;
}
.search-clear:hover { color: var(--text); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filter-select {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: .85rem;
  direction: rtl;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
  appearance: none;
  -webkit-appearance: none;
  padding-left: var(--sp-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6050'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .6rem center;
}
.filter-select:focus {
  outline: none;
  border-color: var(--gold-dark);
}

/* ── Main Content ────────────────────────────────────────────────────────────── */
.main-content {
  max-width: 1300px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
}

.results-bar {
  font-size: .85rem;
  color: var(--text-3);
  margin-bottom: var(--sp-5);
  min-height: 1.4em;
}
.results-bar strong { color: var(--text-2); }

/* ── Cards Grid ──────────────────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition-property: border-color, transform, box-shadow;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: var(--gold);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.card:hover {
  background: var(--bg-card-h);
  border-color: var(--border-2);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card:hover::after { opacity: 1; }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.card-shelfmark {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
}

.card-icons {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
  margin-top: var(--sp-0);
}

.card-icon {
  font-size: .75rem;
  opacity: .55;
  line-height: 1;
}

.card-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
  /* חייב לבטל בדיוק את ה-padding של .card. נגזר ממנו ולא נכתב שוב,
     כדי ששינוי בסקאלה יזיז את שניהם יחד. */
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) 0;
  width: calc(100% + 2 * var(--sp-5));
  /* The global `img { max-width: 100% }` was clamping that calc back to the
     content box, so the picture came out 42px narrower than the card. With
     symmetric negative margins the leftover showed up as a gap on one side —
     the left in RTL — and the image looked pushed to the right. This affects
     the home page cards identically; they were always off-centre too. */
  max-width: none;
  display: block;
  background: var(--bg-2);
  transition: opacity var(--dur-base) var(--ease);
}
.card--has-thumb { padding-top: 0; }
.card--has-thumb .card-top { margin-top: 1rem; }

.badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 500;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 99px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.badge-type-letter    { background: var(--badge-letter); color: #5b4b9e; }
.badge-type-legal     { background: var(--badge-legal);  color: #2a7a52; }
.badge-type-lit       { background: var(--badge-lit);    color: #8b3030; }
.badge-type-rel       { background: var(--badge-rel);    color: #4a7a20; }
.badge-type-para      { background: var(--badge-para);   color: #2a507a; }
/* היה #7a6a5a על --badge-other: 4.46:1, מתחת לסף 4.5. הכשל היה קיים גם
   בכרטיסי דף הבית ורק לא נתפס, כי הביקורת רואה שמונה כרטיסים בכל רגע
   ודף נושא מציג מאה. #776757 נותן 4.66 באותו גוון. */
.badge-type-other     { background: var(--badge-other);  color: #776757; }

.badge-lang {
  /* היה --text-3 על --border: 3.66:1 במצב הרגיל ו-4.16:1 בניגודיות הפוכה.
     --text-2 על --bg-2 נותן 7.7:1, ומשאיר את התג מובחן מהכרטיס. */
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
}

.card-date {
  font-size: .8rem;
  color: var(--text-3);
}

.card-origin {
  font-size: .8rem;
  color: var(--text-3);
}
.card-origin::before { content: '📍 '; font-size: .7rem; }

.card-description {
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card-desc-label {
  font-size: .72rem;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: .03em;
}

/* Fragment page description label */
.desc-lang-note {
  display: block;
  font-size: .72rem;
  color: var(--gold-dark);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.card-footer {
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: .75rem;
  color: var(--text-3);
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-7);
  flex-wrap: wrap;
}

.page-gap {
  color: var(--text-3);
  padding: 0 var(--sp-0);
  user-select: none;
}

/* The jump box. Four thousand pages have no shape a reader can aim at with
   buttons, so this is the control that actually reaches page 1,847. It sits on
   its own line below the numbers once the bar wraps. */
.page-jump {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 1px solid var(--border);
}
.page-jump label,
.page-jump-total {
  font-size: .82rem;
  color: var(--text-3);
  white-space: nowrap;
}
.page-jump input {
  width: 4.5rem;
  padding: var(--sp-1) var(--sp-2);
  font: inherit;
  font-size: .88rem;
  text-align: center;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, .35rem);
}
.page-jump input:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 1px;
}
@media (max-width: 620px) {
  .page-jump {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-3);
  }
  /* At 320px with the text-size control turned up, "מתוך 4,493" is the piece
     that pushes the row past the viewport. The count is still on the input as
     its accessible name and its max, so nothing is lost by dropping it here. */
  .page-jump-total { display: none; }
  .page-jump input { width: 4rem; }
}

.page-btn {
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: .85rem;
  cursor: pointer;
  transition-property: background, border-color, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.page-btn:hover { background: var(--bg-card-h); border-color: var(--border-2); color: var(--text); }
.page-btn.active {
  background: var(--gold-dark);
  border-color: var(--gold);
  color: #fff;
  font-weight: 700;
}
.page-btn:disabled { opacity: .3; cursor: default; }

/* ── States ──────────────────────────────────────────────────────────────────── */
.loading-state {
  text-align: center;
  padding: var(--sp-11) var(--sp-4);
  color: var(--text-3);
}
.empty-state {
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
  color: var(--text-3);
}
.empty-icon { font-size: 3rem; margin-bottom: .75rem; }

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--border-2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto var(--sp-4);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Fragment page ───────────────────────────────────────────────────────────── */
.fragment-body { background: var(--bg-2); }

.top-nav {
  padding: var(--sp-4) var(--sp-6);
  background: rgba(250,248,243,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: .9rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-home {
  /* --gold is a fill colour (3:1 rule). As text it measured 4.18:1 on --bg
     and 3.81:1 on --bg-2 — below the 4.5:1 floor. --link is the same family
     at 5.24:1. Same substitution in .btn-primary and .btn-reset-inline. */
  color: var(--link);
  white-space: nowrap;
}

.nav-breadcrumb {
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragment-article {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-11);
}

.fragment-header {
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--divider);
}

.fragment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* The heading carries the description; the shelfmark sits under it.

   Heebo, not the serif: every other h1 on the site — .site-title on the home
   page, .tag-title on a hub — is set in it, and this one only inherited the
   serif because the rule was written when the heading was a Latin shelfmark.
   Frank Ruhl Libre suits a catalogue label and a figure; it does not suit a
   Hebrew sentence sitting where the reader expects the site's own voice. The
   shelfmark keeps the serif below, which is what it was chosen for. */
.fragment-heading {
  font-family: var(--font-ui);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: var(--sp-2);
}

h1.fragment-shelfmark {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}

p.fragment-shelfmark {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-2);
  letter-spacing: .01em;
  margin-bottom: var(--sp-1);
}

.fragment-library {
  font-size: .9rem;
  color: var(--text-3);
}

/* ── Two-column layout ───────────────────────────────────────────────────────── */
.fragment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 700px) {
  .fragment-layout { grid-template-columns: 1fr; }
}

/* ── Image column ────────────────────────────────────────────────────────────── */
.image-frame {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-9) var(--sp-6);
  color: var(--text-3);
  font-size: .9rem;
  min-height: 220px;
}

.placeholder-glyph {
  font-size: 3rem;
  opacity: .4;
}

.fragment-img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  transition: transform var(--dur-base) var(--ease);
}
.fragment-img:hover { transform: scale(1.01); }

.image-caption {
  padding: var(--sp-3) var(--sp-4);
  font-size: .78rem;
  color: var(--text-3);
  background: var(--bg-2);
  text-align: center;
  border-top: 1px solid var(--border);
}

.image-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.image-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: .85rem;
  transition-property: border-color, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.image-link:hover {
  border-color: var(--gold-dark);
  color: var(--gold-light);
  text-decoration: none;
}
.image-link-icon { font-size: 1rem; }

/* ── Meta column ─────────────────────────────────────────────────────────────── */
.meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  margin-bottom: var(--sp-6);
}

.meta-list dt {
  font-size: .78rem;
  color: var(--text-3);
  white-space: nowrap;
  padding-top: var(--sp-1);
  font-weight: 500;
  letter-spacing: .02em;
}

.meta-list dd {
  font-size: .92rem;
  color: var(--text-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}

.meta-list dd:last-child { border-bottom: none; }

.section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold-dark);
  margin-bottom: var(--sp-2);
}

.description-block {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-right: 3px solid var(--gold-dark);
}

.description-text {
  font-size: .92rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* התיאור המקורי באנגלית — נטען לפי בקשה, ראו assets/doc-english.js */
.english-toggle,
.transcription-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text-2);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition-property: background, border-color, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.english-toggle:hover,
.transcription-toggle:hover {
  background: var(--bg-card-h);
  border-color: var(--gold-dark);
  color: var(--gold-light);
}

.english-desc { margin-top: .9rem; }

.english-note,
.transcription-note {
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ── התעתיק ───────────────────────────────────────────────────────────────────
   הטקסט מגיע מ-PGP עם פסקה לכל שורת כתב יד, ולכן הפסקאות צמודות זו לזו והשורה
   היא יחידת המשמעות. הרקע נבדל מן העמוד כדי שיהיה ברור היכן נגמר התיאור שלנו
   ומתחיל המקור. ראו assets/doc-text.js. */
.transcription-block { margin-bottom: var(--sp-6); }

.transcription-panel { margin-top: var(--sp-4); }

.transcription-item + .transcription-item {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.transcription-credit {
  font-size: .75rem;
  color: var(--text-3);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}

.transcription-body {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-serif);
  font-size: .95rem;
  line-height: 1.9;
  color: var(--text);
  /* שורה ארוכה של תעתיק אינה נשברת יפה, ולכן היא גוללת באזור משלה במקום
     להרחיב את העמוד (קריטריון 1.4.10). */
  overflow-x: auto;
}

.transcription-body p { margin: 0; }

/* כל צד של הקטע (recto/verso) מגיע כ-section עם data-canvas משלו. */
.transcription-body section + section {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-2);
}

.transcription-source {
  margin-top: var(--sp-3);
  font-size: .72rem;
  color: var(--text-3);
  line-height: 1.7;
}

.tags-block { margin-bottom: 1.5rem; }

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tag-pill {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 99px;
  font-size: .78rem;
  color: var(--text-3);
  transition-property: color, border-color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.tag-pill:hover { color: var(--gold-light); border-color: var(--gold-dark); }

.actions-block { margin-top: 1.5rem; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  background: transparent;
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius);
  color: var(--link);
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 500;
  transition-property: background, color, border-color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--gold-dark);
  color: #fff;
  text-decoration: none;
}

/* ── Fragment navigation ─────────────────────────────────────────────────────── */
.fragment-nav {
  margin-top: var(--sp-9);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.frag-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: .85rem;
  transition-property: background, border-color, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
  text-decoration: none;
}
.frag-nav-btn:hover {
  background: var(--bg-card-h);
  border-color: var(--gold-dark);
  color: var(--gold-light);
  text-decoration: none;
}

.frag-nav-label {
  font-size: .78rem;
  color: var(--text-3);
  text-align: center;
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  font-size: .82rem;
  color: var(--text-3);
  line-height: 1.8;
}
.site-footer a { color: var(--link); text-decoration: underline; }
.site-footer a:hover { color: var(--link-hover); }
.footer-build { margin-top: .3rem; }
.footer-note {
  max-width: 46rem;
  margin: var(--sp-2) auto 0;
  font-size: .78rem;
  color: var(--text-3);
}

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .search-bar-inner { flex-direction: column; align-items: stretch; gap: .5rem; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .filter-select { min-width: 0; }
  .btn-reset { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .site-header { padding: 2.5rem 1rem 2rem; }
  .search-bar-wrapper { padding: .6rem 0; }
  .search-bar-inner { padding: 0 1rem; }
  .search-input { font-size: .9rem; }
  .filters { grid-template-columns: 1fr 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .fragment-article { padding: 1.25rem 1rem 3rem; }
  .meta-list { grid-template-columns: 1fr; }
  .meta-list dt { padding-bottom: 0; padding-top: .6rem; }
  .meta-list dd { border-bottom: 1px solid var(--border); }
  .fragment-nav { flex-direction: column; align-items: stretch; }
  .frag-nav-btn { justify-content: center; }
}

/* ── Selection ───────────────────────────────────────────────────────────────── */
::selection {
  background: rgba(181,98,30,.2);
  color: var(--text);
}

/* ── About link in header ────────────────────────────────────────────────────── */
.about-link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-size: .82rem;
  /* --gold-light על רקע הכותרת נתן 2.68:1, ו-opacity .8 הוריד אותו עוד.
     ההדגשה עוברת לקו תחתון במעבר עכבר במקום לשקיפות. */
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.about-link:hover { color: var(--link-hover); text-decoration: underline; }

/* ── KPI section (2-card version) ────────────────────────────────────────────── */
.dashboard-kpi {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-5) 0;
}
.dash-kpi-row--two {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "docs dyk dyk img";
  gap: var(--sp-3);
}

.dash-kpi-row--two > :first-child { grid-area: docs; }
#kpi-dyk                          { grid-area: dyk; }
#kpi-img                          { grid-area: img; }

.kpi-card--dyk {
  align-items: flex-start;
  text-align: right;
  text-decoration: none;
  color: inherit;
  justify-content: flex-start;
}
.kpi-card--dyk:hover { color: inherit; }
.kpi-dyk-label { font-size: .73rem; color: var(--text-3); font-weight: 500; }
.kpi-dyk-text  { font-size: .875rem; line-height: 1.6; color: var(--text); flex: 1; }
.kpi-dyk-shelfmark { font-size: .72rem; color: var(--text-3); margin-top: auto; }

/* ── Dashboard (stats below cards) ──────────────────────────────────────────── */
.dashboard {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-7) var(--sp-6);
}

.dash-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* KPI row (legacy - unused) */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-1);
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur-base) var(--ease);
}
.kpi-card:hover { box-shadow: var(--shadow-lg); }

.kpi-icon { font-size: 1.4rem; line-height: 1; opacity: .75; }

.kpi-num {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1.1;
}

.kpi-label { font-size: .73rem; color: var(--text-3); font-weight: 500; }

/* Panels grid */
.dash-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.dash-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow);
}

.dash-panel--wide { grid-column: 1 / -1; }

/* פריט ברשת מקבל min-width:auto כברירת מחדל, ולכן תוכן שאינו נשבר —
   ענן תגיות, שורת כפתורים, שם מקום ארוך — מרחיב את המסלול מעבר לרוחב
   המסך במקום לגלוש בתוך הפריט. ברוחב 320px עם טקסט מוגדל זה מה שפתח
   גלילה אופקית בכל הדף (קריטריון 1.4.10). break-word ולא anywhere:
   הוא נכנס לפעולה רק כשמילה בודדת רחבה מהשורה. */
.dash-panels > *,
.dash-kpi-row--two > *,
.dash-kpi-row > * { min-width: 0; }
.dash-panel,
.kpi-card { overflow-wrap: break-word; }

.dash-panel--century { grid-column: 1 / -1; }

.dash-panel-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.dash-panel-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}
.dash-panel-hd .dash-panel-title { margin-bottom: 0; }

.dash-panel-hint { font-size: .7rem; color: var(--text-3); font-style: italic; }

.dash-loading { color: var(--text-3); font-size: .85rem; }

/* Tag cloud */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  align-items: baseline;
  line-height: 2;
}

.tag-pill-cloud {
  cursor: pointer;
  color: var(--text-2);
  font-weight: 500;
  padding: var(--sp-0) var(--sp-1);
  border-radius: var(--radius);
  background: none;
  border: none;
  font-family: var(--font-ui);
  transition-property: background, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
  line-height: 1.3;
}
.tag-pill-cloud:hover { background: var(--gold-dark); color: #fff; }

/* Distribution bars */
.dist-list { display: flex; flex-direction: column; gap: .5rem; }

.dist-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 3.5rem;
  align-items: center;
  gap: var(--sp-2);
  font-size: .8rem;
  /* שורה שיש לה רכזת היא <a> אל t/<slug>/ (ראו render_type_dist ב-build.py),
     ושורה שאין לה נשארת <div>. האיפוס משאיר את השתיים זהות זו לזו. */
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  text-align: start;
}

.dist-row--link {
  /* --sp-1 ולא --sp-0 באנכי: היישור לסקאלה הוריד את גובה השורה מ-25px
     ל-24px בדיוק, שהוא הרצפה של WCAG 2.5.8. השלב הבא מחזיר מרווח. */
  padding: var(--sp-1);
  margin: 0 calc(-1 * var(--sp-1));  /* מבטל את ה-padding האופקי שמעל */
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.dist-row--link .dist-label { color: var(--link); }
.dist-row--link:hover { background: var(--bg-card-h); text-decoration: none; }
.dist-row--link:hover .dist-label {
  color: var(--link-hover);
  text-decoration: underline;
}
.dist-row--link:hover .dist-bar {
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}

.dist-label {
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dist-bar-wrap {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.dist-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 3px;
  transition: width var(--dur-slow) var(--ease);
}

.dist-count { color: var(--text-3); font-size: .72rem; white-space: nowrap; }

/* Century chart */
.century-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  height: 90px;
  /* עם טקסט וריווח מוגדלים שבע העמודות אינן נכנסות ל-320px, והתרשים
     היה מרחיב את הדף כולו. אזור גליל משלו הוא הפתרון שקריטריון 1.4.10
     מכיר בו לתוכן דו-ממדי. tabindex בתבנית הופך אותו לגליל גם במקלדת. */
  overflow-x: auto;
}

.century-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  height: 100%;
  justify-content: flex-end;
  min-width: 2.6rem;
  /* עמודה היא <a> אל רכזת המאה — ראו render_century_strip ב-build.py. */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}

.century-col--link:hover { text-decoration: none; }
.century-col--link:hover .century-bar {
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  filter: brightness(1.05);
}
.century-col--link:hover .century-label {
  color: var(--link-hover);
  text-decoration: underline;
}

.century-bar {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition-property: background, box-shadow, filter;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}

.century-label { font-size: .68rem; color: var(--text-3); text-align: center; }
.century-count { font-size: .62rem; color: var(--text-3); }

/* ── People timeline ─────────────────────────────────────────────────────────
   רכזות האישים לפי סדר חייהן, שורה למאה. הקיבוץ הוא מה שנושא את הכרונולוגיה:
   הקורא רואה את רצף המאות לפני שהוא לוחץ על משהו. הפריסה היא שורות ולא
   עמודות משום שהמאות אינן שוות בגודלן — שתיים מהן נושאות תשעה שמות ואחת
   נושאת שניים — וטור אחד ארוך פי ארבעה מחברו קרא כתקלה. */
.people-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.era-block {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding-top: var(--sp-3);
  border-top: 2px solid var(--divider);   /* ציר הזמן עצמו */
}

.era-rail {
  justify-self: start;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold-dark);
  background: var(--bg-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition-property: background, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
a.era-rail:hover {
  background: var(--gold-dark);
  color: #fff;
  text-decoration: none;
}

.era-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--sp-2);
}

.person-chip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card-h);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition-property: background, border-color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.person-chip:hover {
  background: var(--bg-card);
  border-color: var(--gold-light);
  text-decoration: none;
}

.person-name {
  font-family: var(--font-serif);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.person-chip:hover .person-name { color: var(--link-hover); text-decoration: underline; }
.person-years { font-size: .72rem; color: var(--text-2); }
.person-role,
.person-count { font-size: .68rem; color: var(--text-3); }

/* ברוחב טלפון תווית המאה עולה מעל השמות: טור בן 6rem לצד כרטיסים גזל
   מהם את המקום שהשם הארוך ביותר צריך. */
@media (max-width: 560px) {
  .era-block { grid-template-columns: 1fr; gap: var(--sp-2); }
}

@media (max-width: 700px) {
  .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dash-panels  { grid-template-columns: 1fr; }
  .dash-panel--wide, .dash-panel--century { grid-column: 1; }
}

@media (max-width: 600px) {
  .dash-kpi-row--two {
    padding: 0 var(--sp-4);
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "docs img" "dyk dyk";
  }
}

/* ── Location map panel ───────────────────────────────────────────────────────── */
.dash-panel--map { padding-bottom: .75rem; }

#geniza-map {
  height: 340px;
  border-radius: var(--radius);
  margin-top: var(--sp-3);
  background: var(--bg-2);
  z-index: 0;
}

/* Leaflet attribution override */
.leaflet-container .leaflet-control-attribution {
  font-size: .6rem;
  background: rgba(250,248,243,.7);
}

/* Map location pins */
.gmap-pin {
  width: 90px;
  height: 34px;
  background: var(--text);
  color: var(--bg);
  border: 1.5px solid var(--gold-dark);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition-property: background, border-color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
  position: relative;
}

.gmap-pin::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--gold-dark);
}

.gmap-pin:hover,
.gmap-pin--active {
  background: var(--gold-dark);
  border-color: var(--gold-light);
}

.gmap-pin:hover::after,
.gmap-pin--active::after {
  border-top-color: var(--gold-light);
}

.gmap-pin-name {
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 84px;
  display: block;
  text-align: center;
  direction: rtl;
  font-family: var(--font-ui);
  line-height: 1;
}

.gmap-pin-count {
  font-size: .6rem;
  opacity: .65;
  font-family: var(--font-ui);
  line-height: 1;
}

/* ── Spice bar ───────────────────────────────────────────────────────────────── */
.dash-panel--spices { padding-bottom: 1.1rem; }

.spice-banner-wrap {
  width: 100%;
  height: 80px;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  background: var(--bg-2);
}

.spice-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

.spice-buttons {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--sp-2);
}

.spice-btn {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-0);
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-2);
  cursor: pointer;
  transition-property: background, border-color, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
  font-family: var(--font-ui);
}

.spice-btn:hover {
  background: var(--gold);
  border-color: var(--gold-dark);
  color: #fff;
}

.spice-btn-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.spice-btn-latin {
  font-size: .6rem;
  color: var(--text-3);
  font-style: italic;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.spice-btn:hover .spice-btn-name,
.spice-btn:hover .spice-btn-latin,
.spice-btn:hover .spice-btn-count { color: #fff; }

.spice-btn-count {
  font-size: .68rem;
  color: var(--text-3);
}

@media (max-width: 700px) {
  .spice-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .spice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── Accessibility ───────────────────────────────────────────────────────────── */

/* Keyboard focus. .search-input and .filter-select set `outline: none` and
   replace it with a border colour change, which is invisible to anyone who
   cannot perceive that hue; everything else relied on the UA default outline,
   which the papyrus palette washes out. One consistent, high-contrast ring for
   every interactive element, shown only for keyboard use. */
:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 2px;
  border-radius: 3px;
}
.search-input:focus-visible,
.filter-select:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 1px;
}

/* Skip link — first tab stop, so keyboard and screen-reader users can jump
   past the header, the search bar and the filter row. */
.skip-link {
  position: absolute;
  right: 1rem;
  top: -100px;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--gold-dark);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 500;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
  top: 0;
  color: #fff;
  text-decoration: underline;
}

/* Respect the OS "reduce motion" setting: html has `scroll-behavior: smooth`,
   several buttons scroll the page programmatically, and the loading spinner
   animates continuously. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Honour a forced-colours / high-contrast mode. */
@media (forced-colors: active) {
  .badge, .chip, .tag-pill, .page-btn { border: 1px solid currentColor; }
  :focus-visible { outline: 3px solid Highlight; }
}

.noscript-note {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text-2);
}

/* ── Static document directory (/d/) ─────────────────────────────────────────── */
.doc-index {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-10);
}
.doc-index-title {
  font-family: var(--font-ui);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: var(--sp-2);
}
.doc-index-sub {
  color: var(--text-2);
  font-size: .95rem;
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.doc-index-list {
  margin: 0 var(--sp-6) var(--sp-7) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.doc-index-list li {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--divider);
  line-height: 1.5;
}
.doc-index-list a {
  font-weight: 500;
  font-size: .95rem;
}
.doc-index-meta {
  display: block;
  font-size: .8rem;
  color: var(--text-3);
}
.doc-index .pagination a.page-btn {
  text-decoration: none;
}

/* ── Tag hub pages (/t/) ─────────────────────────────────────────────────────── */
/* The grid needs the same room the home page gives it — .main-content is
   1300px, and at 900px only two cards fit per row. The prose does not: a
   1250px line is far past a comfortable measure, so the heading, the
   introduction and the related-tags block stay narrow and centred while the
   cards span the full width. */
.tag-hub {
  max-width: 1300px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-10);
}
.tag-header,
.tag-intro,
.tag-more,
.tag-related,
.tag-list-label {
  max-width: 900px;
  margin-inline: auto;
}
.tag-header {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.tag-kicker {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold-dark);
  margin-bottom: var(--sp-2);
}
.tag-title {
  font-family: var(--font-ui);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: var(--sp-2);
}
.tag-count {
  color: var(--text-2);
  font-size: .95rem;
}

.tag-intro {
  margin-bottom: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-right: 3px solid var(--gold-dark);
}
.tag-intro p {
  font-size: .95rem;
  color: var(--text-2);
  line-height: 1.8;
}

.tag-list-label { margin-bottom: 1rem; max-width: 900px; margin-inline: auto; }

.tag-related {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  max-width: 900px;
  margin-inline: auto;
}

.tag-group { margin-bottom: 2rem; }
.tag-group-list {
  margin: 0 var(--sp-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.tag-group-list li {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--divider);
  line-height: 1.5;
}
.tag-group-list a {
  font-weight: 500;
  font-size: .95rem;
}

.tag-hub .pagination a.page-btn { text-decoration: none; }

/* A tag that has a hub page is a link; one that does not stays plain text. */
a.tag-pill-link { text-decoration: none; }
a.tag-pill-link:hover {
  color: var(--gold-light);
  border-color: var(--gold-dark);
  text-decoration: none;
}

/* A tag chip that leads to its hub page. Same look as the button it replaced —
   only the element changed, from <button> to <a>. */
a.tag-pill-cloud,
a.spice-btn { text-decoration: none; }
a.tag-pill-cloud:hover,
a.spice-btn:hover { text-decoration: none; }

.dash-panel-link {
  text-decoration: none;
  white-space: nowrap;
}
.dash-panel-link:hover { text-decoration: underline; }

.tag-more {
  margin-top: var(--sp-6);
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ── Related documents, at the foot of every document page ──────────────────── */
.related-block {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.related-grid {
  margin-top: var(--sp-4);
}