@font-face {
  font-family: "Cinzel Local";
  src: url("fonts/Cinzel-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Lateef Local";
  src: url("fonts/Lateef-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lateef Local";
  src: url("fonts/Lateef-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Amiri Quran Local";
  src: url("fonts/AmiriQuran-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #101a12;
  --bg2: #162018;
  --bg3: #1d2b1f;
  --text: #e6dac4;
  --muted: #8c8268;
  --faint: #5c5646;
  --gold: #c8a84c;
  --gold-alpha: rgba(200,168,76,.45);
  --glass: rgba(200,168,76,.11);
  --glass-b: rgba(200,168,76,.28);
  --glass-focus: rgba(200,168,76,.52);
  --divider: rgba(200,168,76,.12);
  --link: #b89c60;
  --shadow: rgba(0,0,0,.45);
  --field-text: #e6dac4;
  --spine-x: 68px;

  --font-display: "Cinzel Local", Georgia, serif;
  --font-body: "Lateef Local", Georgia, serif;
  --font-ar: "Amiri Quran Local", "Lateef Local", serif;
  --font-ui: "Cinzel Local", ui-sans-serif, system-ui, sans-serif;
}
[data-theme="light"] {
  --bg: #f2e9d4;
  --bg2: #e8dabb;
  --bg3: #faf4e4;
  --text: #1c160a;
  --muted: #5a4e32;
  --faint: #8a7b5c;
  --gold: #7a5810;
  --gold-alpha: rgba(100,72,14,.40);
  --glass: rgba(255,250,230,.84);
  --glass-b: rgba(100,72,14,.30);
  --glass-focus: rgba(100,72,14,.52);
  --divider: rgba(100,72,14,.14);
  --link: #6e4e0c;
  --shadow: rgba(80,58,10,.12);
  --field-text: #1c160a;
}

* { box-sizing: border-box; }
html { font-size: 17px; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
  position: relative;
  background: var(--bg);
  transition: background .4s, color .4s;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 65% 52% at 18% 0%, rgba(215,172,68,.22) 0%, transparent 58%),
    radial-gradient(ellipse 45% 60% at 85% 90%, rgba(16,68,22,.38) 0%, transparent 62%),
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(18,42,18,.12) 0%, transparent 70%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 65% 52% at 18% 0%, rgba(255,238,180,.55) 0%, transparent 55%),
    radial-gradient(ellipse 45% 60% at 85% 90%, rgba(190,160,80,.12) 0%, transparent 62%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
[data-theme="light"] body::after { opacity: .055; }

/* Keep old atmosphere divs from previous builds harmless */
.bg-aurora, .bg-grain, .bg-vignette, .bg-twinkles { display: none; }

#app {
  position: relative;
  z-index: 10;
  width: min(740px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 100px;
}

.site-header {
  text-align: center;
  padding: 52px 0 36px;
  position: relative;
}
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 160px;
  background: radial-gradient(ellipse at 50% 20%, rgba(200,168,76,.12) 0%, transparent 70%);
  pointer-events: none;
}
.logo-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: var(--bg3);
  border: 1px solid var(--gold-alpha);
  box-shadow: 0 0 0 4px rgba(200,168,76,.07), 0 0 32px rgba(200,168,76,.10);
  display: grid;
  place-items: center;
  color: var(--gold);
  overflow: hidden;
}
.logo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.logo-fallback {
  font-family: var(--font-ar);
  font-size: 28px;
  color: var(--gold);
}
.site-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(15px, 3.6vw, 23px);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.3;
  color: var(--text);
}
.site-subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.header-ornament {
  width: min(140px, 44%);
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-alpha) 40%, var(--gold-alpha) 60%, transparent);
}

/* Controls */
.controls {
  position: sticky;
  top: 10px;
  z-index: 50;
  padding: 14px 16px 13px;
  margin: 0 -16px 12px;
  border: 1px solid rgba(200,168,76,.13);
  border-radius: 18px;
  background: rgba(13,20,13,.88);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
[data-theme="light"] .controls {
  background: rgba(242,233,212,.94);
  border-color: rgba(100,72,14,.16);
  box-shadow: 0 10px 28px rgba(80,58,10,.08);
}
.search-wrap { position: relative; margin-bottom: 12px; }
.search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 15px;
  pointer-events: none;
  font-style: normal;
}
#search-input {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: 16px;
  color: var(--field-text);
  padding: 13px 18px 13px 48px;
  font: 18px var(--font-body);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none;
}
#search-input::placeholder { color: var(--muted); opacity: 1; }
#search-input:focus {
  border-color: var(--glass-focus);
  background: rgba(200,168,76,.16);
  box-shadow: 0 0 0 3px rgba(200,168,76,.10);
}
[data-theme="light"] #search-input:focus { box-shadow: 0 0 0 3px rgba(100,72,14,.09); }
.clear-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
}
.clear-btn.visible { opacity: 1; }

