:root{
  --ground:#f2f5f0; --surface:#ffffff; --sunk:#e6ece3;
  --ink:#121a14; --ink-soft:#44544a; --ink-faint:#5b6b5c;
  --rule:#d5ded1; --rule-firm:#b4c1b0;
  --leaf:#22603f; --leaf-soft:#e0eee5;
  --sun:#8f4f08; --sun-soft:#f8ecda;
  --ok:#2c6b42; --ok-soft:#e0eee5;
  --shadow:0 1px 2px rgba(16,26,19,.08);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0c120e; --surface:#141c17; --sunk:#080d0a;
    --ink:#e4ebe5; --ink-soft:#a5b4a9; --ink-faint:#77857b;
    --rule:#212b24; --rule-firm:#354338;
    --leaf:#6cc492; --leaf-soft:#11281c;
    --sun:#e0a45c; --sun-soft:#291f12;
    --ok:#7cc793; --ok-soft:#11281c;
    --shadow:0 1px 2px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#0c120e; --surface:#141c17; --sunk:#080d0a;
  --ink:#e4ebe5; --ink-soft:#a5b4a9; --ink-faint:#77857b;
  --rule:#212b24; --rule-firm:#354338;
  --leaf:#6cc492; --leaf-soft:#11281c;
  --sun:#e0a45c; --sun-soft:#291f12;
  --ok:#7cc793; --ok-soft:#11281c;
  --shadow:0 1px 2px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  background:var(--ground); color:var(--ink);
  font-family:Literata,Georgia,"Times New Roman",serif;
  font-size:16.5px; line-height:1.68; margin:0; padding:0 20px 90px;
}
body[dir="rtl"]{font-family:"Noto Serif Hebrew",David,Georgia,serif}
.wrap{max-width:900px;margin:0 auto}
.mono,code{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-ligatures:none;direction:ltr;unicode-bidi:embed}
code{font-size:.88em;background:var(--sunk);padding:1px 5px;border-radius:2px}
h1,h2,h3,.ui,nav,table,.card,.btn,.tag,.pill{font-family:Archivo,system-ui,-apple-system,sans-serif}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3,body[dir="rtl"] nav,
body[dir="rtl"] table,body[dir="rtl"] .card,body[dir="rtl"] .btn,body[dir="rtl"] .tag,body[dir="rtl"] .pill{
  font-family:"Noto Sans Hebrew",Arial,system-ui,sans-serif}
a{color:var(--leaf)}
p{max-width:68ch}

nav.top{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--rule);font-size:14px;
}
nav.top a{text-decoration:none;color:var(--ink-soft);font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
nav.top a:hover{color:var(--leaf)}
nav.top a.here{color:var(--leaf);font-weight:600}
nav.top .sp{flex:1}
@media (max-width:640px){nav.top .sp{display:none}nav.top{gap:6px 14px}nav.top .lang{margin-inline-start:auto}}
nav.top .lang{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--rule-firm);padding:9px 12px;border-radius:2px;
}

header.hero{
  padding:44px 0 28px;border-bottom:2px solid var(--ink);margin-bottom:36px;
  position:relative;isolation:isolate;
}
/* faint photovoltaic cell grid — the subject's own geometry, not decoration */
header.hero::before{
  content:"";position:absolute;inset:-10px -20px 0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(to right,transparent 0 47px,var(--leaf) 47px 48px),
    repeating-linear-gradient(to bottom,transparent 0 47px,var(--leaf) 47px 48px);
  opacity:.07;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leaf);margin:0 0 14px}
body[dir="rtl"] .eyebrow{font-family:"Noto Sans Hebrew",Arial,sans-serif;letter-spacing:.04em}
h1{font-weight:700;font-size:clamp(30px,5.2vw,48px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 16px;text-wrap:balance}
body[dir="rtl"] h1{letter-spacing:0}
.standfirst{font-size:19px;color:var(--ink-soft);max-width:60ch;margin:0 0 22px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 10px}
.tag{font-size:12px;letter-spacing:.03em;padding:4px 10px;border-radius:2px;
  background:var(--sunk);color:var(--ink-soft);font-weight:500}
.tag.new{background:var(--ok-soft);color:var(--ok)}

section{margin:0 0 50px}
h2{font-weight:700;font-size:26px;letter-spacing:-.01em;margin:0 0 6px;text-wrap:balance}
body[dir="rtl"] h2{letter-spacing:0}
h3{font-weight:600;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);margin:28px 0 10px}
body[dir="rtl"] h3{letter-spacing:0;text-transform:none;font-size:17px}
.sub{color:var(--ink-soft);margin:0 0 22px;max-width:66ch;font-size:16px}

