/* ---------------------------------------------------------------------------
   Focusity blog — shared stylesheet
   ---------------------------------------------------------------------------
   Every article used to carry its own near-identical <style> block. One file
   instead means a design change lands everywhere at once, and a new article is
   markup only.

   Type and colour come from public/home.html on purpose. Heebo and Rubik are
   the brand faces AND the ones that actually render Hebrew properly -- the
   fashionable display faces (Geist, Clash Display, PP Editorial) have no
   Hebrew coverage at all, so "upgrading" the typography here would render the
   entire site as tofu. The craft lives in spacing, depth and motion instead.

   RTL: everything uses logical properties (inline-start/end, margin-block) so
   the layout is direction-agnostic and nothing needs mirroring by hand.
--------------------------------------------------------------------------- */

:root{
  --bg:#f6f7f9;
  --white:#fff;
  --ink:#151a30;
  --muted:#5b6478;
  --faint:#8a91a4;
  --line:#e4e7ee;
  --hairline:rgba(21,26,48,.07);
  --indigo:#4f46e5;
  --indigo-soft:#eef0fe;
  --purple:#7c3aed;
  --night:#0d1230;
  --warn-bg:#fff8e6;
  --warn-line:#f0d9a0;

  /* One easing curve for the whole surface. Heavy start, long settle -- reads
     as mass rather than as a computer changing a number. */
  --ease:cubic-bezier(.32,.72,0,1);

  /* Concentric radii: inner = outer - shell padding, so nested corners stay
     visually parallel instead of drifting apart. */
  --r-shell:30px;
  --r-core:24px;

  /* Diffused ambient shadows, never a hard drop. Two layers: a tight contact
     shadow and a wide soft one. */
  --shadow-rest:0 1px 2px rgba(21,26,48,.04), 0 12px 32px -18px rgba(21,26,48,.18);
  --shadow-lift:0 2px 4px rgba(21,26,48,.05), 0 28px 60px -28px rgba(21,26,48,.28);
}

*{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Heebo',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  font-size:1.06rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{font-family:'Rubik',sans-serif;line-height:1.22;text-wrap:balance;}
a{color:var(--indigo);}
p{margin:0 0 20px;}

.wrap{max-width:740px;margin-inline:auto;padding-inline:22px;}

/* --- Reading progress ---------------------------------------------------- */
/* Fixed, transform-only, and driven by a scroll listener that just writes a
   CSS variable -- no layout properties animate. */
.progress{
  position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:60;
  background:linear-gradient(90deg,var(--indigo),var(--purple));
  transform:scaleX(var(--p,0));transform-origin:right center;
  will-change:transform;
}
html[dir="ltr"] .progress{transform-origin:left center;}

/* --- Header -------------------------------------------------------------- */
/* Floating pill, detached from the edge. backdrop-blur is safe here because
   the element is fixed, not inside a scrolling container. */
.topbar{
  position:sticky;inset-block-start:14px;z-index:50;
  margin-block:14px 0;padding-inline:22px;
}
.topbar-inner{
  max-width:740px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 12px 10px 20px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--hairline);
  border-radius:999px;
  box-shadow:var(--shadow-rest);
}
.topbar a{text-decoration:none;}
.topbar .brand{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:1.06rem;
  color:var(--ink);letter-spacing:-.01em;
}
.topbar .back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.88rem;font-weight:500;color:var(--muted);
  padding:8px 14px;border-radius:999px;
  transition:background .5s var(--ease),color .5s var(--ease);
}
.topbar .back:hover{background:var(--indigo-soft);color:var(--indigo);}

/* --- Eyebrow ------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 13px;border-radius:999px;
  background:var(--indigo-soft);color:var(--indigo);
  font-family:'Rubik',sans-serif;font-weight:600;
  font-size:.7rem;letter-spacing:.11em;
  margin-block-end:18px;
}
.eyebrow::before{
  content:"";inline-size:5px;block-size:5px;border-radius:50%;
  background:currentColor;opacity:.7;
}

/* --- Index hero ---------------------------------------------------------- */
.hero{padding-block:76px 44px;}
.hero h1{
  font-size:clamp(2rem,6vw,3.1rem);
  letter-spacing:-.025em;margin:0 0 16px;
}
.hero .sub{
  color:var(--muted);font-size:1.1rem;max-width:52ch;margin:0;
}