.filter-row, .date-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.date-row { margin-top: 8px; }
.filter-label, .results-count {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 4px;
}
.filter-chip {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 2px 4px 3px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.filter-chip:hover, .filter-chip.active {
  color: var(--text);
  border-bottom-color: var(--gold-alpha);
}
.results-count { margin-left: auto; }
#month-filter {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: 10px;
  color: var(--field-text);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  outline: none;
}
[data-theme="light"] #month-filter { background: var(--glass); color: var(--text); }
.status-line {
  color: var(--faint);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 0 0;
}

/* Timeline */
#timeline {
  position: relative;
  padding-top: 8px;
}
#timeline::after {
  content: "";
  position: absolute;
  left: var(--spine-x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold-alpha) 6rem, var(--gold-alpha) calc(100% - 6rem), transparent);
  box-shadow: 0 0 16px rgba(200,168,76,.08);
  pointer-events: none;
}
#timeline::before { display: none; }

.date-divider {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  padding: 52px 0 20px;
  gap: 0;
}
.date-divider::before {
  content: "";
  justify-self: end;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--gold-alpha);
  background: var(--bg);
  box-shadow: 0 0 14px rgba(200,168,76,.14);
  transform: translateX(4.5px);
}
.date-divider::after { display: none; }
.date-text {
  grid-column: 2;
  padding-left: 20px;
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
}

.entry {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 0;
  padding: 20px 0 22px;
  border-bottom: 1px solid rgba(200,168,76,.07);
  position: relative;
  transition: background .18s;
  border-radius: 2px;
}
.entry:hover { background: transparent; }
.entry::before {
  content: "";
  position: absolute;
  left: calc(var(--spine-x) - 2.5px);
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(200,168,76,.35);
  box-shadow: 0 0 10px rgba(200,168,76,.10);
  transition: opacity .18s, background .18s;
}
.entry:hover::before { background: rgba(200,168,76,.42); }
.entry:target {
  background: transparent;
  box-shadow: inset 2px 0 0 rgba(200,168,76,.22);
}
.entry-time {
  padding-top: 3px;
  text-align: right;
  padding-right: 16px;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--faint);
  line-height: 1.5;
  white-space: nowrap;
  user-select: none;
  transition: color .15s;
}
.entry:hover .entry-time { color: var(--muted); }
.entry-body {
  padding-left: 20px;
  min-width: 0;
  position: relative;
}

/* Metadata popover */
.entry-tools {
  position: absolute;
  top: -1px;
  left: 8px;
  z-index: 6;
}
.more-btn {
  width: 25px;
  height: 25px;
  border: 1px solid rgba(200,168,76,.18);
  border-radius: 8px;
  background: rgba(16,26,18,.55);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .38;
  transition: opacity .2s, border-color .2s, background .2s;
}
[data-theme="light"] .more-btn { background: rgba(242,233,212,.72); }
.entry:hover .more-btn, .entry:focus-within .more-btn { opacity: .9; }
.more-btn:hover { opacity: 1; border-color: var(--gold-alpha); }
.meta-popover {
  position: absolute;
  top: 31px;
  left: 0;
  min-width: min(300px, calc(100vw - 42px));
  max-width: 360px;
  padding: 12px 13px;
  border: 1px solid var(--glass-b);
  border-radius: 12px;
  background: rgba(13,20,13,.96);
  color: var(--muted);
  box-shadow: 0 18px 50px var(--shadow);
  backdrop-filter: blur(14px);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
[data-theme="light"] .meta-popover { background: rgba(250,244,228,.98); }
.meta-popover[hidden] { display: none; }
.meta-popover p { margin: 0 0 7px; }
.meta-popover p:last-child { margin-bottom: 0; }
.meta-popover a, .meta-popover button { color: var(--link); }
.meta-popover button {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Text */
.entry-text {
  color: var(--text);
}
.entry-text p {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.76;
  color: var(--text);
  margin: 0 0 .85em;
}
.entry-text p:last-child { margin-bottom: 0; }
.entry-text p[dir="rtl"], .entry-text .ar-block {
  direction: rtl;
  text-align: right;
  font-family: var(--font-ar);
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.95;
}
.entry-text strong { color: color-mix(in srgb, var(--text) 75%, var(--gold) 25%); font-weight: 500; }
.entry-text em { font-style: italic; color: color-mix(in srgb, var(--text), transparent 12%); }
.entry-text a { color: var(--link); text-decoration: none; border-bottom: 1px dotted rgba(184,156,96,.4); }
.entry-text a:hover { border-bottom-color: var(--gold-alpha); color: var(--text); }
.entry-text blockquote {
  margin: 14px 0;
  padding: 12px 18px;
  border-left: 1.5px solid var(--gold-alpha);
  background: rgba(200,168,76,.04);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}
.entry-text blockquote[dir="rtl"] {
  border-left: 0;
  border-right: 1.5px solid var(--gold-alpha);
  border-radius: 6px 0 0 6px;
}
.entry-text blockquote p { margin-bottom: .72em; }

/* Media */
.media-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}
.media-box {
  border: 1px solid rgba(200,168,76,.18);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg2);
  box-shadow: 0 4px 20px var(--shadow);
}
.media-box img, .media-box video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 7px;
}
.media-caption {
  padding: 8px 10px;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--faint);
}
.media-title { color: var(--text); font-family: var(--font-body); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.media-caption[dir="rtl"] .media-title,
.file-link[dir="rtl"] strong {
  direction: rtl;
  text-align: right;
  font-family: var(--font-ar);
}

/* Custom audio */
.media-audio {
  margin: 10px 0 14px;
  border: 1px solid rgba(200,168,76,.16);
  border-radius: 8px;
  background: var(--bg2);
  padding: 14px 16px;
  box-shadow: 0 2px 12px var(--shadow);
  overflow: visible;
}
.custom-audio {
  display: grid;
  gap: 10px;
}
.audio-title {
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.audio-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-alpha);
  flex-shrink: 0;
}
.audio-title[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: var(--font-ar);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  justify-content: flex-start;
}
.audio-controls {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
}
.audio-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-alpha);
  background: rgba(200,168,76,.08);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.audio-play:hover { background: rgba(200,168,76,.15); border-color: var(--glass-focus); }
