/* ═══════════════════════════════════════════════════════════════
   CLICKABILY · הבלוג — "הפנקס המדוד"
   Loaded only on the blog's four templates (home / single / archive
   / search). Every token, radius and rhythm is inherited from the
   shell's inline CSS in header.php; nothing new is declared here but
   layout, and no new hex value appears anywhere in the file.

   The signature is .bmeasure — a mono label plus a mint segment
   whose width IS the reading time. Same object at three sizes: on a
   card, in an article's meta row, and as the contents ruler.

   ⚠️ This file is mirrored at design/hero/assets/css/blog.css.
   sync-theme.sh runs rsync --delete over theme/assets/, so a copy
   that lives only in the theme is deleted on the next sync.
   ═══════════════════════════════════════════════════════════════ */

/* ── local rhythm ─────────────────────────────────────────── */
:root{
  --b-card:linear-gradient(160deg,#0a2663 0%,#061a44 100%);
  --b-line:rgba(242,242,242,.11);
  --b-lift:0 24px 60px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(242,242,242,.05);
  --b-hover:0 30px 70px -34px rgba(0,234,173,.30);
  /* clears the fixed nav pill: its own top padding plus 56px of pill,
     plus a hair so the sticky bar never kisses it */
  --b-stick:calc(clamp(.45rem,1vw,.8rem) + 62px);
}

/* ═══ 01 · THE SPREAD LEADS ══════════════════════════════════
   The archive used to open on a manifesto and a strip of counts.
   Both are gone, so the newest article is the entry — and the spread
   carries the top clearance the hero used to. */

/* ═══ ARCHIVE / SEARCH HEAD · shorter: the reader already chose ══ */
.bahero{padding-block:clamp(7rem,13vh,9.5rem) clamp(.5rem,1.5vh,1.2rem)}
.bahero__t{font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 clamp(.7rem,1.8vh,1.1rem);text-wrap:balance}
.bahero__x{margin-bottom:.9rem}
.bahero__n{margin:0;font-family:var(--font-meta);font-size:.78rem;
  letter-spacing:.12em;color:rgba(242,242,242,.5)}

/* ═══ THE MEASURE · the page's signature object ════════════════ */
.bmeasure{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-meta);font-size:.72rem;letter-spacing:.08em;
  color:rgba(242,242,242,.5);white-space:nowrap}
.bmeasure__bar{position:relative;display:block;width:44px;height:3px;
  border-radius:2px;background:rgba(242,242,242,.13);overflow:hidden;flex:none}