/* --- Post cards (double bezel) ------------------------------------------- */
/* Outer shell is the tray; inner core is the plate sitting in it. The two
   radii are concentric, which is what makes it read as hardware. */
.posts{display:grid;gap:20px;padding-block-end:20px;}

.post{
  display:block;text-decoration:none;color:inherit;
  padding:6px;
  background:rgba(21,26,48,.035);
  border:1px solid var(--hairline);
  border-radius:var(--r-shell);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease),background .7s var(--ease);
}
.post:hover{
  transform:translateY(-4px);
  background:rgba(79,70,229,.09);
  box-shadow:var(--shadow-lift);
}
.post:active{transform:translateY(-1px) scale(.995);}

.post-core{
  background:var(--white);
  border-radius:var(--r-core);
  padding:30px 30px 26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-rest);
}
.post h2{
  font-size:1.32rem;letter-spacing:-.015em;margin:0 0 10px;
  transition:color .5s var(--ease);
}
.post:hover h2{color:var(--indigo);}
.post p{color:var(--muted);font-size:1rem;margin:0 0 18px;}

.post-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:.85rem;color:var(--faint);
}
.post-tag{
  font-family:'Rubik',sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.08em;color:var(--indigo);
  background:var(--indigo-soft);padding:4px 11px;border-radius:999px;
}
/* Button-in-button: the arrow lives in its own disc, flush with the edge. */
.post-go{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Rubik',sans-serif;font-weight:600;font-size:.86rem;color:var(--ink);
}
.post-go i{
  inline-size:30px;block-size:30px;border-radius:50%;
  background:rgba(21,26,48,.05);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .6s var(--ease),background .6s var(--ease);
}
.post-go svg{inline-size:15px;block-size:15px;}
.post:hover .post-go i{
  background:var(--indigo);color:#fff;
  transform:translateX(-3px) translateY(-1px) scale(1.06);
}

/* The newest post gets more room -- an asymmetric grid without a second
   column, which keeps it honest on a phone. */
.post.featured .post-core{padding:38px 34px 30px;}
.post.featured h2{font-size:clamp(1.4rem,3.4vw,1.85rem);}
.post.featured p{font-size:1.06rem;}

/* --- "In progress" ------------------------------------------------------- */
.soon{
  margin-block-start:34px;padding:26px 30px;
  border:1px dashed rgba(21,26,48,.16);border-radius:var(--r-shell);
  color:var(--muted);
}
.soon h2{font-family:'Rubik',sans-serif;font-size:.95rem;color:var(--ink);margin:0 0 12px;}
.soon ul{margin:0;padding-inline-start:20px;}
.soon li{margin-block:6px;font-size:.96rem;}

/* --- Article ------------------------------------------------------------- */
.article-head{padding-block:64px 0;}
.article-head h1{
  font-size:clamp(1.85rem,5vw,2.85rem);
  letter-spacing:-.025em;margin:0 0 18px;
}
.byline{
  display:flex;align-items:center;gap:12px;
  color:var(--muted);font-size:.92rem;margin:0 0 36px;
}
.byline .dot{inline-size:3px;block-size:3px;border-radius:50%;background:var(--faint);}

article{padding-block-end:40px;}
article h2{font-size:clamp(1.3rem,3.2vw,1.7rem);letter-spacing:-.018em;margin:56px 0 14px;}
article h3{font-size:1.1rem;margin:32px 0 8px;}
article ul,article ol{margin:0 0 20px;padding-inline-start:24px;}
article li{margin-block:9px;}
article li::marker{color:var(--indigo);}

/* Lede: the 40-60 word direct answer. Deliberately the loudest block on the
   page after the H1 -- a reader who leaves after it should still have it. */
.lede{
  font-size:1.16rem;line-height:1.72;
  padding:26px 28px;margin:0 0 40px;
  background:var(--white);
  border:1px solid var(--hairline);
  border-inline-start:3px solid var(--indigo);
  border-radius:var(--r-core);
  box-shadow:var(--shadow-rest);
}
.lede strong{color:var(--indigo);}

