/* ============================================================
   blog.css — shared chrome for every generated blog page.
   Tokens are copied verbatim from the landing page so the two
   stay in step. This file is static; everything else under
   /blog/ is generated by scripts/build-blog.js.
   ============================================================ */
:root{
  --bg:#e4e4e5;
  --card:#f7f7f8;
  --white:#ffffff;
  --ink:#0a0a0a;
  --muted:#8e8e99;
  --red:#f14b3c;
  --purple:#9559fb;
  --purple-2:#8b4bf0;
  --yellow:#f8de4a;
  --radius-card:24px;
  --font-head:'Inter Tight','Rubik',sans-serif;
  --font-body:'Poppins','Rubik',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding:26px;
}
.page{
  background:var(--card);
  border-radius:44px;
  overflow:clip;
  position:relative;
  box-shadow:0 2px 3px rgba(0,0,0,.03);
}
html.lang-he h1,html.lang-he h2{letter-spacing:-.02em}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* nav.js injects <a class="btn-red btn-nav">; every page carries the rule */
.btn-red{
  display:inline-block;text-decoration:none;
  background:linear-gradient(180deg,#c94e41,#c3382a);
  color:#fff;border:none;border-radius:14px;
  font-family:var(--font-body);font-size:16px;font-weight:500;
  padding:17px 44px;cursor:pointer;
  box-shadow:0 16px 34px rgba(241,75,60,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s,box-shadow .2s;
}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 22px 42px rgba(241,75,60,.42), inset 0 1px 0 rgba(255,255,255,.35)}

/* one language on screen at a time */
html.lang-he [lang="en"].post-body{display:none}
html.lang-en [lang="he"].post-body{display:none}

/* ---------- index ---------- */
.blog-index{padding:120px 0 100px}
.blog-hero h1{
  font-family:var(--font-head);
  font-size:clamp(38px,4.6vw,60px);
  font-weight:600;letter-spacing:-.045em;line-height:1.04;
}
.blog-sub{color:#4a4a52;font-size:17px;line-height:1.85;margin-top:16px;max-width:560px}
.post-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:22px;margin-top:56px;
}
.post-card{
  display:block;background:var(--white);border-radius:var(--radius-card);
  padding:30px;text-decoration:none;
  box-shadow:0 3px 10px rgba(10,10,10,.04);
  transition:transform .2s,box-shadow .2s;
}
.post-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,10,10,.08)}
.post-card h2{
  font-family:var(--font-head);font-size:21px;font-weight:600;
  letter-spacing:-.02em;line-height:1.3;margin-top:10px;
}
.card-desc{color:#4a4a52;font-size:15px;line-height:1.7;margin-top:12px}
.blog-empty{color:var(--muted);font-size:16px}

/* ---------- post ---------- */
.post-wrap{max-width:820px;padding-top:110px;padding-bottom:100px}
.post-head{margin-bottom:40px}
.crumbs{display:flex;align-items:center;gap:12px;font-size:14px;color:#4c4c53}
.crumbs a{text-decoration:none;border-bottom:1px solid #d6d6da}
.crumbs a:hover{border-color:var(--ink)}
.draft-badge{
  display:inline-block;background:var(--yellow);color:var(--ink);
  border-radius:999px;padding:4px 14px;font-size:12.5px;font-weight:500;
}
.post-body h1{
  font-family:var(--font-head);
  font-size:clamp(32px,4vw,48px);
  font-weight:600;letter-spacing:-.04em;line-height:1.08;
  margin-top:18px;
}
/* byline: one restrained line under the title, no date on screen */
.post-body .post-author{font-size:14.5px;color:#6a6a72;line-height:1.6;margin-top:14px}
.post-body .post-author a{color:inherit;text-decoration:none;border-bottom:1px solid #d6d6da}
.post-body .post-author a:hover{border-color:var(--ink)}

.post-body h2{
  font-family:var(--font-head);font-size:26px;font-weight:600;
  letter-spacing:-.025em;line-height:1.25;margin:44px 0 0;
}
.post-body h3{
  font-family:var(--font-head);font-size:20px;font-weight:600;
  letter-spacing:-.02em;margin:34px 0 0;
}
.post-body p{color:#3c3c44;font-size:17px;line-height:1.9;margin-top:18px}
.post-body ul,.post-body ol{
  margin-top:18px;color:#3c3c44;font-size:17px;line-height:1.9;
  padding-inline-start:26px;
}
.post-body li{margin-top:8px}
.post-body li::marker{color:var(--purple)}
.post-body blockquote{
  margin-top:22px;padding:6px 22px;
  border-inline-start:3px solid var(--purple);
  color:#4a4a52;
}
.post-body blockquote p{font-size:16.5px}
.post-body hr{border:none;border-top:1px solid #ececee;margin:40px 0}
.post-body code{
  background:#eeeef1;border-radius:6px;padding:2px 7px;
  font-size:.9em;
}
.post-body a{color:var(--purple-2)}
.post-body strong{font-weight:600}

.post-cta{
  background:var(--white);border-radius:var(--radius-card);
  padding:40px 38px;margin-top:64px;
  box-shadow:0 3px 10px rgba(10,10,10,.04);
}
.post-cta h2{
  font-family:var(--font-head);font-size:24px;font-weight:600;
  letter-spacing:-.025em;line-height:1.3;
}
.post-cta p{color:#4a4a52;font-size:16px;line-height:1.8;margin:14px 0 24px}

/* ---------- next post + carousel ---------- */
.next-tile{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"label arrow" "title arrow" "desc arrow";
  align-items:center;
  column-gap:24px;
  background:var(--white);border-radius:var(--radius-card);
  padding:34px 38px;margin-top:64px;text-decoration:none;
  box-shadow:0 3px 10px rgba(10,10,10,.04);
  transition:transform .2s,box-shadow .2s;
}
.next-tile:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(10,10,10,.09)}
.next-label{
  grid-area:label;font-size:13px;color:var(--purple-2);
  letter-spacing:.04em;text-transform:uppercase;
}
.next-title{
  grid-area:title;font-family:var(--font-head);
  font-size:clamp(21px,2.4vw,27px);font-weight:600;
  letter-spacing:-.025em;line-height:1.25;margin-top:10px;
}
.next-desc{grid-area:desc;color:#4a4a52;font-size:15.5px;line-height:1.7;margin-top:10px}
.next-arrow{
  grid-area:arrow;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;border-radius:50%;
  background:#f1f1f4;color:var(--ink);
  transition:background .2s,color .2s;
}
.next-arrow svg{width:20px;height:20px}
.next-tile:hover .next-arrow{background:var(--purple);color:#fff}
/* the arrow is a direction, so it flips with the text */
[dir="rtl"] .next-arrow svg,[dir="rtl"] .more-btn svg{transform:scaleX(-1)}

.more{margin-top:56px}
.more-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.more-head h2{
  font-family:var(--font-head);font-size:22px;font-weight:600;
  letter-spacing:-.025em;
}
.more-nav{display:flex;gap:10px}
.more-btn{
  width:42px;height:42px;border-radius:50%;
  border:1px solid #e2e2e6;background:var(--white);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,opacity .2s;
}
.more-btn svg{width:18px;height:18px}
.more-btn[data-rail="prev"] svg{transform:scaleX(-1)}
[dir="rtl"] .more-btn[data-rail="prev"] svg{transform:none}
.more-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff}
.more-btn[disabled]{opacity:.35;cursor:default}
.more-btn[disabled]:hover{background:var(--white);border-color:#e2e2e6;color:var(--ink)}

.more-rail{
  display:flex;gap:18px;margin-top:22px;
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  /* the rail bleeds to the edges of the page so cards run off-screen
     rather than stopping short inside the column */
  padding:4px 40px 20px;margin-inline:-40px;
  scrollbar-width:none;
}
.more-rail::-webkit-scrollbar{display:none}
.more-rail:focus-visible{outline:2px solid var(--purple);outline-offset:4px}
.rail-card{
  flex:0 0 300px;scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--radius-card);
  padding:26px;text-decoration:none;
  box-shadow:0 3px 10px rgba(10,10,10,.04);
  transition:transform .2s,box-shadow .2s;
}
.rail-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,10,10,.08)}
.rail-title{
  font-family:var(--font-head);font-size:18px;font-weight:600;
  letter-spacing:-.02em;line-height:1.3;
}
.rail-desc{color:#4a4a52;font-size:14.5px;line-height:1.65;margin-top:10px}

@media (max-width:640px){
  body{padding:12px}
  .page{border-radius:28px}
  .wrap{padding:0 22px}
  .blog-index{padding-top:100px}
  .post-wrap{padding-top:96px}
  .next-tile{padding:26px 24px;column-gap:14px}
  .more-rail{padding-inline:22px;margin-inline:-22px}
  .rail-card{flex-basis:78%}
  .more-nav{display:none}
}

/* ---------- most read ---------- */
.most-read{margin-top:80px;padding-top:44px;border-top:1px solid #ececee}
.most-read h2{
  font-family:var(--font-head);font-size:22px;font-weight:600;letter-spacing:-.025em;
}
.mr-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;margin-top:24px;
}
.mr-card{position:relative;padding:26px}
.mr-card h3{
  font-family:var(--font-head);font-size:17px;font-weight:600;
  letter-spacing:-.02em;line-height:1.35;margin-top:12px;
}
.mr-card .card-desc{font-size:14px;margin-top:10px}
.mr-rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  background:#f1eaff;color:var(--purple-2);
  font-size:13px;font-weight:600;
}