:root{
  --ink:#1c1a17;            /* near-black warm */
  --ink-soft:#5b554c;
  --cream:#faf6ee;          /* page background */
  --paper:#ffffff;
  --line:#e9e0cf;           /* warm hairline */
  --gold:#b8860b;
  --gold-deep:#946c08;
  --gold-soft:#f3e7c6;
  --navy:#1f2a44;           /* deep accent */
  --navy-soft:#33425f;
  --shadow:0 1px 2px rgba(28,26,23,.06), 0 8px 24px rgba(28,26,23,.06);
  --radius:16px;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px; width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,.display{font-family:"Frank Ruhl Libre",Georgia,"Times New Roman",serif}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,#fffdf8, #fbf5ea);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.1);
}
.header-inner{display:flex; align-items:center; gap:16px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{
  font-size:26px; color:var(--gold); line-height:1;
  width:44px; height:44px; display:grid; place-items:center;
  border:1.5px solid var(--gold-soft); border-radius:12px;
  background:radial-gradient(circle at 30% 25%, #fff, #fbf2d8);
  box-shadow:var(--shadow); flex:none;
}
.brand-photo{
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid var(--gold-soft); box-shadow:var(--shadow);
}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-title{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:1.18rem; letter-spacing:.2px; line-height:1.1}
.brand-sub{font-size:.74rem; color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase}
.search{
  position:relative; margin-left:auto; flex:1 1 260px; max-width:440px; min-width:200px;
  display:flex; align-items:center;
}
.search-ico{position:absolute; left:14px; opacity:.45; font-size:.9rem; pointer-events:none}
#search{
  width:100%; padding:11px 38px 11px 38px; border:1px solid var(--line);
  border-radius:999px; background:var(--paper); font-size:.95rem; color:var(--ink);
  box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s;
}
#search:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
#search-clear{
  position:absolute; right:8px; border:none; background:transparent; cursor:pointer;
  font-size:1.3rem; line-height:1; color:var(--ink-soft); padding:4px 8px; border-radius:50%;
}
#search-clear:hover{color:var(--ink)}

.topnav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.navlink{
  font-size:.86rem; font-weight:600; color:var(--navy); padding:9px 14px;
  border:1px solid var(--line); border-radius:999px; background:var(--paper);
  box-shadow:var(--shadow); white-space:nowrap; transition:border-color .15s, color .15s;
}
.navlink:hover{border-color:var(--gold); color:var(--gold-deep)}

/* ---------- this week's parsha spotlight ---------- */
.spotlight{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:8px 0 6px; padding:16px 20px; border-radius:var(--radius);
  background:linear-gradient(100deg,#fff8e8,#fdf3df);
  border:1px solid var(--gold-soft); box-shadow:var(--shadow);
  position:relative; overflow:hidden; transition:transform .15s, box-shadow .15s;
}
.spotlight::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--gold)}
.spotlight:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(184,134,11,.16)}
.spotlight .sl-tag{font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep)}
.spotlight .sl-name{font-family:"Frank Ruhl Libre",serif; font-weight:900; font-size:1.5rem; color:var(--ink); margin-left:2px}
.spotlight .sl-go{margin-left:auto; font-weight:600; color:var(--gold-deep); font-size:.9rem}

/* ---------- breadcrumbs ---------- */
.crumbs-bar{background:var(--paper); border-bottom:1px solid var(--line)}
.crumbs{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:11px 0; font-size:.86rem}
.crumbs li{display:flex; align-items:center; gap:6px; color:var(--ink-soft)}
.crumbs li a:hover{color:var(--gold-deep); text-decoration:underline}
.crumbs li.here{color:var(--ink); font-weight:600}
.crumbs .sep{opacity:.4}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; text-align:center; padding:64px 18px 26px; margin:0 -18px 8px; border-radius:0 0 var(--radius) var(--radius)}
.hero-bg{position:absolute; inset:-12px; z-index:0;
  background:url("torah-shelf.jpg") center 28% / cover no-repeat;
  filter:blur(2.5px) saturate(1); opacity:.5; transform:scale(1.05);}