.step{
  font-family:'Rubik',sans-serif;color:var(--indigo);font-weight:700;
}

/* --- Tables -------------------------------------------------------------- */
/* Wrapped in .scroller so a wide table scrolls itself instead of the page. */
.scroller{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch;}
table{
  border-collapse:separate;border-spacing:0;inline-size:100%;min-inline-size:100%;
  font-size:.97rem;background:var(--white);
  border:1px solid var(--hairline);border-radius:var(--r-core);overflow:hidden;
  box-shadow:var(--shadow-rest);
}
th,td{padding:14px 18px;text-align:start;vertical-align:top;border-block-end:1px solid var(--line);}
th{
  background:#f0f2f8;font-family:'Rubik',sans-serif;font-weight:600;
  font-size:.88rem;letter-spacing:.01em;
}
tr:last-child td{border-block-end:none;}

/* --- Notes --------------------------------------------------------------- */
.note{
  background:var(--white);border:1px solid var(--hairline);
  border-radius:var(--r-core);padding:24px 26px;margin:0 0 24px;
  box-shadow:var(--shadow-rest);
}
.note.warn{background:var(--warn-bg);border-color:var(--warn-line);box-shadow:none;}
.note p:last-child,.note ul:last-child,.note ol:last-child{margin-block-end:0;}

/* --- Calculation block --------------------------------------------------- */
.calc{
  background:var(--white);border:1px solid var(--hairline);
  border-radius:var(--r-core);padding:10px 26px;margin:0 0 24px;
  box-shadow:var(--shadow-rest);
}
.calc div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-block:13px;border-block-end:1px solid var(--line);
  font-size:.99rem;
}
.calc div:last-child{
  border-block-end:none;font-weight:700;color:var(--indigo);
  font-family:'Rubik',sans-serif;
}
.calc span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;}

/* --- FAQ ----------------------------------------------------------------- */
.faq h3{
  margin-block-start:30px;padding-inline-start:16px;
  border-inline-start:2px solid var(--indigo-soft);
}

/* --- Cluster map (pillar pages only) ------------------------------------- */
/* The visible half of the internal-linking plan. A pillar page has to link
   down to every article in its cluster, and a reader has to be able to see
   the shape of the topic before committing to 2,000 words. This does both. */
.cluster{
  padding:6px;margin:0 0 40px;
  background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(124,58,237,.06));
  border:1px solid var(--hairline);border-radius:var(--r-shell);
}
.cluster-core{
  background:var(--white);border-radius:var(--r-core);padding:26px 28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.cluster h2{
  font-size:1.02rem!important;margin:0 0 6px!important;
  font-family:'Rubik',sans-serif;
}
.cluster > .cluster-core > p{color:var(--muted);font-size:.94rem;margin:0 0 18px;}
.cluster ol{list-style:none;counter-reset:c;margin:0;padding:0;}
.cluster li{counter-increment:c;margin:0;padding:0;}
.cluster li a{
  display:flex;gap:14px;align-items:baseline;text-decoration:none;color:inherit;
  padding:13px 14px;border-radius:14px;margin-inline:-14px;
  transition:background .5s var(--ease);
}
.cluster li a:hover{background:var(--indigo-soft);}
.cluster li a::before{
  content:counter(c);
  font-family:'Rubik',sans-serif;font-weight:700;font-size:.8rem;
  color:var(--indigo);flex:none;inline-size:22px;
}
.cluster .t{font-family:'Rubik',sans-serif;font-weight:600;font-size:.99rem;}
.cluster .d{display:block;color:var(--muted);font-size:.89rem;font-weight:400;margin-block-start:3px;}
.cluster li a[aria-current="page"]{background:rgba(21,26,48,.04);}
.cluster li a[aria-current="page"] .t::after{
  content:"אתם כאן";
  font-family:'Heebo',sans-serif;font-weight:500;font-size:.72rem;
  color:var(--indigo);background:var(--indigo-soft);
  padding:2px 9px;border-radius:999px;margin-inline-start:9px;
  vertical-align:middle;
}

/* --- Up-link back to the pillar ------------------------------------------ */
.uplink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.9rem;color:var(--muted);text-decoration:none;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  margin-block-end:28px;background:var(--white);
  transition:border-color .5s var(--ease),color .5s var(--ease);
}
.uplink:hover{border-color:var(--indigo);color:var(--indigo);}
.uplink svg{inline-size:13px;block-size:13px;flex:none;}

