/* נרטיב — אתר דמו בדיוני */
:root {
  --paper: #f2eee4; --ink: #12110e; --yellow: #ffd400; --muted: #55514a; --faint: #8a8471;
  --card: #fffdf7; --font: "Heebo", "Segoe UI", Arial, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-color:#12110e #d9d2bf; scrollbar-width:thin; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  background:var(--paper); color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.6; transition:opacity .14s ease-out;
}
body.leaving { opacity:0; }
@media (prefers-reduced-motion: reduce) { body { transition:none; } body.leaving { opacity:1; } }
img, video { max-width:100%; display:block; }
a { color:var(--ink); }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; border-radius:3px; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:#d9d2bf; }
::-webkit-scrollbar-thumb { background:var(--ink); border-radius:0; }
::-webkit-scrollbar-thumb:hover { background:#3a382f; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-60px; right:16px; z-index:200; background:var(--ink); color:var(--yellow);
  padding:10px 20px; font-weight:800; text-decoration:none; transition:top .15s; }
.skip-link:focus { top:12px; }

.site-header {
  display:flex; align-items:center; gap:38px; padding:22px 48px;
  border-bottom:2.5px solid var(--ink); background:var(--paper);
  position:sticky; top:0; z-index:100;
}
.logo { font-size:30px; font-weight:900; text-decoration:none; display:flex; align-items:center; gap:10px; }
.logo .sq { width:18px; height:18px; background:var(--yellow); display:inline-block; }
.main-nav ul { display:flex; gap:26px; list-style:none; }
.main-nav a { color:var(--muted); text-decoration:none; font-size:16.5px; font-weight:600; padding:4px 2px; }
.main-nav a:hover { color:var(--ink); }
.main-nav a[aria-current="page"] { color:var(--ink); background:var(--yellow); padding:4px 12px; }
.header-actions { margin-inline-start:auto; display:flex; align-items:center; gap:18px; }
.cta-nav { background:var(--ink); color:var(--paper); padding:11px 26px; font-size:16px; font-weight:800;
  text-decoration:none; border:none; cursor:pointer; font-family:var(--font); }
.cta-nav:hover { background:#2c2a24; }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger svg, .icon-btn svg { width:24px; height:24px; }
.icon-btn { background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); }
@media (max-width: 800px) {
  .site-header { padding:14px 20px; gap:14px; }
  .hamburger { display:block; }
  .main-nav { position:fixed; inset:0; background:var(--paper); z-index:150; display:none;
    align-items:center; justify-content:center; }
  .main-nav.open { display:flex; }
  .main-nav ul { flex-direction:column; gap:6px; text-align:center; }
  .main-nav a { font-size:26px; display:block; padding:12px; }
  .nav-close { position:absolute; top:14px; left:20px; display:block; }
  .cta-nav { display:none; }
}
.nav-close { display:none; }

/* הירו */
.hero { display:flex; gap:56px; padding:56px 48px 40px; align-items:flex-start; }
.hero-text { flex:1.1; padding-top:20px; }
.eyebrow { display:inline-block; font-size:14.5px; font-weight:900; letter-spacing:3px;
  border:2px solid var(--ink); padding:6px 14px; margin-bottom:26px; }