.audio-progress {
  --progress: 0%;
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(200,168,76,.11);
  border: 1px solid rgba(200,168,76,.13);
  cursor: pointer;
  overflow: hidden;
}
.audio-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(200,168,76,.50), rgba(200,168,76,.82));
}
.audio-time {
  min-width: 72px;
  text-align: right;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--muted);
}
.native-audio { display: none; }
.media-open {
  margin: 0;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.media-open a { color: var(--link); text-decoration: none; border-bottom: 1px dotted rgba(184,156,96,.4); }

.media-file {
  border-left: 2px solid var(--gold-alpha);
  padding: 12px 14px 12px 18px;
  background: rgba(200,168,76,.04);
  border-radius: 0 6px 6px 0;
  display: grid;
  gap: 4px;
  text-decoration: none;
  transition: background .18s;
  box-shadow: none;
}
.media-file:hover { background: rgba(200,168,76,.08); }
.file-link { text-decoration: none; color: var(--text); display: grid; gap: 4px; }
.file-link strong {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-body);
}
.file-link span, .file-link small {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--link);
}

/* Empty/footer/buttons */
#no-results {
  display: none;
  text-align: center;
  padding: 80px 0;
  color: var(--faint);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#theme-toggle {
  position: fixed;
  left: 14px;
  bottom: 18px;
  z-index: 100;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(200,168,76,.24);
  border-radius: 4px;
  background: rgba(16,26,18,.70);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .55;
  transition: opacity .2s;
}
[data-theme="light"] #theme-toggle { background: rgba(242,233,212,.80); }
#theme-toggle:hover { opacity: 1; }
.float-nav {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.fn-btn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(200,168,76,.20);
  border-radius: 4px;
  background: rgba(16,26,18,.70);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .50;
  transition: opacity .2s;
}
[data-theme="light"] .fn-btn { background: rgba(242,233,212,.80); }
.fn-btn:hover { opacity: 1; }
.fn-progress {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: .06em;
  color: var(--faint);
  pointer-events: none;
  border: 1px solid rgba(200,168,76,.14);
  border-radius: 3px;
  padding: 2px 4px;
  background: rgba(16,26,18,.60);
  backdrop-filter: blur(6px);
}
[data-theme="light"] .fn-progress { background: rgba(242,233,212,.75); }
.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--divider);
  padding: 44px 0 20px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 600px) {
  #app { width: calc(100% - 32px); }
  :root { --spine-x: 54px; }
  .entry, .date-divider { grid-template-columns: 54px 1fr; }
  .entry::before { left: calc(var(--spine-x) - 3px); }
  .date-divider::before { transform: translateX(3.5px); }
  .entry-body, .date-text { padding-left: 18px; }
  .entry-text p { font-size: 17px; }
  .audio-controls { grid-template-columns: 32px 1fr; }
  .audio-time { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}


/* v9 fixes */
.audio-progress {
  touch-action: none;
  user-select: none;
}
.audio-progress::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--progress);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  border: 1px solid var(--gold-alpha);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(200,168,76,.18);
  opacity: .82;
}
.audio-progress.is-dragging::after,
.audio-progress:hover::after {
  opacity: 1;
}
@media (max-width: 600px) {
  .controls {
    top: 8px;
    margin-inline: -10px;
    padding: 12px 12px 11px;
    border-radius: 16px;
  }
}