.bmeasure__bar::after{content:"";position:absolute;inset-block:0;
  inset-inline-start:0;width:var(--fill,50%);border-radius:2px;
  background:linear-gradient(to left,var(--mint),#7cffda);
  box-shadow:0 0 10px rgba(0,234,173,.55)}
.bmeasure--sm{font-size:.68rem}
.bmeasure--sm .bmeasure__bar{width:34px;height:2px}
.bmeasure--lg{font-size:.8rem;color:var(--paper-2)}
.bmeasure--lg .bmeasure__bar{width:64px;height:4px}

/* ═══ THE SHELF BADGE ═════════════════════════════════════════ */
.bchip{display:inline-flex;align-items:center;
  padding:.24rem .62rem;border-radius:var(--r-pill);
  border:1px solid rgba(0,234,173,.34);background:rgba(0,234,173,.08);
  color:var(--mint);font-size:.74rem;font-weight:700;line-height:1.5;
  white-space:nowrap}
.bchip--link{transition:background .25s var(--ease),border-color .25s var(--ease)}
.bchip--link:hover{background:var(--mint);color:var(--navy-900);border-color:var(--mint)}

/* ═══ THE DRAWN COVER ═════════════════════════════════════════
   The site's own graph paper, at a tighter pitch than the page's, so
   a 400px box still reads as ruled paper and not as four squares.
   --bx/--by come from the post ID: no two covers in one category
   carry the bloom in the same place. */
.bcov{position:relative;display:block;overflow:hidden;
  aspect-ratio:16/10;border-radius:calc(var(--r-md) - 2px);
  background:
    radial-gradient(60% 60% at var(--bx,42%) var(--by,38%),rgba(0,234,173,.16),transparent 70%),
    linear-gradient(158deg,#0a2461 0%,#04122e 100%)}
.bcov::before{content:"";position:absolute;inset:-1px;pointer-events:none;
  background-image:
    linear-gradient(to left,rgba(121,23,159,.34) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(121,23,159,.34) 1px,transparent 1px);
  background-size:22px 22px;opacity:.72;
  -webkit-mask-image:radial-gradient(120% 110% at var(--bx,42%) var(--by,38%),#000 12%,transparent 82%);
          mask-image:radial-gradient(120% 110% at var(--bx,42%) var(--by,38%),#000 12%,transparent 82%)}
.bcov__art{position:absolute;inset:0;display:grid;place-items:center;padding:9%}
.bcov__art svg{width:100%;height:auto;display:block;
  transition:transform .55s var(--ease)}
.bcov__vig{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,18,46,.55),transparent 62%)}
.bcov__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}

/* ── the glyph's ink · one colour, six drawings ──────────────
   Categories are told apart by the drawing, never by a hue: six
   coloured shelves would turn the archive into a pie chart and
   retire mint as the site's single accent. */
.bcov__art .g-s{stroke:rgba(0,234,173,.85);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transition:stroke .45s var(--ease)}
.bcov__art .g-d{stroke:rgba(0,234,173,.45);stroke-width:1.4;fill:none;
  stroke-dasharray:4 5;stroke-linecap:round;vector-effect:non-scaling-stroke;
  transition:stroke .45s var(--ease),stroke-dasharray .5s var(--ease)}
.bcov__art .g-ax{stroke:rgba(242,242,242,.30);stroke-width:1.3;fill:none;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.bcov__art .g-f{fill:rgba(0,234,173,.09);stroke:none;
  transition:fill .45s var(--ease)}
.bcov__art .g-fill{fill:var(--mint);stroke:none}
.bcov__art .g-dot{fill:rgba(0,234,173,.55);stroke:none;
  transition:fill .45s var(--ease)}

/* the wireframe→drawn move from /web/, echoed on hover only */
.bcard__link:hover .bcov__art .g-d,
.bfeat__cov:hover .bcov__art .g-d{stroke:rgba(0,234,173,.8);stroke-dasharray:1 0}
.bcard__link:hover .bcov__art .g-f,
.bfeat__cov:hover .bcov__art .g-f{fill:rgba(0,234,173,.16)}
.bcard__link:hover .bcov__art .g-dot,
.bfeat__cov:hover .bcov__art .g-dot{fill:var(--mint)}
.bcard__link:hover .bcov__art svg,
.bfeat__cov:hover .bcov__art svg{transform:scale(1.045)}
.bcard__link:hover .bcov__img{transform:scale(1.05)}

/* ═══ 02 · THE SPREAD · the newest article ═════════════════════ */
.bfeatw{padding-block-start:clamp(7rem,13vh,9.5rem)}
.bfeat{position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.4vw,3rem);align-items:center;
  padding:clamp(1.2rem,2.2vw,1.9rem);
  border:1px solid var(--b-line);border-radius:var(--r-md);
  background:var(--b-card);box-shadow:var(--b-lift);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.bfeat:hover{border-color:rgba(0,234,173,.30);box-shadow:var(--b-hover)}
.bfeat__cov{display:block;border-radius:calc(var(--r-md) - 2px);overflow:hidden}
.bfeat__cov .bcov{aspect-ratio:4/3}
.bfeat__k{display:flex;align-items:center;gap:.55rem;margin:0 0 .9rem;flex-wrap:wrap}
.bfeat__new{font-family:var(--font-meta);font-size:.68rem;letter-spacing:.2em;
  color:var(--mint);
  /* a tick in front of the label, the same measurement mark the
     section heads drop from above */
  padding-inline-start:.85rem;position:relative}
.bfeat__new::before{content:"";position:absolute;inset-inline-start:0;top:50%;
  translate:0 -50%;width:5px;height:5px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px rgba(0,234,173,.9)}
.bfeat__t{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.08;letter-spacing:-.018em;
  margin:0 0 .8rem;text-wrap:balance}
.bfeat__t a{transition:color .25s var(--ease)}
.bfeat__t a:hover{color:var(--mint)}
.bfeat__x{margin:0 0 1rem;color:var(--paper-2);
  font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.65;max-width:46ch}
.bfeat__m{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:0 0 .8rem;font-family:var(--font-meta);font-size:.72rem;
  letter-spacing:.06em;color:rgba(242,242,242,.5)}
.bfeat__go{margin-top:clamp(1.1rem,2.4vh,1.5rem)}

/* ═══ 03 · THE TOOLBAR ════════════════════════════════════════
   Sticky, because a shelf can run past three screens and the chips
   are how you leave it. The chips are real links to the category
   archives — narrowing nine cards client-side would silently hide
   everything on page two. */
.btool{position:sticky;top:var(--b-stick);z-index:6;
  margin:0 0 clamp(1.4rem,3vh,2.2rem);
  padding:clamp(.7rem,1.4vw,1rem);
  border:1px solid var(--b-line);border-radius:var(--r-md);
  background:rgba(4,18,46,.88);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
          backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.9)}
.btool__in{display:grid;gap:.75rem}

/* ── search ── */
.bsearch{margin:0}
.bsearch__l{display:block;font-size:.82rem;font-weight:500;
  color:var(--paper-2);margin-bottom:.35rem}
.bsearch__f{position:relative;display:flex;align-items:center;
  border:1px solid rgba(242,242,242,.18);border-radius:14px;
  background:rgba(242,242,242,.06);
  transition:border-color .25s var(--ease),background .25s var(--ease),
             box-shadow .25s var(--ease)}
.bsearch__f:focus-within{border-color:var(--mint);background:rgba(0,234,173,.06);
  box-shadow:0 0 0 3px rgba(0,234,173,.16)}
.bsearch__i{flex:none;margin-inline-start:.85rem;color:rgba(242,242,242,.45)}
.bsearch__f:focus-within .bsearch__i{color:var(--mint)}
.bsearch input{flex:1;min-width:0;min-height:48px;padding:.6rem .7rem;
  border:0;background:transparent;color:var(--paper);font:inherit;font-size:1rem}
.bsearch input:focus{outline:0}
.bsearch input::-webkit-search-cancel-button{display:none}
.bsearch__x{display:grid;place-items:center;width:44px;height:44px;
  margin-inline-end:.2rem;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:rgba(242,242,242,.55);
  transition:color .2s,background .2s}
.bsearch__x:hover{color:var(--navy-900);background:var(--mint)}
.bsearch__hint{margin:.35rem 0 0;font-family:var(--font-meta);font-size:.68rem;
  letter-spacing:.04em;color:rgba(242,242,242,.4)}

/* ── the shelves row ── */
.bshelf{display:flex;flex-wrap:wrap;gap:.45rem}
.bshelf__c{display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:.45rem .8rem;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:700}
.bshelf__c i{font-style:normal;font-family:var(--font-meta);font-size:.7rem;
  font-weight:400;opacity:.7;font-variant-numeric:tabular-nums}
.bshelf__c.is-on{background:var(--mint);color:var(--navy-900);
  border-color:var(--mint);box-shadow:0 0 24px -8px rgba(0,234,173,.6)}
.btool__live{margin:0;font-family:var(--font-meta);font-size:.7rem;
  letter-spacing:.1em;color:var(--mint);min-height:0}
.btool__live:empty{display:none}

/* ═══ THE GRID ════════════════════════════════════════════════ */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch}
.bcard{position:relative;isolation:isolate;min-width:0}
.bcard[hidden]{display:none}
.bcard__link{position:relative;display:flex;flex-direction:column;height:100%;
  padding:clamp(.75rem,1.1vw,.95rem);
  border:1px solid var(--b-line);border-radius:var(--r-md);
  background:var(--b-card);box-shadow:var(--b-lift);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease)}
.bcard__link:hover{transform:translateY(-4px);border-color:rgba(0,234,173,.30);
  box-shadow:var(--b-hover)}
/* the spotlight, driven by the same --cx/--cy pair the home cards use */
.bcard__link::after{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(260px 260px at var(--cx,50%) var(--cy,50%),
    rgba(0,234,173,.14),transparent 68%);
  transition:opacity .35s var(--ease)}
.bcard.is-near .bcard__link::after{opacity:1}
/* the mint→violet hairline along the top edge */
.bcard__rule{position:absolute;z-index:2;inset-inline:16%;top:-1px;height:1px;
  background:linear-gradient(to left,transparent,var(--mint),var(--violet),transparent);
  opacity:.26;transition:opacity .35s var(--ease),inset-inline .35s var(--ease)}
.bcard.is-near .bcard__rule{opacity:.95;inset-inline:5%}
.bcard__body{display:flex;flex-direction:column;flex:1;
  padding:clamp(.9rem,1.3vw,1.15rem) .35rem .35rem}
.bcard__top{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.7rem}
.bcard__d{font-family:var(--font-meta);font-size:.7rem;letter-spacing:.06em;
  color:rgba(242,242,242,.42);font-variant-numeric:tabular-nums;white-space:nowrap}
.bcard__t{font-size:clamp(1.06rem,1.4vw,1.28rem);font-weight:700;
  line-height:1.28;letter-spacing:-.008em;margin:0 0 .5rem;
  transition:color .25s var(--ease)}
.bcard__link:hover .bcard__t{color:var(--mint)}
.bcard__x{margin:0 0 1.1rem;color:var(--paper-2);font-size:.95rem;line-height:1.6;
  /* three lines keeps every card in a row the same height without a
     fixed height that clips a long Hebrew word */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.bcard__foot{display:flex;align-items:center;justify-content:space-between;
  gap:.7rem;margin-top:auto;padding-top:.8rem;
  border-top:1px solid rgba(242,242,242,.08)}
.bcard__go{display:inline-flex;align-items:center;gap:.4rem;color:var(--mint);
  font-weight:700;font-size:.88rem;white-space:nowrap}
.bcard__go svg{transition:transform .3s var(--ease)}
.bcard__link:hover .bcard__go svg{transform:translateX(-5px)}

/* ═══ EMPTY STATE + PAGINATION ════════════════════════════════ */
.bempty{padding:clamp(2rem,5vh,3.4rem) 1rem;text-align:center;
  border:1px dashed rgba(0,234,173,.28);border-radius:var(--r-md);
  background:rgba(0,234,173,.03)}
.bempty__t{margin:0 0 .5rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,1.9vw,1.5rem)}
.bempty__b{margin:0;color:var(--paper-2);font-size:.98rem}
.bempty .actions{justify-content:center;margin-top:1.4rem}

/* the load-more control, wearing the secondary button's own gradient
   border so it reads as the same family as .link */
.bmorewrap{display:flex;justify-content:center;margin-top:clamp(1.8rem,4vh,2.8rem)}
.bmore{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:1rem 2.1rem;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;
  color:var(--paper-2);font-weight:700;font-size:1rem;
  background:linear-gradient(rgba(2,20,56,.78),rgba(4,18,46,.78)) padding-box,
             linear-gradient(102deg,var(--mint),#3fd0d8 42%,var(--violet)) border-box;
  background-size:100% 100%,220% 100%;background-position:0 0,78% 0;
  transition:color .25s,background-position .7s var(--ease),
             transform .24s var(--ease),opacity .2s}
.bmore:hover{color:var(--paper);transform:translateY(-2px);background-position:0 0,12% 0}
.bmore svg{transition:transform .3s var(--ease)}
.bmore:hover svg{transform:translateY(3px)}
.bmore.is-busy{opacity:.5;pointer-events:none}
.bnowon{margin:0 0 1rem;font-family:var(--font-meta);font-size:.74rem;
  letter-spacing:.12em;color:rgba(242,242,242,.45)}
.bnowon a{color:var(--mint)}

/* ═══ 04 · THE SHELVES ════════════════════════════════════════ */
.btiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.8rem,1.5vw,1.2rem)}
.btile{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:clamp(.8rem,1.4vw,1.1rem);
  padding:clamp(.9rem,1.5vw,1.2rem);
  border:1px solid var(--b-line);border-radius:var(--r-md);
  background:linear-gradient(160deg,#082058 0%,#05163a 100%);
  transition:transform .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease)}