.hero h1 { font-size:clamp(48px,6.4vw,84px); font-weight:900; line-height:1.02; margin-bottom:22px; }
.hero h1 .hl { background:var(--yellow); padding:0 14px; display:inline-block; transform:rotate(-1.2deg); }
.hero .sub { font-size:19px; color:var(--muted); max-width:520px; margin-bottom:32px; font-weight:500; }
.hero-ctas { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.btn-main { background:var(--ink); color:var(--yellow); font-size:18px; font-weight:900; padding:16px 36px;
  text-decoration:none; box-shadow:7px 7px 0 var(--yellow); border:2px solid var(--ink); display:inline-block; }
.btn-main:hover { transform:translate(2px,2px); box-shadow:5px 5px 0 var(--yellow); }
.btn-text { font-size:17px; font-weight:800; border-bottom:3px solid var(--yellow); padding-bottom:4px; text-decoration:none; }
.hero-stats { display:flex; gap:40px; margin-top:44px; border-top:2.5px solid var(--ink); padding-top:18px; }
.hero-stats b { display:block; font-size:32px; font-weight:900; }
.hero-stats span { font-size:14.5px; color:var(--muted); font-weight:700; }

/* חיפוש גדול */
.bigsearch { display:flex; align-items:center; gap:12px; background:var(--card);
  border:2px solid var(--ink); padding:6px 6px 6px 20px; margin-top:30px; box-shadow:7px 7px 0 var(--ink); }
.bigsearch svg { width:22px; height:22px; color:var(--faint); flex:none; }
.bigsearch input { flex:1; border:none; background:none; font-family:var(--font); font-size:18px; padding:12px 0; color:var(--ink); }
.bigsearch input:focus { outline:none; }
.bigsearch button { background:var(--yellow); border:2px solid var(--ink); font-family:var(--font);
  font-size:16.5px; font-weight:900; padding:11px 26px; cursor:pointer; }
.search-results { margin-top:18px; }
.search-results .results-count { font-size:15px; color:var(--muted); font-weight:700; margin-bottom:10px; }
.search-results ul { list-style:none; }
.search-results li a { display:flex; gap:12px; padding:10px 6px; text-decoration:none; font-weight:700;
  border-bottom:1.5px solid #d9d2bf; align-items:baseline; }
.search-results li a:hover { background:#eae4d2; }
.search-results li a small { color:var(--faint); font-weight:600; }

/* פלייר שיעור */
.lesson-player { flex:1; background:var(--ink); color:var(--paper); box-shadow:10px 10px 0 var(--yellow); }
.screen { position:relative; aspect-ratio:16/9; background:#000; }
.screen video { width:100%; height:100%; }
.screen .rec { position:absolute; top:14px; right:14px; display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; letter-spacing:1px; background:rgba(0,0,0,.5); padding:4px 10px; }
.screen .rec i { width:10px; height:10px; border-radius:50%; background:#ff3b30; display:inline-block; }
.screen .bigplay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:78px; height:78px;
  border-radius:50%; background:var(--yellow); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.screen .bigplay::after { content:""; border-top:14px solid transparent; border-bottom:14px solid transparent;
  border-left:21px solid var(--ink); margin-left:-3px; }
.screen .bigplay:hover { transform:translate(-50%,-50%) scale(1.06); }
.screen .dur { position:absolute; bottom:12px; left:14px; font-size:13.5px; font-weight:800;
  background:rgba(0,0,0,.6); padding:4px 10px; font-variant-numeric:tabular-nums; }
.pbody { padding:20px 24px 24px; }
.pbody .cat { color:var(--yellow); font-size:13px; font-weight:900; letter-spacing:2px; margin-bottom:8px; }
.pbody h3 { font-size:23px; font-weight:900; margin-bottom:14px; }
.prog { height:8px; background:#33312b; position:relative; margin-bottom:18px; cursor:pointer; }
.prog .fill { position:absolute; top:0; bottom:0; right:0; width:0; background:var(--yellow); }
.prog .tick { position:absolute; top:-3px; width:2px; height:14px; background:#7a766b; }
.transcript h4, .pbody .tlabel { font-size:12.5px; color:#8a8471; font-weight:800; letter-spacing:1px; margin-bottom:8px; }
.transcript .line { font-size:15.5px; padding:7px 12px; color:#9d988b; font-weight:600; display:flex; gap:12px;
  border:none; background:none; width:100%; text-align:start; font-family:var(--font); cursor:pointer; align-items:baseline; }
.transcript .line b { color:#6b675e; font-weight:700; font-size:12.5px; min-width:44px; font-variant-numeric:tabular-nums; }
.transcript .line.on { background:var(--yellow); color:var(--ink); font-weight:800; }
.transcript .line.on b { color:var(--ink); }
.transcript .line:hover { background:#2a2822; color:var(--paper); }
.transcript .line.on:hover { background:var(--yellow); color:var(--ink); }

/* טיקר */
.ticker { margin-top:40px; background:var(--ink); padding:13px 0; overflow:hidden; transform:rotate(-.5deg);
  border-block:2px solid var(--ink); }
.ticker-inner { display:flex; gap:0; width:max-content; animation:tick 26s linear infinite; }
.ticker-inner span { color:var(--yellow); font-size:18px; font-weight:900; letter-spacing:1px;
  padding:0 24px; white-space:nowrap; }
.ticker-inner span i { font-style:normal; color:var(--paper); padding-right:24px; }
@keyframes tick { from { transform:translateX(0); } to { transform:translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-inner { animation:none; } }

/* אינדקס קורסים */
.course-index { display:grid; grid-template-columns:repeat(4,1fr); gap:34px; padding:44px 48px 20px; }
.course-item { border-top:2.5px solid var(--ink); padding-top:16px; text-decoration:none; display:block; }
.course-item .n { font-size:15px; font-weight:900; background:var(--ink); color:var(--yellow);
  display:inline-block; padding:3px 10px; margin-bottom:12px; }
.course-item h4 { font-size:22px; font-weight:900; margin-bottom:6px; }
.course-item p { font-size:15px; color:var(--muted); font-weight:600; }
.course-item:hover h4 { background:var(--yellow); display:inline; }
@media (max-width: 1000px) { .course-index { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 800px) {
  .hero { flex-direction:column; padding:36px 20px 30px; }
  .course-index { grid-template-columns:1fr; padding:32px 20px 10px; gap:20px; }
  .bigsearch { flex-wrap:wrap; }
  .bigsearch button { width:100%; }
}

/* עמוד קורס */
.course-wrap { padding:48px; max-width:1160px; margin:0 auto; }
.back-link { display:inline-block; margin-bottom:22px; font-weight:800; text-decoration:none; color:var(--muted); }
.back-link:hover { color:var(--ink); }
.course-head { display:flex; gap:40px; align-items:flex-start; margin-bottom:40px; flex-wrap:wrap; }
.course-head .meta { flex:1; min-width:280px; }
.course-head h1 { font-size:clamp(34px,5vw,52px); font-weight:900; margin:14px 0 12px; }
.course-head .num { font-size:16px; font-weight:900; background:var(--ink); color:var(--yellow); padding:4px 12px; }
.course-head .cat { font-weight:800; color:var(--muted); letter-spacing:1.5px; font-size:14.5px; margin-inline-start:14px; }
.course-head .desc { font-size:18px; color:var(--muted); max-width:560px; margin-bottom:20px; }
.course-head .stats { font-weight:700; font-size:15.5px; color:var(--faint); }
.lessons { list-style:none; display:flex; flex-direction:column; gap:0; border-top:2.5px solid var(--ink); margin-top:10px; }
.lessons li a { display:flex; gap:18px; align-items:baseline; padding:18px 10px; text-decoration:none;
  border-bottom:1.5px solid #d9d2bf; font-size:18px; font-weight:700; }
.lessons li a:hover { background:#eae4d2; }
.lessons li a.current { background:var(--yellow); }
.lessons .ln { font-weight:900; color:var(--faint); min-width:30px; }
.lessons .ld { margin-inline-start:auto; color:var(--muted); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.player-section { margin:26px 0 34px; }

/* פוטר ודיאלוגים */
.site-footer { border-top:2.5px solid var(--ink); padding:36px 48px; margin-top:50px;
  display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start; }
.footer-note { max-width:580px; color:var(--muted); font-size:15.5px; }
.footer-note strong { color:var(--ink); }
.footer-links { display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a, .footer-links button { background:none; border:none; cursor:pointer; color:var(--muted);
  font-family:var(--font); font-size:15.5px; text-decoration:none; padding:0; font-weight:600; }
.footer-links a:hover, .footer-links button:hover { color:var(--ink); }
dialog { background:var(--card); color:var(--ink); border:2.5px solid var(--ink);
  box-shadow:8px 8px 0 var(--yellow); padding:34px; max-width:640px; width:calc(100% - 48px); font-family:var(--font); }
dialog::backdrop { background:rgba(18,17,14,.6); }
dialog h2 { font-size:24px; font-weight:900; margin-bottom:14px; }
dialog p { color:var(--muted); margin-bottom:12px; font-size:16px; }
dialog .close-dialog { position:absolute; top:12px; left:12px; background:none; border:none; color:var(--ink);
  font-size:22px; cursor:pointer; padding:6px 10px; }
.credit-list { margin:14px 0; padding-inline-start:20px; color:var(--muted); }
.credit-list li { margin-bottom:8px; font-size:15.5px; }
@media (max-width: 800px) { .course-wrap { padding:30px 20px; } .site-footer { padding:30px 20px; } }