/* ===== Canabuzz — early-2000s Israeli news-portal, RTL ===== */
*{box-sizing:border-box}
:root{
  /* sun-burned / olive-drab palette — desaturated, warm, earthy; no gradients */
  --page:#e5e0d0; --box:#faf7ee; --border:#cec8b2; --border2:#e2dcca;
  --green:#5f6e39; --green-d:#404a24; --green-l:#7a8a4f; --green-soft:#ebe7d5;
  --ink:#26241a; --link:#4c5a26; --muted:#7c765f; --hot:#b1502c; --amber:#a9752a;
  --head-h:#f0ecdd;
}
html,body{margin:0}
body{
  background:var(--page);color:var(--ink);
  font-family:"Heebo",Arial,"Arimo","Segoe UI",Tahoma,sans-serif;
  direction:rtl;text-align:right;font-size:13.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1000px;margin:0 auto;background:var(--box);
  border-inline:1px solid var(--border);min-height:100vh}
.pad{padding:0 14px}

/* ---- top bar ---- */
.topbar{background:var(--green-d);color:#fff;border-bottom:3px solid var(--amber)}
.topbar .in{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:9px 14px}
.logo{display:flex;align-items:center;gap:9px;color:#fff}
.logo:hover{text-decoration:none}
.logo .mk{width:30px;height:30px;fill:#fff}
.logo b{font-size:25px;font-weight:800;letter-spacing:-.5px}
.logo b i{font-style:normal;color:#d7f0c9}
.logo .sl{font-size:11px;color:#cfe8c4;border-inline-start:1px solid rgba(255,255,255,.35);padding-inline-start:10px;font-weight:700}
.topbar .date{margin-inline-start:auto;font-size:12px;color:#e5f3de;font-weight:700;display:flex;align-items:center;gap:6px}
.topbar .date svg{width:13px;height:13px;fill:#cfe8c4}
@media(max-width:560px){.logo .sl,.topbar .date{display:none}}

/* ---- nav tabs ---- */
.tabs{background:var(--green-d);display:flex;flex-wrap:wrap;padding:0 8px}
.tabs a{color:#eafae3;font-weight:700;font-size:13px;padding:8px 14px;border-inline-start:1px solid rgba(255,255,255,.08)}
.tabs a:first-child{border:0}
.tabs a:hover{background:rgba(0,0,0,.18);text-decoration:none}
.tabs a.on{background:var(--amber);color:#231600}

/* ---- ticker ---- */
.ticker{display:flex;align-items:center;gap:10px;background:var(--green-soft);
  border-bottom:1px solid var(--border);padding:6px 14px;font-size:12.5px;overflow:hidden;white-space:nowrap}
.ticker .lb{background:var(--hot);color:#fff;font-weight:800;padding:2px 9px;border-radius:2px;flex:none;font-size:11.5px}
.ticker .items{display:flex;gap:22px;color:#333;font-weight:600}
.ticker .items b{color:var(--hot)}

/* ---- layout ---- */
/* Content must be capped and centred to match the 1000px masthead/footer — without a
   max-width the article sprawled the full monitor width and sat out of alignment with
   the header, which is what made wide screens look amateurish. The 1fr column then
   lands at ~700px, a good reading measure on its own (no ch-based cap needed). */
.grid{display:grid;grid-template-columns:1fr 262px;gap:18px;padding:16px 14px;
  max-width:1000px;margin:0 auto}
@media(max-width:820px){.grid{grid-template-columns:1fr}}

/* ---- box / section header bar ---- */
.box{border:1px solid var(--border);background:var(--box);margin-bottom:16px}
.box>.hd{background:var(--green);color:#fff;
  font-weight:800;font-size:14px;padding:6px 11px;display:flex;align-items:center;gap:7px}
.box>.hd svg{width:15px;height:15px;fill:#fff}
.box>.hd .mini{margin-inline-start:auto;font-size:11px;font-weight:700;color:#dff2d8}
.box>.bd{padding:11px}

/* ---- lead story ---- */
.lead{border:1px solid var(--border);background:var(--box);margin-bottom:16px}
.lead .cat{display:inline-flex;align-items:center;gap:6px;background:var(--hot);color:#fff;
  font-weight:800;font-size:11.5px;padding:3px 10px}
.lead .cat svg{width:12px;height:12px;fill:#fff}
.lead .row{display:grid;grid-template-columns:200px 1fr;gap:0}
@media(max-width:620px){.lead .row{grid-template-columns:1fr}}
.thumb{background:var(--green-d);position:relative;min-height:150px;overflow:hidden}
.thumb svg{position:absolute;width:120px;height:120px;fill:rgba(255,255,255,.13);top:50%;right:50%;transform:translate(50%,-50%)}
.thumb .tag{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:700;padding:2px 8px}
.lead .txt{padding:14px 16px}
.lead h1{margin:2px 0 8px;font-size:24px;font-weight:800;line-height:1.25;color:#141414}
.lead h1 a{color:inherit}
.lead p{margin:0 0 10px;color:#333;font-size:14px;line-height:1.6}
.lead .more{color:var(--link);font-weight:800;font-size:13px}

/* ---- headline list ---- */
.hlist{list-style:none;margin:0;padding:0}
.hlist li{border-bottom:1px dotted var(--border);padding:9px 2px;display:flex;gap:9px;align-items:flex-start}
.hlist li:last-child{border-bottom:0}
.hlist .bul{flex:none;margin-top:3px}
.hlist .bul svg{width:13px;height:13px;fill:var(--green-l)}
.hlist .c{flex:1;min-width:0}
.hlist a.t{font-weight:700;font-size:14.5px;color:#1a1a1a;display:block;line-height:1.35}
.hlist a.t:hover{color:var(--link)}
.hlist .ex{color:#555;font-size:12.5px;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hlist .mt{color:var(--muted);font-size:11.5px;font-weight:600;margin-top:4px;display:flex;align-items:center;gap:5px}
.hlist .mt svg{width:11px;height:11px;fill:var(--muted)}
.hlist .mt .cat{color:var(--green-d);font-weight:800}
.new{background:var(--hot);color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:2px}

/* ---- sidebar ---- */
.side .box>.bd{padding:6px 11px 10px}
.rank{list-style:none;margin:0;padding:0;counter-reset:r}
.rank li{counter-increment:r;display:flex;gap:9px;padding:8px 0;border-bottom:1px dotted var(--border);align-items:flex-start}
.rank li:last-child{border-bottom:0}
.rank li::before{content:counter(r);flex:none;width:20px;height:20px;background:var(--green-soft);
  color:var(--green-d);font-weight:800;font-size:12px;display:grid;place-items:center;border:1px solid var(--border)}
.rank li:nth-child(-n+3)::before{background:var(--green);color:#fff;border-color:var(--green-d)}
.rank a{font-weight:700;font-size:13px;color:#222;line-height:1.35}
.rank a:hover{color:var(--link)}
.cats{list-style:none;margin:0;padding:0}
.cats li{border-bottom:1px dotted var(--border)}
.cats li:last-child{border-bottom:0}
.cats a{display:flex;align-items:center;gap:8px;padding:8px 2px;font-weight:700;font-size:13.5px;color:#222}
.cats a:hover{color:var(--link)}
.cats svg{width:16px;height:16px;fill:var(--green)}
.promo{background:var(--green-soft);border:1px solid var(--border);padding:13px;text-align:center}
.promo svg{width:30px;height:30px;fill:var(--green);margin-bottom:6px}
.promo b{display:block;font-size:14px;color:var(--green-d)}
.promo span{font-size:12px;color:#555}

/* ---- category page header ---- */
.cathead{display:flex;align-items:center;gap:10px;border-bottom:3px solid var(--green);
  margin-bottom:14px;padding-bottom:8px}
.cathead .ttl{display:flex;align-items:center;gap:9px}
.cathead .ttl svg{width:26px;height:26px;fill:var(--green)}
.cathead h1{margin:0;font-size:24px;font-weight:800;color:var(--green-d);letter-spacing:-.5px}
.cathead .cnt{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--muted);
  background:var(--green-soft);border:1px solid var(--border);padding:3px 10px}
.article a.catbar:hover{text-decoration:none;filter:brightness(1.08)}
.hlist .mt a.cat:hover,.cats a.sel{color:var(--link)}
.cats a.sel{background:var(--green-soft);font-weight:800}

/* ---- breadcrumb ---- */
.crumb{padding:9px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border2);background:var(--head-h)}
.crumb.pad{max-width:1000px;margin:0 auto}   /* align with the 1000px grid/masthead */
.crumb a{font-weight:700}
.crumb b{color:#333}

/* ---- article ---- */
/* the story is the product: a real card, but the text should USE the column —
   a max-width measure here only stacked padding inside padding */
.article{background:var(--box);border:1px solid var(--border);padding:16px 18px 14px;margin-bottom:14px}
.article .catbar{display:inline-flex;align-items:center;gap:6px;background:var(--hot);color:#fff;
  font-weight:800;font-size:12px;padding:4px 12px}
.article .catbar svg{width:13px;height:13px;fill:#fff}
.article h1{font-size:34px;font-weight:800;line-height:1.2;margin:14px 0 12px;color:#0d0d0d;letter-spacing:-.6px}
.article .byl{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12.5px;font-weight:700;
  border-bottom:1px solid var(--border);border-top:1px solid var(--border2);padding:8px 0;margin-bottom:0}
.article .byl svg{width:13px;height:13px;fill:var(--muted)}
.article .byl .who{color:var(--green-d);font-weight:800}
.article .byl .role{color:var(--muted);font-weight:600;border-inline-start:1px solid var(--border);padding-inline-start:9px}
.srcbox{display:flex;align-items:center;gap:8px;margin:18px 0 2px;padding:9px 12px;
  background:var(--green-soft);border:1px solid var(--border);border-inline-start:3px solid var(--green);
  font-size:13px;color:var(--ink)}
.srcbox svg{width:15px;height:15px;fill:var(--green);flex:none}
.srcbox a{font-weight:700;color:var(--link);text-decoration:underline}
.article .hero{background:var(--green-d);height:160px;position:relative;overflow:hidden;margin:14px 0}
.article .hero svg{position:absolute;width:150px;height:150px;fill:rgba(255,255,255,.12);top:50%;right:50%;transform:translate(50%,-50%)}
/* Body copy is a Hebrew editorial serif at a real reading size — this is the single
   biggest lever on whether a page feels like a publication or a blog. */
.prose p{font-family:"Frank Ruhl Libre",Georgia,"Times New Roman",serif;
  font-size:18.5px;line-height:1.92;margin:0 0 20px;color:#1f1f1f;letter-spacing:.1px}
.prose p:first-of-type{font-size:19.5px;color:#141414}
.prose p:first-of-type::first-letter{font-size:52px;font-weight:700;color:var(--green-d);
  float:right;line-height:.86;margin:4px 0 0 8px;font-family:"Frank Ruhl Libre",Georgia,serif}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{font-weight:700;color:#111}
.share{display:flex;gap:8px;align-items:center;margin:18px 0 4px;padding-top:12px;border-top:1px solid var(--border2);flex-wrap:wrap}
.share span{font-size:12px;color:var(--muted);font-weight:700}
.share a,.share button{width:30px;height:30px;border:1px solid var(--border);display:grid;place-items:center;
  background:var(--head-h);padding:0;cursor:pointer}
.share a:hover,.share button:hover{background:var(--green-soft)}
.share svg{width:15px;height:15px;fill:var(--green-d)}
.share .copied{color:var(--green);font-weight:700;font-size:11.5px}
.tagrow{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.tagrow a{background:var(--green-soft);border:1px solid var(--border);color:var(--green-d);
  font-weight:700;font-size:12px;padding:3px 10px}

/* ---- footer ---- */
.foot{background:var(--green-d);color:#cfe6c8;margin-top:8px}
.foot .in{max-width:1000px;margin:0 auto;padding:16px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.foot .logo b{font-size:19px}
.foot small{color:#9ec39a;font-size:12px}
.empty{text-align:center;color:var(--muted);padding:70px 14px;font-size:15px}

/* ---- a11y + legal + cookie ---- */
.skip{position:absolute;right:-999px;top:8px;background:var(--green-d);color:#fff;padding:8px 16px;z-index:100;font-weight:700}
.skip:focus{right:8px}
a:focus-visible,button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.foot .flinks{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
.foot .flinks a{color:#dbeed4;font-weight:600}
.foot .flinks a:hover{color:#fff}
.cookie{position:fixed;bottom:0;right:0;left:0;background:#1c2a1d;color:#e6f0e2;z-index:90;
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:12px 16px;font-size:13px;border-top:3px solid var(--amber)}
.cookie a{color:#bfe3b3;font-weight:700;text-decoration:underline}
.cookie button{background:var(--amber);color:#231600;border:0;font-weight:800;padding:8px 20px;cursor:pointer;font-size:13px}
.cookie button:hover{background:#d99a3a}
.page{max-width:760px;margin:0 auto;padding:6px 0 40px}
.page h1{font-size:26px;font-weight:800;margin:16px 0 6px;color:#141414}
.page .upd{color:var(--muted);font-size:12.5px;margin-bottom:18px;border-bottom:1px solid var(--border);padding-bottom:14px}
.page h2{font-size:17px;font-weight:800;color:var(--green-d);margin:22px 0 6px}
.page p,.page li{font-size:14.5px;line-height:1.75;color:#2a2a2a;margin:0 0 10px}
.page ul{margin:0 0 12px;padding-inline-start:20px}

/* ===== ai-news (בינה) — tech blue theme, overrides the olive palette ===== */
.ch-ai-news{
  --page:#e6ebf1; --box:#fbfcfe; --border:#c4cfdd; --border2:#dde4ee;
  --green:#2b4a6f; --green-d:#1a3050; --green-l:#3f6598; --green-soft:#e9eff7;
  --ink:#1a2230; --link:#274a72; --muted:#68748a; --hot:#c2410c; --amber:#0e7490;
  --head-h:#eef2f8;
}
/* hardcoded olive-greens that the var overrides above don't reach -> repaint blue */
.ch-ai-news .logo b i{color:#bfe0ff}
.ch-ai-news .logo .sl{color:#bcd4ee}
.ch-ai-news .topbar .date{color:#d6e6f7}
.ch-ai-news .topbar .date svg{fill:#bcd4ee}
.ch-ai-news .tabs a{color:#e6f0fb}
.ch-ai-news .box>.hd .mini{color:#d3e3f5}
.ch-ai-news .foot{color:#c8d8ea}
.ch-ai-news .foot small{color:#93a9c3}
.ch-ai-news .foot .flinks a{color:#d4e4f5}
.ch-ai-news .foot .flinks a:hover{color:#fff}
.ch-ai-news .cookie{background:#14202f;color:#dce8f5}
.ch-ai-news .cookie a{color:#bfe0ff}
.ch-ai-news .cookie button:hover{background:#1596b3}

/* ===== generated hero art (images/article_images.py -> static/articles/<id>.png) ===== */
.article .hero.has-img{height:auto;aspect-ratio:16/9;background:var(--green-d);border:1px solid var(--border)}
.article .hero.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* list thumbnails — the art is what earns the click, so every headline gets one */
.hlist .th{flex:none;display:block;overflow:hidden;background:var(--green-d);
  border:1px solid var(--border);line-height:0}
.hlist .th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease}
.hlist .th:hover img{transform:scale(1.06)}
.main .hlist .th{width:104px;height:62px}
.side .hlist .th{width:66px;height:42px}        /* sidebar column is only 262px */
@media(max-width:600px){
  .article .hero.has-img{aspect-ratio:16/10}
  .main .hlist .th{width:84px;height:52px}
}
@media(max-width:400px){.main .hlist .th{width:72px;height:46px}}

/* ===== mobile: tighter margins/padding, fluid type, no horizontal overflow ===== */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
h1,h2,.lead h1,.article h1,.hlist a.t,.rank a,.cats a,.prose p,.crumb b,.byl .who{overflow-wrap:break-word}
img,svg,video{max-width:100%}
@media(max-width:600px){
  body{font-size:13px}
  .grid{padding:10px 9px;gap:12px}       /* article carries its own padding now */
  .pad{padding:0 11px}
  .topbar .in{padding:8px 11px}
  .article{padding:15px 16px 14px}       /* ~25px from the screen edge in total */
  .prose{max-width:none}
  .prose p{font-size:17.5px;line-height:1.85;margin:0 0 17px}
  .prose p:first-of-type{font-size:18px}
  .prose p:first-of-type::first-letter{font-size:42px}
  .article h1{font-size:25px;margin:10px 0 9px;letter-spacing:-.4px}
  .lead h1{font-size:20px}
  .lead .txt{padding:12px 13px}
  .cathead h1{font-size:20px}
  .prose p{font-size:15px;line-height:1.8;margin:0 0 14px}
  .prose p:first-of-type::first-letter{font-size:26px}
  .article .hero{height:120px;margin:12px 0}
  .article .hero svg{width:110px;height:110px}
  .thumb{min-height:120px}
  .hlist a.t{font-size:14px}
  .share a{width:36px;height:36px}   /* larger tap targets on touch */
  .share svg{width:16px;height:16px}
  .foot .in{gap:10px;padding:14px 11px}
  .cookie{padding:11px 13px;font-size:12.5px}
  .cookie button{padding:8px 16px}
}
@media(max-width:400px){
  .article h1{font-size:20px}
  .lead h1{font-size:18.5px}
  .tabs a{padding:7px 10px;font-size:12.5px}
  .box>.hd{font-size:13px}
}

/* ===== finance (Ledger) — English, LEFT-TO-RIGHT (the two Hebrew sites are RTL) ===== */
body.ch-finance{ direction:ltr; text-align:left;
  --page:#eef2ef; --box:#fbfdfb; --border:#c7d4cb; --border2:#dde7e0;
  --green:#2c6a4f; --green-d:#0f3d2e; --green-l:#3f8a68; --green-soft:#e6efe9;
  --ink:#16241d; --link:#1f5f45; --muted:#6a7c73; --hot:#b1502c; --amber:#b8862f;
  --head-h:#eef4f0; }
.ch-finance .topbar .date{ margin-inline-start:0; margin-inline-end:auto }
.ch-finance .logo .sl{ border-inline-start:0; border-inline-end:1px solid rgba(255,255,255,.35);
  padding-inline-start:0; padding-inline-end:10px }
.ch-finance .prose p:first-of-type::first-letter{ float:left; margin-inline-start:0; margin-inline-end:8px }
.ch-finance .foot .flinks a, .ch-finance .tabs a{ direction:ltr }
.ch-finance .logo b i{ color:#bfe8d2 }