.btile:hover{transform:translateY(-3px);border-color:rgba(0,234,173,.34);
  box-shadow:var(--b-hover)}
.btile__art{flex:none;width:clamp(64px,7vw,88px);display:grid;place-items:center}
.btile__art svg{width:100%;height:auto;display:block}
.btile__art .g-s{stroke:rgba(0,234,173,.8);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.btile__art .g-d{stroke:rgba(0,234,173,.4);stroke-width:1.3;fill:none;
  stroke-dasharray:3 4;vector-effect:non-scaling-stroke;
  transition:stroke-dasharray .45s var(--ease)}
.btile:hover .btile__art .g-d{stroke-dasharray:1 0}
.btile__art .g-ax{stroke:rgba(242,242,242,.26);stroke-width:1.2;fill:none;
  vector-effect:non-scaling-stroke}
.btile__art .g-f{fill:rgba(0,234,173,.10);stroke:none;transition:fill .45s var(--ease)}
.btile:hover .btile__art .g-f{fill:rgba(0,234,173,.18)}
.btile__art .g-fill{fill:var(--mint);stroke:none}
.btile__art .g-dot{fill:rgba(0,234,173,.5);stroke:none}
.btile__c{min-width:0}
.btile__n{display:block;font-weight:700;font-size:clamp(1rem,1.3vw,1.16rem);
  margin-bottom:.28rem;transition:color .25s var(--ease)}
.btile:hover .btile__n{color:var(--mint)}
.btile__b{display:block;color:var(--paper-2);font-size:.9rem;line-height:1.5;
  margin-bottom:.5rem}
.btile__k{display:inline-flex;align-items:center;gap:.35rem;color:var(--mint);
  font-family:var(--font-meta);font-size:.7rem;letter-spacing:.1em}
.btile__k svg{transition:transform .3s var(--ease)}
.btile:hover .btile__k svg{transform:translateX(-4px)}

/* ═══════════════════════════════════════════════════════════════
   THE ARTICLE
   ═══════════════════════════════════════════════════════════════ */

/* ── the progress hairline · informative, so it survives
      prefers-reduced-motion (see the bottom of this file) ── */
.bprog{position:fixed;inset-inline:0;top:0;z-index:80;height:2px;
  pointer-events:none;background:rgba(242,242,242,.07)}
.bprog i{display:block;height:100%;width:var(--p,0%);
  background:linear-gradient(to left,var(--mint),#7cffda 60%,var(--violet));
  box-shadow:0 0 12px rgba(0,234,173,.7)}

/* ── 01 · the head ── */
.bphero{padding-block:clamp(6.4rem,12vh,8.6rem) 0}
.bphero .s__in{position:relative}
.bphero .s__in::before{content:"";position:absolute;z-index:-1;top:-6%;left:50%;
  translate:-50% 0;width:min(56rem,96vw);aspect-ratio:2.4/1;
  background:radial-gradient(closest-side,rgba(0,234,173,.10),transparent 72%);
  filter:blur(36px)}
/* the full rail, centred. It used to be a 52rem column held on the
   rail's start edge, which put the headline, the standfirst and the
   byline bar all off to one side of a 1360 page. */
.bphero__copy{max-width:none}
.bphero__k{margin:0 0 .9rem}
/* smaller than it was: at 3.7rem a long Hebrew headline ran to three
   display-size lines and pushed the article itself under the fold */
.bphero__t{font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.75rem,3.3vw,2.9rem);line-height:1.1;letter-spacing:-.022em;
  margin:0 auto clamp(.9rem,2.2vh,1.3rem);text-wrap:balance;
  max-width:min(30ch,100%);text-align:center}
.bphero__x{margin:0 auto clamp(1.3rem,2.8vh,1.9rem);color:var(--paper);
  font-weight:500;font-size:clamp(1rem,1.16vw,1.12rem);line-height:1.65;
  max-width:min(58ch,100%);text-align:center;text-wrap:pretty}

/* the meta row — three blocks on one rule */
.bmeta{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem clamp(.9rem,2vw,1.6rem);
  padding-block:clamp(.9rem,2vh,1.2rem);
  border-block:1px solid rgba(242,242,242,.10)}
.bmeta__who{display:flex;align-items:center;gap:.65rem;min-width:0}
.bmeta__av{width:40px;height:40px;border-radius:50%;object-fit:cover;
  object-position:50% 18%;flex:none;
  border:1px solid rgba(0,234,173,.4)}
.bmeta__who b{display:block;font-size:.95rem;line-height:1.3}
.bmeta__who small{display:block;font-size:.78rem;color:rgba(242,242,242,.5);
  line-height:1.35}
.bmeta__sep{width:1px;height:28px;background:rgba(242,242,242,.12);flex:none}
.bmeta__d{font-family:var(--font-meta);font-size:.76rem;letter-spacing:.06em;
  color:var(--paper-2)}
.bmeta__d small{display:block;font-size:.68rem;color:rgba(242,242,242,.42);
  margin-top:.15rem}
.bmeta .bmeasure{margin-inline-start:auto}

/* the cover on the site's own rail — the same 1360 + gutter the nav
   pill and every .s__in use. It was capped at 1100 and centred, so its
   edges sat ~130px inside the article text below it and nothing on the
   page lined up with anything. */
.bphero__cov{max-width:1360px;margin:clamp(1.6rem,3.6vh,2.6rem) auto 0;
  padding-inline:var(--gutter)}
.bphero__cov .bcov{aspect-ratio:21/9;border-radius:var(--r-md);
  border:1px solid var(--b-line);box-shadow:var(--b-lift)}
.bphero__cov .bcov__art{padding:6% 12%}

/* ── 02 · body + spine ── */
.bwrap__in{display:grid;grid-template-columns:minmax(0,1fr) 17rem;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
/* BOTH rows stated. The aside comes first in source and claims
   column 2, which leaves the auto-placement cursor past column 1 —
   so the body, asking for column 1, was pushed to a second row and
   started a full sidebar-height below it. That was the empty band
   beside the contents list. */
.bbody{grid-column:1;grid-row:1;min-width:0}
.baside{grid-column:2;grid-row:1;min-width:0}
.baside__stick{position:sticky;top:var(--b-stick);display:grid;gap:1.1rem}

/* ── the contents ruler · every H2 is a station ── */
.btoc{position:relative}
.btoc__h{margin:0 0 .8rem;font-family:var(--font-meta);font-size:.7rem;
  letter-spacing:.2em;color:var(--mint)}
.btoc__l{list-style:none;margin:0;padding:0;position:relative;
  padding-inline-start:1.05rem}
/* the rail the stations sit on */
.btoc__l::before{content:"";position:absolute;inset-block:.35rem;
  inset-inline-start:0;width:2px;border-radius:2px;
  background:rgba(242,242,242,.13)}
.btoc__i{position:relative}
.btoc__i a{display:block;padding-block:.42rem;font-size:.9rem;line-height:1.4;
  color:rgba(242,242,242,.55);
  transition:color .3s var(--ease),transform .3s var(--ease)}
.btoc__i a:hover{color:var(--paper)}
/* the station mark */
.btoc__i::before{content:"";position:absolute;inset-inline-start:-1.05rem;
  top:.85rem;width:2px;height:0;border-radius:2px;background:var(--mint);
  box-shadow:0 0 10px rgba(0,234,173,.8);
  transition:height .35s var(--ease)}
.btoc__i.is-on::before{height:1.35rem}
.btoc__i.is-on > a{color:var(--mint);font-weight:700}
.btoc__i--3 a{padding-inline-start:.8rem;font-size:.84rem;
  color:rgba(242,242,242,.42)}
.btoc__i--3::before{opacity:.6}

/* ── share ── */
.bshare__h{margin:0 0 .6rem;font-family:var(--font-meta);font-size:.7rem;
  letter-spacing:.16em;color:rgba(242,242,242,.45)}
.bshare__row{display:flex;flex-wrap:wrap;gap:.5rem}
.bshare__b{display:grid;place-items:center;width:44px;height:44px;
  border-radius:13px;cursor:pointer;
  border:1px solid rgba(242,242,242,.14);background:rgba(242,242,242,.05);
  transition:transform .25s var(--ease),background .25s var(--ease),
             border-color .25s var(--ease),box-shadow .25s var(--ease)}
.bshare__b svg{width:19px;height:19px;fill:var(--paper-2);
  transition:fill .25s var(--ease)}
.bshare__b:hover{transform:translateY(-3px)}
.bshare__b:hover svg{fill:#fff}
/* each network keeps its own colour on hover — the same rule the
   footer's social buttons follow */
.bshare__b--whatsapp:hover{background:#25d366;border-color:#25d366;
  box-shadow:0 10px 26px -12px rgba(37,211,102,.9)}
.bshare__b--linkedin:hover{background:#0a66c2;border-color:#0a66c2;
  box-shadow:0 10px 26px -12px rgba(10,102,194,.9)}
.bshare__b--facebook:hover{background:#1877f2;border-color:#1877f2;
  box-shadow:0 10px 26px -12px rgba(24,119,242,.9)}
.bshare__b--x:hover{background:#0b0b0b;border-color:rgba(242,242,242,.5)}
.bshare__b--copy:hover{background:var(--mint);border-color:var(--mint);
  box-shadow:0 10px 26px -12px rgba(0,234,173,.9)}
.bshare__b--copy:hover svg{fill:var(--navy-900)}
.bshare__b--copy.is-done{background:var(--mint);border-color:var(--mint)}
.bshare__b--copy.is-done svg{fill:var(--navy-900)}
.bshare--end{margin-top:clamp(2rem,4.4vh,3rem);padding-top:clamp(1.2rem,2.6vh,1.8rem);
  border-top:1px solid rgba(242,242,242,.10)}
.bshare--end .bshare__h{font-family:var(--font-body);font-size:.95rem;
  font-weight:700;letter-spacing:0;color:var(--paper)}

/* ── the aside's own small ask ── */
.bask{padding:1.1rem;border-radius:var(--r-md);
  border:1px solid rgba(0,234,173,.22);
  background:linear-gradient(160deg,rgba(0,234,173,.07),rgba(4,18,46,.5))}
.bask__t{margin:0 0 .45rem;font-weight:700;font-size:.98rem;line-height:1.35}
.bask__b{margin:0 0 .8rem;color:var(--paper-2);font-size:.88rem;line-height:1.55}
.bask__go{display:inline-flex;align-items:center;gap:.4rem;color:var(--mint);
  font-weight:700;font-size:.9rem}
.bask__go svg{transition:transform .3s var(--ease)}
.bask__go:hover svg{transform:translateX(-4px)}

/* ═══ PROSE · the reading column ══════════════════════════════
   Scoped to .bbody so it can't collide with .prose in style.css,
   which the legal pages use. 68ch and 1.85 line-height: Hebrew has
   no ascenders/descenders to speak of, so it needs more leading than
   Latin at the same size to stop lines from merging. */
.bbody{font-size:clamp(1.04rem,1.16vw,1.09rem);line-height:1.85;
  color:rgba(242,242,242,.78)}
.bbody > *{max-width:68ch}
.bbody > * + *{margin-top:1.15em}
.bbody p{margin:0}
.bbody strong,.bbody b{color:var(--paper);font-weight:700}
.bbody a:not(.bchip){color:var(--mint);text-decoration:underline;
  text-decoration-color:rgba(0,234,173,.4);text-decoration-thickness:1.5px;
  text-underline-offset:.25em;transition:text-decoration-color .25s}
.bbody a:not(.bchip):hover{text-decoration-color:var(--mint)}

.bbody h2{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.42rem,2.5vw,1.95rem);line-height:1.2;letter-spacing:-.015em;
  color:var(--paper);margin-top:2.1em;margin-bottom:.1em;
  /* scroll-margin, so an anchor from the contents ruler doesn't land
     the heading underneath the fixed nav */
  scroll-margin-top:calc(var(--b-stick) + 1rem);
  position:relative;padding-inline-start:1rem}
.bbody h2::before{content:"";position:absolute;inset-inline-start:0;
  top:.18em;bottom:.18em;width:3px;border-radius:3px;
  background:linear-gradient(to bottom,var(--mint),rgba(121,23,159,.7));
  box-shadow:0 0 12px rgba(0,234,173,.45)}
.bbody h3{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,1.5vw,1.26rem);line-height:1.35;color:var(--paper);
  margin-top:1.9em;margin-bottom:.05em;
  scroll-margin-top:calc(var(--b-stick) + 1rem)}

.bbody ul,.bbody ol{padding-inline-start:1.4em;margin-block:0}
.bbody li + li{margin-top:.5em}
.bbody li::marker{color:var(--mint)}
.bbody ol{counter-reset:bol}
.bbody ol > li::marker{font-family:var(--font-meta);font-size:.9em;
  color:var(--mint)}

/* ── the checklist · a mint tick instead of a bullet ── */
.bbody .bchecks{list-style:none;padding-inline-start:0}
.bbody .bchecks li{position:relative;padding-inline-start:1.85rem}
.bbody .bchecks li::before{content:"";position:absolute;
  inset-inline-start:0;top:.62em;width:11px;height:6px;
  border:2px solid var(--mint);border-top:0;border-inline-end:0;
  rotate:-45deg}

/* ── the pull quote · the one place the type gets loud mid-read ── */
.bbody blockquote{margin:2em 0;padding:0 0 0 0;border:0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.35;letter-spacing:-.012em;
  color:var(--paper);position:relative;
  padding-block:1.1em;max-width:56ch}
.bbody blockquote::before,.bbody blockquote::after{
  content:"";position:absolute;inset-inline:0;height:1px;
  background:linear-gradient(to left,var(--mint),rgba(121,23,159,.6) 60%,transparent)}
.bbody blockquote::before{top:0}
.bbody blockquote::after{bottom:0;
  background:linear-gradient(to right,var(--mint),rgba(121,23,159,.6) 60%,transparent)}
.bbody blockquote p{margin:0}

/* ── callouts ── */
.bbody .bnote{margin-block:1.9em;padding:clamp(1rem,1.7vw,1.35rem);
  border-radius:var(--r-md);border:1px solid rgba(242,242,242,.12);
  background:rgba(242,242,242,.035);font-size:.98em;line-height:1.7}
.bbody .bnote > * + *{margin-top:.7em}
.bbody .bnote p{margin:0}
.bbody .bnote--warn{border-color:rgba(121,23,159,.45);
  background:linear-gradient(160deg,rgba(121,23,159,.14),rgba(4,18,46,.4));
  padding-inline-start:calc(clamp(1rem,1.7vw,1.35rem) + 4px);
  border-inline-start:4px solid var(--violet)}

/* ── the takeaways box · the article's own bottom line ── */
.bbody .bnote--key{border-color:rgba(0,234,173,.3);
  background:linear-gradient(160deg,rgba(0,234,173,.08),rgba(4,18,46,.45));
  margin-top:2.4em}
.bbody .bnote--key h3{margin:0 0 .7em;padding:0;font-family:var(--font-display);
  font-weight:900;font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--mint);
  letter-spacing:.02em}
.bbody .bnote--key ul{list-style:none;padding-inline-start:0;margin:0}
.bbody .bnote--key li{position:relative;padding-inline-start:1.7rem;
  counter-increment:bkey}
.bbody .bnote--key li + li{margin-top:.65em;padding-top:.65em;
  border-top:1px dashed rgba(0,234,173,.18)}
.bbody .bnote--key li::before{content:"";position:absolute;
  inset-inline-start:.35rem;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 10px rgba(0,234,173,.8)}
.bbody .bnote--key li + li::before{top:1.27em}

/* ── tables · the arithmetic the articles keep doing ── */
.bbody table{width:100%;max-width:68ch;border-collapse:collapse;
  margin-block:1.9em;font-size:.95em;
  /* a six-column table on a phone has to scroll inside itself, never
     hand the document a horizontal scrollbar */
  display:block;overflow-x:auto}
.bbody table thead th{text-align:start;font-weight:700;color:var(--mint);
  font-family:var(--font-meta);font-size:.78em;letter-spacing:.08em;
  padding:.7rem .8rem;border-bottom:1px solid rgba(0,234,173,.3);
  white-space:nowrap}
.bbody table td{padding:.7rem .8rem;border-bottom:1px solid rgba(242,242,242,.09);
  vertical-align:top}
.bbody table tbody tr:hover td{background:rgba(0,234,173,.04)}
.bbody table td:first-child{color:var(--paper);font-weight:500}
.bbody table strong{color:var(--mint)}

/* the one place that stays monospaced: a UTM string or a snippet set
   in a proportional face is genuinely harder to read, and this is
   article content rather than site chrome. A system stack, so it is
   still zero downloaded fonts. */
.bbody code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;
  padding:.12em .42em;border-radius:6px;
  background:rgba(0,234,173,.09);color:#7cffda;
  /* Latin snippets inside Hebrew prose: without an explicit direction
     a UTM string reads back-to-front */
  direction:ltr;display:inline-block}