.hero-veil{position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(250,246,238,.42), rgba(250,246,238,.62) 62%, var(--cream));}
.hero > h1, .hero > p, .hero > .rule{position:relative; z-index:1}
.hero h1{font-size:clamp(1.9rem,5vw,3rem); font-weight:900; margin:0 0 10px; letter-spacing:.3px; text-shadow:0 1px 0 rgba(255,255,255,.7)}
.hero h1 .accent{color:var(--gold-deep)}
.hero p{max-width:640px; margin:0 auto; color:var(--ink-soft); font-size:1.02rem}
.hero .rule{width:72px; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:18px auto 0; border-radius:3px}

.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:30px 0 14px}
.section-head h2{font-size:1.5rem; margin:0; font-weight:700}
.section-head .count{font-size:.82rem; color:var(--ink-soft)}

/* ---------- category cards (home) ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; padding:8px 0 10px}
.card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px 20px; box-shadow:var(--shadow); cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
  overflow:hidden;
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(28,26,23,.12); border-color:var(--gold-soft)}
.card .ico{
  width:50px; height:50px; border-radius:13px; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold-deep); font-size:1.5rem; flex:none;
}
.card h3{margin:0; font-size:1.35rem; font-weight:700}
.card p{margin:0; color:var(--ink-soft); font-size:.92rem}
.card .meta{margin-top:auto; padding-top:8px; font-size:.8rem; color:var(--gold-deep); font-weight:600; letter-spacing:.03em}

/* ---------- unit chips (category view) ---------- */
.group{margin:6px 0 26px}
.group h3{
  font-size:1.04rem; font-weight:700; color:var(--navy); margin:0 0 12px;
  padding-bottom:8px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;
}
.group h3 .tag{font-size:.7rem; font-family:"Inter",sans-serif; font-weight:600; color:var(--gold-deep);
  background:var(--gold-soft); padding:3px 9px; border-radius:999px; letter-spacing:.04em}
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; cursor:pointer; transition:border-color .15s, transform .1s, box-shadow .15s;
}
.chip:hover{border-color:var(--gold); transform:translateY(-1px); box-shadow:var(--shadow)}
.chip .name{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.04rem}
.chip .n{font-size:.74rem; color:var(--ink-soft); background:var(--cream); border-radius:999px; padding:2px 8px; flex:none}
.chip.empty{opacity:.5; cursor:default} .chip.empty:hover{transform:none; border-color:var(--line); box-shadow:none}

/* ---------- shiur list ---------- */
.unit-head{padding:26px 0 6px}
.unit-head h1{font-size:clamp(1.6rem,4vw,2.3rem); margin:0; font-weight:900}
.unit-head .sub{color:var(--ink-soft); margin-top:4px}
.shiur-list{display:flex; flex-direction:column; gap:12px; padding:14px 0 30px}
.shiur{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:15px 16px; box-shadow:var(--shadow);
}
.shiur-top{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap}
.year-badge{
  font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:.92rem; color:var(--gold-deep);
  background:var(--gold-soft); border-radius:10px; padding:6px 11px; flex:none; min-width:58px; text-align:center;
}
.year-badge small{display:block; font-family:"Inter",sans-serif; font-weight:600; font-size:.6rem; color:var(--ink-soft); letter-spacing:.05em; text-transform:uppercase}
.shiur-meta{min-width:0; flex:1 1 240px}
.shiur-meta .title{font-family:"Frank Ruhl Libre",serif; font-weight:700; font-size:1.12rem; line-height:1.25}
.shiur-meta .desc{color:var(--ink-soft); font-size:.92rem; margin-top:2px}
.shiur-meta .ctx{font-size:.74rem; color:var(--gold-deep); margin-top:4px; letter-spacing:.02em}
.shiur audio{width:100%; margin-top:12px; height:38px}
.shiur-actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.btn{
  font-size:.82rem; font-weight:600; color:var(--navy); background:var(--paper);
  border:1px solid var(--line); border-radius:9px; padding:7px 13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:border-color .15s, background .15s;
}
.btn:hover{border-color:var(--gold); background:var(--cream)}
.btn.gold{background:var(--gold); color:#fff; border-color:var(--gold-deep)}
.btn.gold:hover{background:var(--gold-deep)}
.btn.fav-btn.on{background:var(--gold-soft); border-color:var(--gold); color:var(--gold-deep)}
[data-act="speed"]{min-width:48px; font-variant-numeric:tabular-nums}
.shiur.flash{animation:flash 2s ease}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--gold)} 100%{box-shadow:var(--shadow)}}
.wma-note{font-size:.78rem; color:var(--ink-soft); margin-top:10px; padding:9px 12px; background:var(--cream); border:1px dashed var(--line); border-radius:9px}