.callout{background:var(--surface);border:1px solid var(--rule-firm);
  border-inline-start:3px solid var(--leaf);border-radius:3px;padding:20px 22px;
  box-shadow:var(--shadow);margin:0 0 8px}
.callout .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px}
.callout h3{margin:0 0 8px;font-size:19px;text-transform:none;letter-spacing:-.01em;
  color:var(--ink);font-weight:700}
.callout p{margin:0 0 14px;font-size:15.5px;color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:14px;
  background:var(--leaf);color:var(--ground);text-decoration:none;padding:9px 20px;border-radius:2px}
.btn:hover{filter:brightness(1.1)}
.btn:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

.scroll{overflow-x:auto;margin:0 0 10px}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:480px}
th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);text-align:start;font-weight:500;
  padding:0 14px 8px 0;border-bottom:1px solid var(--rule-firm)}
body[dir="rtl"] th{font-family:"Noto Sans Hebrew",Arial,sans-serif;letter-spacing:0;
  text-transform:none;font-size:12px;padding:0 0 8px 14px}
td{padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
body[dir="rtl"] td{padding:10px 0 10px 14px}
tr:last-child td{border-bottom:0}
td.m,th.m{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  white-space:nowrap;direction:ltr;unicode-bidi:embed}
td.off{color:var(--leaf);font-weight:500}
.pill{display:inline-block;font-size:11px;letter-spacing:.04em;padding:2px 8px;border-radius:2px}
.pill.new{background:var(--ok-soft);color:var(--ok)}
.pill.known{background:var(--sunk);color:var(--ink-faint)}

pre{background:var(--sunk);border:1px solid var(--rule);border-radius:2px;padding:15px 17px;
  overflow-x:auto;font-family:"IBM Plex Mono",monospace;font-size:13.5px;line-height:1.6;
  margin:0 0 10px;direction:ltr;text-align:left}

.disclosure{font-size:13.5px;color:var(--ink-soft);background:var(--sun-soft);
  border-inline-start:3px solid var(--sun);padding:11px 15px;border-radius:2px;
  margin:0 0 22px;max-width:68ch}
.grid{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 10px;justify-content:center}
.grid>.card{flex:0 1 calc(33.333% - 10px);min-width:215px}
@media (max-width:760px){.grid>.card{flex:0 1 calc(50% - 7px);min-width:200px}}
@media (max-width:520px){.grid>.card{flex:1 1 100%;min-width:0;max-width:none}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:15px 16px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow)}
.card .role{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sun);font-weight:700}
body[dir="rtl"] .card .role{letter-spacing:0;text-transform:none;font-size:12px}
.card .name{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
.card .why{font-size:13.5px;color:var(--ink-soft);line-height:1.5;flex:1}
.card .foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-top:9px;border-top:1px solid var(--rule)}
.card .price{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;direction:ltr}
.card a{font-size:13px;font-weight:600;text-decoration:none;color:var(--leaf);white-space:nowrap}
.card a:hover{text-decoration:underline}
.card a:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

.note{font-size:15px;color:var(--ink-soft);border-inline-start:2px solid var(--leaf);
  padding:3px 0;padding-inline-start:15px;margin:20px 0 0;max-width:66ch}
.note.warn{border-inline-start-color:var(--sun)}
ul.plain{max-width:66ch;padding-inline-start:20px}
ul.plain li{margin:0 0 8px}

.cards-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:14px}
a.tile{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:18px 20px;text-decoration:none;box-shadow:var(--shadow)}
a.tile:hover{border-color:var(--leaf)}
a.tile .t{font-weight:700;font-size:17px;color:var(--ink);display:block;margin:0 0 6px}
a.tile .d{font-size:14px;color:var(--ink-soft);line-height:1.5}

footer{border-top:1px solid var(--rule);margin-top:20px;padding-top:22px;
  color:var(--ink-faint);font-size:13.5px}