.bbody figure{margin:1.9em 0}
.bbody figure img{border-radius:var(--r-md);border:1px solid var(--b-line)}
.bbody figcaption{margin-top:.6rem;font-family:var(--font-meta);font-size:.74rem;
  color:rgba(242,242,242,.45);letter-spacing:.04em}
.bbody hr{border:0;height:1px;margin-block:2.4em;
  background:linear-gradient(to left,transparent,rgba(242,242,242,.18),transparent)}

.btags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:2em !important}
.btags a{font-family:var(--font-meta);font-size:.76rem;padding:.3rem .7rem;
  border-radius:var(--r-pill);border:1px solid rgba(242,242,242,.16);
  color:var(--paper-2);text-decoration:none !important;
  transition:border-color .25s,color .25s}
.btags a:hover{border-color:var(--mint);color:var(--mint)}

/* ── 04 · the band ── */
.bband__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  padding:clamp(1.4rem,2.6vw,2.4rem);
  border:1px solid rgba(0,234,173,.2);border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(0,234,173,.07),rgba(8,32,88,.55) 55%,rgba(4,18,46,.7))}
.bband__h{max-width:none;margin-bottom:1.1rem}
.bband__h > span{display:block}
.bband__l{margin:0}
.bband__l li:last-child{margin-bottom:0}
.bband__go{display:grid;gap:.7rem;justify-items:stretch}
.bband__go .btn,.bband__go .link{width:100%}
.bband__n{margin:.3rem 0 0;text-align:center;font-family:var(--font-meta);
  font-size:.8rem;letter-spacing:.04em;color:rgba(242,242,242,.45)}