/* ---------- search results ---------- */
.results-head{padding:24px 0 4px}
.results-head h1{font-size:1.7rem; margin:0; font-weight:800}
.results-head .sub{color:var(--ink-soft); margin-top:4px}
.empty-state{text-align:center; color:var(--ink-soft); padding:60px 20px}
.empty-state .big{font-size:2.4rem; display:block; margin-bottom:10px; opacity:.4}

mark{background:var(--gold-soft); color:var(--ink); padding:0 2px; border-radius:3px}

/* ---------- footer ---------- */
.site-footer{margin-top:30px; border-top:1px solid var(--line); background:#fbf5ea}
.site-footer .wrap{padding-top:22px; padding-bottom:30px}
.site-footer p{margin:0 0 6px; font-size:.82rem; color:var(--ink-soft)}
.site-footer .dedication{font-family:"Frank Ruhl Libre",serif; font-style:italic; color:var(--navy-soft)}
.sponsor-cta{
  display:inline-block; margin:4px 0 12px; padding:13px 26px;
  background:var(--gold); color:#fff; font-weight:600; font-size:1rem;
  border-radius:999px; border:1px solid var(--gold-deep); box-shadow:var(--shadow);
  transition:background .15s, transform .12s;
}
.sponsor-cta:hover{background:var(--gold-deep); transform:translateY(-1px)}

/* loading skeleton */
.loading{display:grid; place-items:center; padding:80px 0; color:var(--ink-soft)}
.spinner{width:34px; height:34px; border:3px solid var(--gold-soft); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:560px){
  .header-inner{gap:10px}
  .brand-sub{display:none}
  .topnav{order:2; width:100%; justify-content:center; gap:6px}
  .topnav .navlink{font-size:.74rem; padding:7px 11px; flex:0 1 auto}
  .search{flex-basis:100%; max-width:none; order:3}
  .hero{padding:30px 0 4px}
}

/* ---- spoken-word search: topic chips + find-in-recording ---- */
.topics{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.topic{
  font-family:inherit; cursor:pointer;
  font-size:.72rem; font-weight:600; color:var(--gold-deep);
  background:var(--gold-soft); border:1px solid transparent; border-radius:999px;
  padding:3px 10px; line-height:1.3; transition:background .15s, border-color .15s;
}
.topic:hover{background:#fff; border-color:var(--gold)}
.find-result{margin:2px 0 10px}
.find-hit{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:var(--gold-soft); border:1px solid var(--gold-soft);
  border-left:4px solid var(--gold); border-radius:10px; padding:10px 14px;
}
.find-hit .quote{font-family:"Frank Ruhl Libre",serif; font-size:1rem; color:var(--ink); flex:1 1 240px}
.find-hit .at{font-weight:600; color:var(--gold-deep); font-size:.85rem}
.find-none{font-size:.85rem; color:var(--ink-soft); padding:6px 2px}

/* ---- weekly dedication inside the spotlight bar ---- */
.spotlight .sl-ded{
  flex-basis:100%; width:100%; margin-top:6px; padding-top:8px;
  border-top:1px solid var(--gold-soft);
  font-family:"Frank Ruhl Libre",serif; font-style:italic; font-weight:700;
  font-size:.92rem; color:var(--gold-deep); line-height:1.35;
}
.spotlight .sl-ded .sl-ded-tag{
  font-family:"Inter",sans-serif; font-style:normal; font-weight:700;
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-deep); margin-right:8px;
}
@media (max-width:560px){
  .spotlight .sl-ded{font-size:.84rem}
}