footer p{max-width:70ch;margin:0 0 10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- product cards with imagery ---------- */
.card{padding:0;overflow:hidden}
.card .thumb{
  display:block;background:#fff;aspect-ratio:1/1;width:100%;
  border-bottom:1px solid var(--rule);
}
.card .thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:8px}
.card .body{padding:14px 16px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .foot{margin-top:auto}
.card .cta{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  text-align:center;background:var(--sun);color:#fff;
  font-weight:700;font-size:13.5px;text-decoration:none;
  padding:9px 12px;border-radius:2px;margin-top:4px;
}
:root[data-theme="dark"] .card .cta,
:root:not([data-theme="light"]) .card .cta{color:#1a1206}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .card .cta{color:#fff}}
.card .cta:hover{filter:brightness(1.08)}
.card .cta:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}

/* ---------- inline in-article buy strip ---------- */
.buyrow{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--rule-firm);
  border-inline-start:3px solid var(--sun);
  border-radius:3px;padding:14px 16px;margin:22px 0;box-shadow:var(--shadow);
  max-width:68ch;
}
.buyrow img{width:74px;height:74px;object-fit:contain;background:#fff;border-radius:2px;flex:none}
.buyrow .txt{flex:1;min-width:170px}
.buyrow .lbl{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sun);font-weight:700;display:block;margin-bottom:3px}
body[dir="rtl"] .buyrow .lbl{letter-spacing:0;text-transform:none;font-size:12.5px}
.buyrow .nm{font-weight:600;font-size:15px;display:block;line-height:1.35;color:var(--ink)}
.buyrow .ds{font-size:13.5px;color:var(--ink-soft);display:block;margin-top:3px;line-height:1.5}
.buyrow .act{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.buyrow .pr{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:16px;direction:ltr}
.buyrow .go{
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--sun);color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;
  padding:8px 18px;border-radius:2px;white-space:nowrap;
}
.buyrow .go:hover{filter:brightness(1.08)}
.buyrow .go:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}

/* ---------- photography ---------- */
.band{
  display:block;width:100%;border-radius:4px;overflow:hidden;
  margin:0 0 34px;border:1px solid var(--rule);background:var(--sunk);
  box-shadow:var(--shadow);
}
.band img{display:block;width:100%;object-fit:cover}
.band img{height:clamp(150px,26vw,290px)}
.band figcaption{
  font-size:12.5px;color:var(--ink-faint);padding:8px 14px;
  border-top:1px solid var(--rule);background:var(--surface);
}
.trio{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:12px;margin:0 0 34px;
}
.trio figure{
  margin:0;border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.trio img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#fff}
.trio figure.product img{object-fit:contain;padding:10px}
.band img,.card .thumb img,.buyrow img{height:auto}
.trio figcaption{
  font-size:13px;color:var(--ink-soft);padding:9px 12px;line-height:1.45;
  border-top:1px solid var(--rule);
}
.trio figcaption b{color:var(--ink);font-weight:600;display:block;font-size:13.5px}
.credits{font-size:12.5px;color:var(--ink-faint);line-height:1.6}
.credits a{color:var(--ink-soft)}

.card .cta,.buyrow .go,.btn,nav.top a,a.tile{transition:background-color .18s ease,color .18s ease,border-color .18s ease,filter .18s ease}

/* ---------- cookie consent ---------- */
.cc{
  position:fixed;inset-inline:0;bottom:0;z-index:9999;
  background:var(--surface);border-top:2px solid var(--leaf);
  box-shadow:0 -4px 18px rgba(16,26,19,.14);
  padding:16px 20px;
}
:root[data-theme="dark"] .cc,:root:not([data-theme="light"]) .cc{box-shadow:0 -4px 18px rgba(0,0,0,.5)}
.cc[hidden]{display:none!important}
.cc-in{
  max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;
  gap:14px 22px;align-items:center;justify-content:space-between;
}
.cc-txt{flex:1 1 340px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.cc-txt b{color:var(--ink);font-weight:600}
.cc-txt a{color:var(--leaf)}
.cc-btns{display:flex;gap:10px;flex-wrap:wrap}
.cc-btns button{
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  min-height:44px;min-width:118px;padding:10px 20px;border-radius:2px;
  border:1px solid var(--rule-firm);background:var(--ground);color:var(--ink);
  transition:background-color .18s ease,border-color .18s ease;
}
.cc-btns button:hover{border-color:var(--leaf)}
.cc-btns button:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
/* accept and decline carry equal visual weight, as consent rules require */
.cc-btns .cc-yes{background:var(--leaf);border-color:var(--leaf);color:var(--ground)}
.cc-btns .cc-yes:hover{filter:brightness(1.1)}
/* Never let the banner swallow the page */
.cc{max-height:62vh;overflow-y:auto}
@media (max-width:560px){
  .cc{padding:13px 16px}
  .cc-in{flex-direction:column;align-items:stretch;gap:12px}
  /* flex-basis is the MAIN axis: 340px was a width in a row, but becomes a
     minimum HEIGHT once the container turns into a column. Reset it. */
  .cc-txt{flex:0 0 auto;font-size:13.5px;line-height:1.5}
  .cc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cc-btns button{width:100%;min-width:0}
}
.cc-reopen{background:none;border:0;padding:0;font:inherit;color:var(--ink-soft);
  text-decoration:underline;cursor:pointer}
.cc-reopen:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}