/* הבנתי! — the podcast area of amsalem.co. Same cream paper and navy ink as the main site,
   plus the series' own marks from the logo: navy #092845, orange #EA7414, Rubik 900 and the orange underline. */
:root{
  --paper:#FFFDF8; --card:#FFFFFF; --ink:#092845; --muted:#5B6B80; --line:#E6E1D6; --soft:#F4F1EA;
  --mark:#EA7414; --teal:#A84F0A; --teal-soft:#FDEEE2; --blue:#2D5277; --blue-soft:#E6EDF4;
  --display:"Rubik","Heebo",Arial,sans-serif; --body:"Rubik","Heebo",system-ui,Arial,sans-serif;
  --panel:#092845; --panel-2:#12406B; --on-panel-muted:#C9D3DF; --mark-light:#F4914A; --lead:#26405c; --top-bg:rgba(255,253,248,.94);
  --glow:0 0 0 1px rgba(234,116,20,.30),0 12px 30px -12px rgba(234,116,20,.45);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#06182A; --card:#0D2A46; --ink:#F3F1EC; --muted:#A9B6C7; --line:#1D3B5A; --soft:#0A2238;
  --teal:#F4914A; --teal-soft:#3A2A22; --blue:#A9C4E0; --blue-soft:#183A5C; --panel:#0E2F50; --panel-2:#174A78;
  --lead:#C9D3DF; --top-bg:rgba(6,24,42,.88); --glow:0 0 0 1px rgba(244,145,74,.45),0 0 40px -8px rgba(234,116,20,.55);
  color-scheme:dark;
}
:root[data-theme="dark"] body{background:radial-gradient(120% 60% at 85% -10%,#0E2F50 0,var(--paper) 55%) no-repeat,var(--paper)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;direction:rtl;text-align:start;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--teal)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5.4vw,60px)}
h2{font-size:clamp(26px,3.2vw,36px)}
mark{background:linear-gradient(transparent 68%,var(--mark) 68%,var(--mark) 94%,transparent 94%);color:inherit;padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.eyebrow{font-weight:700;font-size:14px;letter-spacing:.05em;color:var(--teal);margin:0 0 10px}
.sub{color:var(--muted);margin:6px 0 0}
.small{font-size:14px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 16px/1 var(--body);padding:13px 20px;border-radius:999px;border:2px solid var(--ink);background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{box-shadow:var(--glow)}
.btn.on{background:var(--teal);border-color:var(--teal);color:#fff}
/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--top-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.logo{display:block;height:46px;width:auto}
.logo mark{padding:0 .08em}
.by{font-size:14px;color:var(--muted)}
.nav{display:flex;gap:18px;font-size:15px;align-items:center}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav .home{color:var(--muted)}
@media (max-width:900px){.nav a:not(.all-l){display:none}.by{display:none}}
/* hero */
.hero{padding-block:56px 40px}
.hero-in{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:end}
.hero-txt>*+*{margin-top:18px}
.lead{font-size:20px;color:var(--lead);max-width:36em;margin:0}
.hero-host{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
.hero-host img{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--soft)}
.hero-host div{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.hero-host b{font:900 22px/1.1 var(--display)}
@media (max-width:820px){.hero-in{grid-template-columns:1fr}}
/* how */
.how{border-block:1px solid var(--line);background:var(--card)}
.how-in{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.how-in>div{padding:26px 24px;display:flex;flex-direction:column;gap:2px}
.how-in>div+div{border-inline-start:1px solid var(--line)}
.how .big{font:900 52px/1 var(--display);color:var(--teal);font-variant-numeric:tabular-nums}
.how b{font-size:18px}
.how span:last-child{color:var(--muted);font-size:15px}
@media (max-width:760px){.how-in{grid-template-columns:1fr}.how-in>div+div{border-inline-start:0;border-top:1px solid var(--line)}}
/* latest */
.latest-wrap{padding-block:48px 8px}
.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.latest{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);text-decoration:none;min-width:0}
.latest:hover{border-color:var(--ink)}
.latest .num{font-weight:700;color:var(--teal);font-size:14px}
.latest b{font:900 21px/1.25 var(--display)}
.latest span:last-child{color:var(--muted);font-size:15px}
@media (max-width:860px){.latest-grid{grid-template-columns:1fr}}
/* start path */
.start{padding-block:48px}
.path{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:s}
.path a{display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500;height:100%;line-height:1.35}
.path a:hover{border-color:var(--ink)}
.path a.off{color:var(--muted);pointer-events:none;background:transparent;border-style:dashed}
.path .num{font:900 22px/1 var(--display);color:var(--teal);min-width:1.6em}
@media (max-width:900px){.path{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.path{grid-template-columns:1fr}}
/* all episodes */
.all{padding-block:40px 56px;background:var(--card);border-block:1px solid var(--line)}
.all-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 8px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);background:var(--card);padding-block:10px;z-index:5}
.filters input[type=search],.filters select{font:16px var(--body);padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.f-q{flex:1 1 260px}
.f-q input{width:100%}
.seg{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{font:500 15px var(--body);border:0;background:var(--paper);padding:10px 14px;cursor:pointer;color:var(--ink)}
.seg button+button{border-inline-start:1px solid var(--line)}
.seg button.on{background:var(--ink);color:var(--paper)}
.chk{display:flex;gap:6px;align-items:center;font-size:15px;cursor:pointer}
.chk input{accent-color:var(--teal);width:18px;height:18px}
.none{padding:18px;background:var(--soft);border-radius:12px}
.part{margin-top:30px}
.part h3{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:24px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.part h3 span{font:700 14px var(--body);color:var(--teal)}
.part h3 small{font:400 14px var(--body);color:var(--muted);margin-inline-start:auto}
.eps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px}
.ep>a,.ep>div{display:grid;grid-template-columns:2.6em 1fr auto;gap:10px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;min-width:0}
.ep>a:hover .t{text-decoration:underline}
.ep.soon .t{color:var(--muted)}
.ep .num{font:900 18px/1 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.ep .t{line-height:1.4;min-width:0}
.ep .meta{display:flex;gap:6px}
.lvl,.pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.lvl.l1{background:var(--teal-soft);color:var(--teal)}.lvl.l2{background:var(--blue-soft);color:var(--blue)}.lvl.l3{background:var(--panel);color:#fff}
.pill{background:var(--soft);color:var(--muted)}
.pill.live{background:var(--mark);color:var(--ink)}
@media (max-width:760px){.eps{grid-template-columns:1fr}.ep .lvl{display:none}}
/* ask */
.ask{padding-block:48px}
.ask-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:radial-gradient(130% 140% at 85% -20%,var(--panel-2) 0,var(--panel) 62%);color:#fff;border-radius:20px;padding:28px 32px;box-shadow:var(--glow);position:relative;overflow:hidden}
.ask p{margin:6px 0 0;color:#C9D3DF}
.ask .btn.primary{background:var(--mark);color:#092845;border-color:var(--mark)}
/* episode page */
.episode{padding-bottom:40px}
.ep-head{padding-block:36px 20px;max-width:880px;margin-inline:auto}
.crumbs{font-size:14px;margin:0 0 14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.answer{margin:22px 0 0;font-size:20px;line-height:1.6;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.answer span{display:block;font:700 13px var(--body);letter-spacing:.05em;color:var(--teal);margin-bottom:4px}
.media{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.video,.deck iframe{aspect-ratio:16/9;width:100%;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.video{overflow:hidden;display:grid;place-items:center}
.video iframe{width:100%;height:100%;border:0}
.video.soon span{color:#C9D3DF;text-align:center;padding:20px;line-height:1.6}
.deck{display:flex;flex-direction:column;gap:8px;min-width:0}
.deck-bar{display:flex;justify-content:space-between;font-size:14px}
.deck iframe{background:var(--card)}
.media.solo{grid-template-columns:1fr;max-width:960px}
@media (max-width:900px){.media{grid-template-columns:1fr}}
.ep-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;margin-top:36px;align-items:start}
@media (max-width:900px){.ep-grid{grid-template-columns:1fr}}
.prose{max-width:68ch}
.prose h2{font-size:28px;margin:34px 0 10px}
.prose p{margin:0 0 14px}
.prose ul{padding-inline-start:22px}
.prose blockquote{margin:0 0 18px;background:var(--soft);border-radius:12px;padding:12px 18px;font-size:16px}
.prose blockquote p{margin:0}
.prose strong{font-weight:700}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:80px}
.side>*{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.lbl{display:block;font:700 13px var(--body);letter-spacing:.04em;color:var(--teal);margin-bottom:6px}
.step{border:0!important;background:radial-gradient(120% 140% at 90% -20%,var(--panel-2) 0,var(--panel) 65%)!important;color:#fff;box-shadow:var(--glow)}.step .lbl{color:var(--mark)}.step .done-msg{color:var(--mark)}.step .btn.primary{background:var(--mark);border-color:var(--mark);color:#092845}
.step p{margin:0 0 12px;font-size:18px;line-height:1.5}
.done-msg{color:var(--teal);font-weight:700;margin:10px 0 0!important;font-size:16px!important}
.savecard{margin:0;background:var(--panel)!important;color:#fff;border-color:var(--panel)!important;box-shadow:var(--glow)}
.savecard figcaption{font:900 22px/1.2 var(--display);margin-bottom:8px}
.savecard ul{margin:0 0 12px;padding-inline-start:18px;font-size:15px;line-height:1.55}
.sc-brand{font-size:12px;color:var(--mark)}
.cta b{font:900 21px var(--display)}
.cta p{margin:4px 0 12px;color:var(--muted);font-size:15px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.pn a{display:flex;flex-direction:column;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:500;line-height:1.4}
.pn a:hover{border-color:var(--ink)}
.pn small{color:var(--teal);font-weight:700}
.pn .next{text-align:left}
/* footer */
.foot{border-top:1px solid var(--line);padding-block:32px 40px;margin-top:20px}
.foot-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.foot-cta b{display:block;font:900 22px var(--display)}
.foot-cta span{color:var(--muted)}
.disc{font-size:13px;color:var(--muted);margin:18px 0 6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.top .brand .by{display:none}

/* amsalem.co layer: theme toggle, glowing rule, logo per theme */
.tgl{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;padding:0;transition:border-color .2s,box-shadow .2s}
.tgl:hover{border-color:var(--mark);box-shadow:var(--glow)}
.tgl svg{width:19px;height:19px}
.tgl .sun{display:none}
:root[data-theme="dark"] .tgl .sun{display:block}
:root[data-theme="dark"] .tgl .moon{display:none}
.logo.on-dark{display:none}
:root[data-theme="dark"] .logo.on-light{display:none}
:root[data-theme="dark"] .logo.on-dark{display:block}
.ask-in::after,.step::after{content:"";position:absolute;inset-inline:6%;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--mark-light),var(--mark),var(--mark-light),transparent);box-shadow:0 0 12px rgba(234,116,20,.7)}
.step{position:relative;overflow:hidden}
:root[data-theme="dark"] .ask p,:root[data-theme="dark"] .video.soon span{color:#C9D3DF}
/* booking at the end of every episode page */
.meet-end{margin-block:48px 8px}
.me-in{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:32px;border-radius:24px;background:radial-gradient(120% 140% at 90% -20%,var(--panel-2) 0,var(--panel) 60%);color:#fff;box-shadow:var(--glow);position:relative;overflow:hidden}
.me-in::after{content:"";position:absolute;inset-inline:6%;bottom:0;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--mark-light),var(--mark),var(--mark-light),transparent);box-shadow:0 0 16px rgba(234,116,20,.75)}
.me-txt{display:flex;flex-direction:column;gap:10px}
.me-txt .eyebrow{color:var(--mark-light);margin:0}
.me-txt h2{margin:0;font:900 clamp(24px,3.2vw,34px)/1.2 var(--display);color:#fff}
.me-txt p{margin:0;color:#C9D3DF;max-width:56ch}
.me-txt .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.me-txt .btn:not(.primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.me-qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:18px;background:#fff;box-shadow:0 0 0 3px rgba(234,116,20,.55)}
.me-qr .qr{width:150px;height:150px;display:block}
.me-qr figcaption{font:700 13px/1 var(--body);color:#092845}
@media (max-width:720px){.me-in{grid-template-columns:1fr}.me-qr{display:none}}
.side .cta .row{display:flex;gap:8px;flex-wrap:wrap}
.lt-cover{display:block;width:calc(100% + 40px);max-width:none;margin:-20px -20px 8px;aspect-ratio:16/9;object-fit:cover;border-radius:16px 16px 0 0;border-bottom:1px solid var(--line)}
.meet-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(9,40,69,.55);backdrop-filter:blur(3px)}
.meet-modal[hidden],.mm-form[hidden],.mm-done[hidden],.mm-err[hidden]{display:none}
.mm-box{position:relative;background:var(--card);color:var(--ink);border-radius:20px;padding:28px;max-width:420px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.mm-box h3{margin:0;font:900 22px/1.2 var(--display)}
.mm-s{margin:6px 0 0;font-size:14px;color:var(--muted)}
.mm-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.mm-form input{font:inherit;font-size:16px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);text-align:right}
.mm-form input:focus{outline:none;border-color:var(--mark)}
.mm-err{margin:0;background:#fef2f2;color:#b91c1c;padding:8px 12px;border-radius:8px;font-size:13px}
.mm-done{margin:16px 0 0}
.mm-x{position:absolute;top:10px;left:12px;border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.me-txt h2 mark{color:#fff}
.me-txt .btn.primary,.mm-box .mm-go{background:var(--mark);border-color:var(--mark);color:#092845;box-shadow:0 0 0 4px rgba(234,116,20,.22),0 0 24px rgba(234,116,20,.45)}

/* live logo (topbar, and the big one in the hub): "הבנתי" in Rubik 900 + the "!" speech bubble.
   The dot winks (scaleY, like an eyelid) and the bubble hops. Never rotated, never recoloured. */
:root{--logo-ink:#092845}
:root[data-theme="dark"]{--logo-ink:#FFFFFF}
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none;color:var(--logo-ink);line-height:1;padding:4px 2px;border-radius:10px}
.lg{display:inline-flex;align-items:flex-end;gap:.05em;font-size:31px;line-height:1}
.lg-word{font:900 1em/.82 var(--display);color:var(--logo-ink);letter-spacing:-.005em;padding-top:.06em}
.lg-bang{display:block;height:1.02em;width:auto;overflow:visible;transform-box:fill-box;transform-origin:50% 100%;margin-bottom:-.02em}
.lg-bub,.lg-dot{fill:#EA7414}
.lg-dot{transform-box:fill-box;transform-origin:50% 50%}
.lg.is-wink .lg-dot{animation:lg-blink .46s ease-in-out}
.lg.is-wink .lg-bang{animation:lg-hop .56s cubic-bezier(.3,1.5,.5,1)}
@keyframes lg-blink{0%,100%{transform:scale(1,1)}30%,58%{transform:scale(1.18,.12)}}
@keyframes lg-hop{0%,100%{transform:translateY(0)}38%{transform:translateY(-12%)}72%{transform:translateY(1.5%) scale(1.03,.97)}}
.lg-by{font:500 12px/1 var(--body);color:var(--logo-ink);opacity:.85;padding-inline-start:.4em}
.brand:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lg *,.lg{animation:none!important;translate:none!important}}
/* "מה שלא מספרים לך": the section of the article, framed in orange */
.prose .untold{position:relative;margin:34px 0 22px;padding:22px 22px 6px;border:2px solid var(--mark);border-radius:16px;background:var(--card)}
.prose .untold h2{margin-top:6px}
.untold-tag{display:inline-block;font:700 13px var(--body);letter-spacing:.03em;background:var(--mark);color:#092845;padding:3px 12px;border-radius:99px}
/* a link to an episode that is not live yet: the words stay, the link waits */
.soon-ref small{color:var(--muted);font-weight:700}
.pn .is-soon{display:flex;flex-direction:column;padding:16px 18px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);line-height:1.4}
.pn .is-soon small{color:var(--muted)}