/* ── 05 · related ── */
.brel__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.2rem,2.6vh,1.8rem)}
.brel__head .h2{margin:0;max-width:none;
  font-size:clamp(1.5rem,2.6vw,2.2rem)}
.brel__all{display:inline-flex;align-items:center;gap:.4rem;color:var(--mint);
  font-weight:700;font-size:.92rem;white-space:nowrap}
.brel__all svg{transition:transform .3s var(--ease)}
.brel__all:hover svg{transform:translateX(-5px)}

/* ── 06 · prev / next ── */
.bpn__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.2rem)}
.bpn__a{display:grid;gap:.5rem;padding:clamp(1rem,1.8vw,1.4rem);
  border:1px solid var(--b-line);border-radius:var(--r-md);
  background:linear-gradient(160deg,#082058 0%,#05163a 100%);
  transition:transform .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease)}
.bpn__a:hover{transform:translateY(-3px);border-color:rgba(0,234,173,.34);
  box-shadow:var(--b-hover)}
.bpn__a--prev{text-align:end}
.bpn__k{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-meta);font-size:.7rem;letter-spacing:.16em;
  color:var(--mint)}
.bpn__a--prev .bpn__k{justify-content:flex-end}
.bpn__t{font-weight:700;font-size:clamp(.98rem,1.3vw,1.16rem);line-height:1.35;
  transition:color .25s var(--ease)}