@media(max-width:640px){
  .cluster-core{padding:22px 20px;}
  .cluster li a{padding:12px 12px;margin-inline:-12px;}
}

/* --- Related ------------------------------------------------------------- */
.related{margin-block-start:52px;padding-block-start:26px;border-block-start:1px solid var(--line);}
.related h3{font-size:.95rem;color:var(--faint);letter-spacing:.06em;margin:0 0 14px;}
.related ul{list-style:none;padding:0;margin:0;}
.related li{margin-block:10px;font-size:.98rem;}

/* --- CTA ----------------------------------------------------------------- */
.cta{
  margin-block-start:60px;padding:6px;
  background:linear-gradient(135deg,rgba(79,70,229,.14),rgba(124,58,237,.09));
  border:1px solid var(--hairline);border-radius:var(--r-shell);
}
.cta-core{
  background:var(--white);border-radius:var(--r-core);padding:34px 32px 32px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.cta h2{margin:0 0 14px;font-size:1.34rem;}
.cta p{color:var(--muted);}
.cta p:last-of-type{margin-block-end:24px;}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--indigo);color:#fff;text-decoration:none;
  font-family:'Rubik',sans-serif;font-weight:600;font-size:1rem;
  padding:9px 10px 9px 26px;border-radius:999px;
  box-shadow:0 14px 30px -14px rgba(79,70,229,.9);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .6s var(--ease);
}
.btn i{
  inline-size:34px;block-size:34px;border-radius:50%;
  background:rgba(255,255,255,.16);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .6s var(--ease);
}
.btn svg{inline-size:16px;block-size:16px;}
.btn:hover{background:#4338ca;box-shadow:0 18px 38px -14px rgba(79,70,229,1);transform:translateY(-2px);}
.btn:hover i{transform:translateX(-4px) translateY(-1px) scale(1.06);}
.btn:active{transform:translateY(0) scale(.98);}

/* --- Footer -------------------------------------------------------------- */
.site-foot{
  color:var(--faint);font-size:.88rem;text-align:center;
  padding-block:44px 56px;border-block-start:1px solid var(--line);
  margin-block-start:60px;
}
.site-foot a{color:var(--muted);text-decoration:none;}
.site-foot a:hover{color:var(--indigo);}

/* --- Scroll reveal ------------------------------------------------------- */
/* transform + opacity + filter only. Driven by IntersectionObserver, never a
   scroll handler.

   Note the `html.js-reveal` gate: content is VISIBLE by default and only gets
   hidden once a script in <head> has confirmed the browser can actually run
   the reveal. Hiding first and revealing with JS is the usual way this is
   written, and it is a trap on a content page -- if the observer never fires
   (script blocked, unsupported browser, a tab that never composites a frame),
   every article renders permanently blank. Opt-in fails safe: worst case the
   animation is skipped and the text is simply there. */
html.js-reveal .reveal{
  opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
html.js-reveal .reveal.in{opacity:1;transform:none;filter:none;}

/* --- Responsive ---------------------------------------------------------- */
@media(max-width:640px){
  body{font-size:1.02rem;}
  .wrap{padding-inline:18px;}
  .topbar{padding-inline:16px;inset-block-start:10px;}
  .topbar-inner{padding:9px 10px 9px 16px;}
  .hero{padding-block:52px 32px;}
  .article-head{padding-block:44px 0;}
  .post-core{padding:24px 22px 22px;}
  .post.featured .post-core{padding:28px 24px 24px;}
  .lede{padding:22px 20px;font-size:1.1rem;}
  .note,.cta-core{padding:22px 20px;}
  .calc{padding-inline:20px;}
  .soon{padding:22px 20px;}
  th,td{padding:12px 14px;}
  article h2{margin-block-start:44px;}
}

/* Respect the OS setting -- matches how public/home.html already behaves. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
  .reveal{opacity:1;transform:none;filter:none;}
  .progress{display:none;}
}