
/* Photographs an owner sent us. One row that wraps on a phone,
   cropped to a common height so a page of them reads as a set. */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.shots img{width:100%;height:170px;object-fit:cover;border-radius:10px;
border:1px solid var(--line);display:block}
.shots .fine{grid-column:1/-1;margin:2px 0 0}
:root{color-scheme:light dark;
--ink:#131c2a;--ink-soft:#33405a;--bg:#f2f4f8;--card:#fff;--card-2:#f8fafc;
--muted:#4d5871;--faint:#78849c;
--brand:#8a5a12;--brand-ink:#6f480e;--brand-bg:#f7efdd;
--ok:#0f7a4d;--ok-bg:#e6f4ec;
--line:#dde2ea;--line-soft:#e9edf3;
--shadow:0 1px 2px rgba(19,28,42,.05),0 6px 20px -10px rgba(19,28,42,.16);
--shadow-lift:0 2px 4px rgba(19,28,42,.06),0 14px 34px -14px rgba(19,28,42,.28);
--radius:14px;
/* The hand-written pages — join, terms, privacy, 404, ns — were styled
   against the old green palette and use its names throughout. Aliasing the
   names onto the new tokens converts them without touching a rule in them,
   which is the difference between one edit here and five pages that drift
   apart again the next time a colour changes. */
--green:var(--brand);--green-ink:var(--brand-ink);--wash:var(--brand-bg)}
@media(prefers-color-scheme:dark){:root{
--ink:#e9edf5;--ink-soft:#c2cbdb;--bg:#0b111c;--card:#151d2b;--card-2:#1a2333;
--muted:#a4afc4;--faint:#7c889f;
--brand:#d9a445;--brand-ink:#e9c07a;--brand-bg:#2b2417;
--ok:#4cc38a;--ok-bg:#16281f;
--line:#28324481;--line-soft:#222b3a;
--shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px -10px rgba(0,0,0,.6);
--shadow-lift:0 2px 4px rgba(0,0,0,.5),0 14px 34px -14px rgba(0,0,0,.75)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;
font-family:"Assistant","Noto Sans Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility}
main{max-width:860px;margin:0 auto;padding:0 20px 80px}
a{color:var(--brand-ink);text-underline-offset:2px}

/* Header. Same four places on every page, so nothing is more than one click
   from anything, for a reader and for a crawler alike. */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);
backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line-soft)}
.topin{max-width:860px;margin:0 auto;padding:11px 20px;display:flex;
align-items:center;gap:18px;flex-wrap:wrap}
.wordmark{font-weight:800;letter-spacing:-.03em;font-size:1.06rem;
text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.wordmark i{width:9px;height:9px;border-radius:2px;background:var(--brand);
display:inline-block;font-style:normal}
.nav{display:flex;gap:16px;margin-inline-start:auto;flex-wrap:wrap}
.nav a{font-size:.87rem;text-decoration:none;color:var(--muted);font-weight:600}
.nav a:hover{color:var(--brand-ink)}
.nav a[aria-current]{color:var(--ink)}

h1{font-size:clamp(1.9rem,5.5vw,2.85rem);line-height:1.08;margin:44px 0 12px;
letter-spacing:-.035em;font-weight:800}
h2{font-size:1.2rem;margin:40px 0 12px;letter-spacing:-.02em;font-weight:700}
h2 .c{font-weight:400;color:var(--faint);font-size:.8rem;letter-spacing:0}
h2 .c a{color:var(--brand-ink)}
p{margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 16px;max-width:68ch;font-size:1.02rem}
.lead b{color:var(--ink);font-weight:600}

/* Numbers get to be the only thing that looks like a number. */
.band{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;margin:26px 0 30px;box-shadow:var(--shadow)}
@media(min-width:660px){.band{grid-template-columns:repeat(4,1fr)}}
.band div{background:var(--card);padding:16px 18px}
.band .n{display:block;font-size:1.75rem;font-weight:800;line-height:1.05;
font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.band .l{display:block;font-size:.78rem;color:var(--faint);margin-top:3px;
font-weight:600}

.card{display:block;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:16px 18px;margin:0 0 10px;
text-decoration:none;color:inherit;box-shadow:var(--shadow);
transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.card:hover{border-color:var(--brand);transform:translateY(-1px);
box-shadow:var(--shadow-lift)}
.card b{color:var(--ink);font-size:1.06rem;font-weight:700;letter-spacing:-.015em}
.card p{margin:5px 0 4px;font-size:.91rem;color:var(--muted)}

.tag{font-size:.74rem;background:var(--brand-bg);color:var(--brand-ink);
border-radius:99px;padding:2px 10px;margin-inline-start:8px;
vertical-align:middle;font-weight:600}
.n{font-size:.8rem;color:var(--faint)}
.up{display:inline-block;margin:24px 0 8px;color:var(--brand-ink);
font-size:.86rem;text-decoration:none;font-weight:600}
.up:hover{text-decoration:underline}
.roll{background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:15px 17px;margin:0 0 8px;font-size:.94rem;
box-shadow:var(--shadow)}
.roll a{color:var(--brand-ink);text-decoration:none}
.roll a:hover{text-decoration:underline}
code{background:var(--brand-bg);color:var(--brand-ink);border-radius:4px;
padding:1px 6px;direction:ltr;display:inline-block;font-size:.85rem;
font-family:ui-monospace,Menlo,Consolas,monospace}
footer{color:var(--faint);font-size:.83rem;margin-top:48px;
border-top:1px solid var(--line);padding-top:18px}
footer a{color:var(--faint)}

main.store{max-width:760px;padding-top:8px}
.head{display:flex;gap:16px;align-items:flex-start;margin:0 0 10px}
.head h1{font-size:clamp(1.55rem,4.5vw,2.1rem);margin:0 0 4px}
.logo{flex:0 0 66px;width:66px;height:66px;object-fit:contain;
background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:6px;box-shadow:var(--shadow)}
.sub{color:var(--muted);font-size:.9rem;margin:0 0 18px}
.sub a{color:var(--brand-ink)}
.tags{margin:0 0 16px}
.tags .tag{margin-inline-start:0;margin-inline-end:6px;margin-bottom:6px;
display:inline-block;border:1px solid var(--brand);font-size:.78rem;padding:3px 11px}
.intro{background:var(--brand-bg);border:1px solid var(--brand);
border-radius:var(--radius);padding:15px 17px;margin:0 0 16px;font-size:.9rem;
color:var(--brand-ink)}
.intro b{color:var(--ink)}
section{background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:16px 18px;margin:0 0 12px;
box-shadow:var(--shadow)}
section h2{font-size:1.05rem;margin:0 0 10px;color:var(--ink)}
section ul{margin:0;padding-inline-start:20px}
section li{margin:4px 0}
.facts{display:grid;gap:10px}
.f{display:flex;gap:14px;align-items:baseline;
border-bottom:1px dashed var(--line);padding-bottom:9px}
.f:last-child{border:0;padding-bottom:0}
.f span{flex:0 0 104px;color:var(--faint);font-size:.83rem;font-weight:600}
.f b{font-weight:600;font-size:.93rem}
.item{display:flex;gap:12px;align-items:flex-start;list-style:none;
padding:9px 0;border-bottom:1px solid var(--line-soft)}
.item:last-child{border:0}
.item img{flex:0 0 54px;width:54px;height:54px;object-fit:cover;
border-radius:9px;background:var(--bg)}
.item a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.94rem}
.item a:hover{text-decoration:underline}
.item b{color:var(--brand-ink);font-size:.92rem}
section > ul:has(.item){padding-inline-start:0}
.btns{display:flex;flex-wrap:wrap;gap:9px}
.btn{display:inline-block;background:var(--brand-bg);border:1px solid var(--brand);
border-radius:11px;padding:10px 15px;text-decoration:none;font-weight:700;
font-size:.9rem;color:var(--brand-ink);transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.note{font-size:.86rem;color:var(--muted);margin:0 0 10px}
.offer{background:var(--brand-bg);border:1px solid var(--brand);
border-radius:13px;padding:14px 17px}
.offer h2{margin-top:0;color:var(--brand-ink)}
.offer p{margin:0 0 6px}
.machine{font-size:.84rem;color:var(--muted);margin-top:20px;
border-top:1px solid var(--line);padding-top:16px}
.machine code{background:var(--card);border:1px solid var(--line);
border-radius:5px;padding:1px 6px;direction:ltr;display:inline-block}
.rep{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.rep a{color:var(--muted)}
.revs{margin-top:34px}
.revs .revhead{font-size:.87rem;color:var(--muted);margin:0 0 12px}
.revlist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rev{background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:13px 16px;box-shadow:var(--shadow)}
.rev blockquote{margin:0 0 8px;font-size:.95rem;line-height:1.55}
.rev .who{font-size:.82rem;color:var(--faint);display:flex;flex-wrap:wrap;
gap:4px 10px;align-items:baseline}
.rev .who b{color:var(--muted);font-weight:700}
.rev .stars{color:var(--brand-ink);font-weight:700;direction:ltr}
.rev .who a{color:var(--faint)}
.alsosec{margin-top:34px}
.also{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.near{display:block;background:var(--card);border:1px solid var(--line);
border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);
font-weight:700;font-size:.92rem;line-height:1.35;box-shadow:var(--shadow);
transition:border-color .14s ease,transform .14s ease}
.near:hover{border-color:var(--brand);transform:translateY(-1px)}
.near span{display:block;color:var(--faint);font-weight:400;font-size:.76rem;
margin-top:3px}
.allbiz{margin:14px 0 0;font-size:.89rem}
.allbiz a{color:var(--brand-ink)}
form.order{display:grid;gap:11px;margin:12px 0 6px}
form.order label{display:grid;gap:5px;font-size:.9rem;color:var(--muted)}
form.order input,form.order textarea{font:inherit;padding:10px 12px;
border:1px solid var(--line);border-radius:10px;background:var(--card-2);
color:var(--ink);width:100%}
form.order input:focus,form.order textarea:focus{outline:2px solid var(--brand);
outline-offset:1px}
form.order button{font:inherit;font-weight:700;padding:12px;border:0;
border-radius:11px;background:var(--ok);color:#fff;cursor:pointer}
form.order button:hover{filter:brightness(1.08)}
.fine{font-size:.83rem;color:var(--muted);margin:2px 0 0}
#order .sub{font-size:.92rem;color:var(--muted);margin:0 0 6px}

.crumbs{font-size:.85rem;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted)}
.p-top{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:8px}
@media(min-width:720px){.p-top{grid-template-columns:320px minmax(0,1fr)}}
.p-shot{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:12px;display:flex;align-items:center;justify-content:center}
.p-shot img{border-radius:9px}
.p-price{font-size:1.6rem;font-weight:800;margin:6px 0 2px}
.p-stock{font-size:.9rem;font-weight:700}
.p-stock.in{color:var(--brand-ink)}
.p-stock.out{color:var(--muted)}
.seller{background:var(--card-2);border:1px solid var(--line);border-radius:13px;
padding:13px 16px;margin:14px 0}
.seller b{font-size:1.05rem}
.buy{display:block;text-align:center;background:var(--brand);color:#fff;
border:1px solid var(--brand);border-radius:12px;padding:14px 18px;
text-decoration:none;font-weight:800;font-size:1rem;margin:6px 0}
.buy:hover{filter:brightness(1.08)}
.facts-b{list-style:none;padding:0;margin:0}
.facts-b li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.facts-b b{min-width:9.5em}
.facts-b .none{color:var(--muted)}
.quoted{border-inline-start:3px solid var(--line);padding-inline-start:14px;
color:var(--ink-soft);white-space:pre-wrap}
.near-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.near-item{display:flex;flex-direction:column;gap:6px;background:var(--card);
border:1px solid var(--line);border-radius:12px;padding:10px;text-decoration:none;
color:var(--ink);font-size:.86rem;transition:transform .12s ease}
.near-item:hover{transform:translateY(-2px)}
.near-item img{width:100%;height:110px;object-fit:contain;border-radius:8px}
.near-item b{color:var(--brand-ink)}