.bpn__a:hover .bpn__t{color:var(--mint)}
.bpn__a svg{transition:transform .3s var(--ease)}
.bpn__a:hover svg{transform:translateX(-4px)}
.bpn__a--prev:hover svg{transform:translateX(-4px)}

/* ── back to top · mobile only, see the media query ── */
.btop{position:fixed;z-index:70;inset-inline-start:1rem;bottom:1rem;
  display:none;place-items:center;width:48px;height:48px;border-radius:50%;
  cursor:pointer;border:1px solid rgba(0,234,173,.4);color:var(--mint);
  background:rgba(4,18,46,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
  opacity:0;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.btop.is-in{opacity:1;transform:none}

/* ── the copy-link toast ── */
.btoast{position:fixed;z-index:130;inset-inline:0;bottom:1.4rem;
  display:flex;justify-content:center;pointer-events:none;
  opacity:0;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.btoast.is-in{opacity:1;transform:none}
.btoast::before{content:attr(data-msg);
  padding:.7rem 1.2rem;border-radius:var(--r-pill);
  background:var(--mint);color:var(--navy-900);font-weight:700;font-size:.92rem;
  box-shadow:0 16px 36px -16px rgba(0,234,173,.8)}
.btoast:empty::before{content:none}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .bwrap__in{grid-template-columns:minmax(0,1fr) 15rem;
    gap:clamp(1.4rem,3vw,2.4rem)}
}

@media (max-width:1020px){
  .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bfeat{grid-template-columns:1fr;gap:1.2rem}
  .bfeat__cov .bcov{aspect-ratio:16/9}
  /* the article's spine moves above the text: 15rem of sticky column
     next to a 40ch measure is worse than no column at all */
  .bwrap__in{grid-template-columns:minmax(0,1fr)}
  .bbody,.baside{grid-column:1}
  /* one column, so the two stack — and BOTH rows have to be restated:
     the desktop rule pins each to row 1, which here would lay the
     article straight on top of the contents list */
  .baside{grid-row:1;margin-bottom:clamp(1.4rem,3vh,2.2rem)}
  .bbody{grid-row:2}
  .baside__stick{position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .btoc{grid-column:1/-1}
  .bband__in{grid-template-columns:1fr}
}

@media (max-width:820px){
  .bpn__in{grid-template-columns:1fr}
  .bpn__a--prev{text-align:start}
  .bpn__a--prev .bpn__k{justify-content:flex-start}
  .baside__stick{grid-template-columns:1fr}
}

@media (max-width:760px){
  .bgrid,.bgrid--3{grid-template-columns:1fr}
  .btiles{grid-template-columns:1fr}
  .btn,.link{width:100%}
  /* the toolbar is 3 stacked rows on a phone and would eat a third of
     the screen while sticking */
  .btool{position:static}
  .bshelf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:-.35rem;padding-inline:.35rem;
    scroll-snap-type:x proximity}
  .bshelf::-webkit-scrollbar{display:none}
  .bshelf__c{flex:none;scroll-snap-align:start}
  .bphero__cov .bcov{aspect-ratio:16/10}
  .btop{display:grid}
  /* nothing under 14px on a phone. .875rem IS 14px — the earlier
     pass wrote .8rem, which is 12.8, so the rule was stated and then
     missed. Every value here was measured in a 390px viewport. */
  /* the contents list is a column of links, not inline prose, so its
     rows owe a thumb the full 44 — they measured 33 */
  .btoc__i a{display:flex;align-items:center;min-height:44px}
  .bcard__d,.bmeasure,.bmeasure--sm,.bmeasure--lg{font-size:.875rem}
  .bsearch__hint,.bnowon,.btile__k,.bshare__h{font-size:.875rem}
  .bsearch__l,.bahero__n,.btoc__h,.btoc__i--3 a{font-size:.875rem}
  .bmeta__who small,.bmeta__d,.bmeta__d small{font-size:.875rem}
  .bfeat__new,.bfeat__m,.bchip,.bshelf__c i{font-size:.875rem}
  .bband__n{font-size:.875rem}
  /* and a thumb-sized target on the links that were bare text lines */
  .bchip--link,.bask__go,.brel__all,.bpn__k{min-height:44px;align-items:center}
  .bask__go,.brel__all{display:inline-flex}
  .bbody blockquote{font-size:clamp(1.12rem,4.8vw,1.35rem)}
  .bbody h2{padding-inline-start:.8rem}
}

@media (prefers-reduced-motion:reduce){
  /* the progress line and the lit station are information, not
     decoration: they still update, they just don't animate */
  .bprog i,.btoc__i::before{transition:none}
  .bcov__art svg,.bcov__img{transition:none}
  .btop,.btoast{transition:none}
}

/* ── the metadata floor · phones AND tablets ──────────────────
   The mobile pass above is written for a phone and stops at 760.
   An iPad in portrait is 768 — one pixel past it — so every
   measurement label on the site was still at its desktop size on
   the most common tablet there is, some as small as 10.9px.
   Type size follows the DEVICE, not the layout, so it gets its own
   breakpoint. .875rem is 14px exactly. */
@media (max-width:1024px){
  .bfeat__new,.bfeat__m,.bmeasure,.bmeasure--sm,.bmeasure--lg,
  .bsearch__hint,.bsearch__l,.bcard__d,.btoc__h,.btoc__i--3 a,
  .bshare__h,.bchip,.bahero__n,.bband__n,.bnowon,.btile__k,
  .bshelf__c i,.bmeta__d,.bmeta__d small,.bmeta__who small{font-size:.875rem}
}
/* touch targets follow the INPUT, not the width: a finger on a
   tablet needs the same 44px a finger on a phone does */
@media (max-width:1024px) and (pointer:coarse){
  .btoc__i a{display:flex;align-items:center;min-height:44px}
  .bchip--link,.bask__go,.brel__all{display:inline-flex;align-items:center;min-height:44px}
}