/* The blog (inc/blog.php), as approved on the artifact of 2026-11-09 ("its nice"). Phone first.
   Blog page: a dated index. Each post is a row: the day in the display face (sand), the month under it, the topic in
   blue, the title, a small picture. On a phone the newest post opens the page as a cover; on a wide screen a preview
   pane beside the list shows the picture and summary of the row under the pointer (blog.js).
   Article: title and summary beside the picture, a calm reading column, a contents rail with a blue running stitch on a
   wide screen, then the products it talks about and more posts as rows.
   Pictures sit on the card colour with multiply, so any product shot on white blends into the paper.
   Every colour and face is a theme.css token. */
.blog-page { --blog-gutter:clamp(20px,4vw,56px); --blog-wide:1320px;
  --blog-card:color-mix(in srgb,var(--paper-background) 96%,var(--paper-foreground));
  --blog-muted:color-mix(in srgb,var(--paper-foreground) 72%,var(--paper-background));
  --blog-body:color-mix(in srgb,var(--paper-foreground) 88%,var(--paper-background));
  --blog-sticky:calc(var(--site-header-height,80px) + 24px); }
.blog-page [data-language-switch] { display:none!important; }   /* Hebrew only: no switch to an English page that isn't there */
.blog-main { width:100%; padding:var(--site-header-height,80px) var(--blog-gutter) clamp(72px,9vw,128px); box-sizing:border-box; color:var(--paper-foreground); font-synthesis:none; }
.blog-main a { color:inherit; text-decoration:none; }
.blog-main :focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:3px; }
.blog-main img { display:block; max-width:100%; height:auto; }
.blog-main h1, .blog-main h2, .blog-main h3 { letter-spacing:0; }
.blog-masthead, .blog-index, .blog-empty, .post, .post-products, .post-more, .post-back { max-width:var(--blog-wide); margin-inline:auto; }

/* ── The blog page and the topic pages ── */
.blog-masthead { display:grid; gap:8px; padding:6px 0 18px; }
.blog-title { margin:0; font:var(--w-display) clamp(56px,13vw,150px)/.82 var(--f-display); }
.blog-dek { margin:0; max-width:40ch; font-size:16px; line-height:1.5; color:var(--blog-muted); text-wrap:pretty; }
/* Topics: one line you can swipe on a phone; the current one underlined in blue. */
.blog-topics { margin:4px calc(var(--blog-gutter) * -1) 0; overflow-x:auto; scrollbar-width:none; }
.blog-topics::-webkit-scrollbar { display:none; }
.blog-topics ul { display:flex; gap:0 20px; width:max-content; margin:0; padding:0 var(--blog-gutter); list-style:none; white-space:nowrap; }
.blog-topics a { position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:16px; color:var(--blog-muted); transition:color var(--motion-feedback) var(--ease-out); }
.blog-topics a:hover, .blog-topics a[aria-current] { color:var(--paper-foreground); }
.blog-topics a[aria-current]::after { content:''; position:absolute; inset-inline:0; bottom:7px; height:2px; background:var(--color-primary); }
.blog-empty { margin-block:48px; font-size:18px; color:var(--blog-muted); }

/* The cover (phone): the newest post, its picture edge to edge. */
.blog-cover { display:block; margin-inline:calc(var(--blog-gutter) * -1); padding-bottom:26px; }
.blog-cover-fig { display:block; aspect-ratio:4/3; overflow:hidden; background:var(--blog-card); }
.blog-cover-fig img, .blog-thumb img, .blog-peek-pic img, .post-photo img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.blog-cover-text { display:grid; gap:10px; padding:16px var(--blog-gutter) 0; }
.blog-cover-noimg .blog-cover-text { padding-top:4px; }
.blog-meta { display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; margin:0; font-size:14px; color:var(--blog-muted); font-variant-numeric:tabular-nums; }
.blog-main .blog-meta-topic { color:var(--color-primary); }
a.blog-meta-topic:hover { text-decoration:underline; text-underline-offset:.25em; }
.blog-cover-title { margin:0; font:var(--w-display) 44px/.92 var(--f-display); text-wrap:balance; }
.blog-cover-dek { font-size:17px; line-height:1.6; color:var(--blog-muted); text-wrap:pretty; }

/* A row: the day, the topic and title, a small picture. */
.blog-rows { margin:0; padding:0; list-style:none; border-top:1px solid var(--color-rule); }
.blog-row > a { display:grid; grid-template-columns:46px minmax(0,1fr) 72px; gap:14px; align-items:center; padding-block:16px; border-bottom:1px solid var(--color-rule); }
.blog-row-noimg > a { grid-template-columns:46px minmax(0,1fr); }
.blog-day { display:grid; justify-items:center; align-self:start; padding-top:2px; }
.blog-day b { font:400 34px/.9 var(--f-display); color:var(--color-sand-600); font-variant-numeric:tabular-nums; transition:color 250ms var(--ease-out); }
.blog-day small { margin-top:5px; font-size:11px; line-height:1.1; color:var(--blog-muted); text-align:center; }
.blog-row-text { display:block; min-width:0; }
.blog-row-topic { display:block; margin-bottom:6px; font-size:13px; line-height:1.2; color:var(--color-primary); }
.blog-row-title { margin:0; font:var(--w-display) 27px/.95 var(--f-display); text-wrap:balance; }
.blog-thumb { width:72px; aspect-ratio:1; overflow:hidden; border-radius:6px; background:var(--blog-card); }
.blog-row-go { display:none; }
.blog-index .blog-rows .blog-row:first-child { display:none; }   /* on a phone the newest post is the cover above */
@media (hover:hover) { .blog-row > a:hover .blog-day b { color:var(--color-primary); } }

/* Pages: small, the current one filled. */
.blog-pages { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px; padding-block:28px 8px; font-size:15px; }
.blog-pages ol { display:flex; gap:4px; margin:0; padding:0; list-style:none; font-variant-numeric:tabular-nums; }
.blog-pages ol a, .blog-pages ol span, .blog-pages-gap { display:grid; place-items:center; min-width:40px; height:40px; border-radius:999px; color:var(--blog-muted); }
.blog-pages ol a:hover { color:var(--paper-foreground); box-shadow:inset 0 0 0 1px var(--color-rule); }
.blog-pages ol [aria-current] { background:var(--paper-foreground); color:var(--paper-background); }
.blog-pages-step { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-inline:10px; color:var(--paper-foreground); }
.blog-peek { display:none; }

@media (min-width:760px) {
  .blog-masthead { grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:40px; padding:12px 0 26px; }
  .blog-dek { grid-column:2; grid-row:1; margin-bottom:.55em; font-size:18px; }
  .blog-topics { grid-column:1/-1; margin:18px 0 0; overflow:visible; }
  .blog-topics ul { gap:0 28px; padding:0; width:auto; flex-wrap:wrap; }
  .blog-topics a { font-size:17px; }
  .blog-cover { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:32px; align-items:end; margin-inline:0; padding-bottom:34px; }
  .blog-cover-noimg { grid-template-columns:minmax(0,1fr); }
  .blog-cover-fig { grid-column:2; grid-row:1; border-radius:4px; }
  .blog-cover-text { grid-column:1; grid-row:1; padding:0; }
  .blog-cover-title { font-size:clamp(48px,7vw,72px); }
  .blog-row > a { grid-template-columns:64px minmax(0,1fr) 96px; gap:22px; padding-block:20px; }
  .blog-row-noimg > a { grid-template-columns:64px minmax(0,1fr); }
  .blog-day b { font-size:46px; }
  .blog-row-title { font-size:34px; }
  .blog-thumb { width:96px; }
}

/* Wide screen: one list, and the preview pane beside it. */
@media (min-width:1100px) {
  .blog-index { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:start; }
  .blog-index .blog-cover { display:none; }
  .blog-index .blog-rows .blog-row:first-child { display:block; }
  .blog-index .blog-thumb { display:none; }
  .blog-index .blog-row > a { grid-template-columns:88px minmax(0,1fr) 28px; gap:24px; padding-block:22px 24px; }
  .blog-index .blog-day b { font-size:60px; }
  .blog-index .blog-day small { margin-top:6px; font-size:12px; }
  .blog-index .blog-row-topic { font-size:14px; }
  .blog-index .blog-row-title { font-size:clamp(40px,3.5vw,52px); }
  .blog-index .blog-row:first-child .blog-row-title { font-size:clamp(52px,4.6vw,70px); }
  .blog-index .blog-row-go { display:block; align-self:center; font-size:22px; color:var(--color-primary); opacity:0; transform:translateX(8px); transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out); }
  .blog-index .blog-row.is-on .blog-row-go { opacity:1; transform:none; }
  .blog-index .blog-row.is-on .blog-day b { color:var(--color-primary); }
  .blog-pages { justify-content:flex-start; }
  .blog-peek { display:grid; gap:18px; position:sticky; top:var(--blog-sticky); }
  .blog-peek-fig { position:relative; aspect-ratio:1; max-height:calc(100vh - var(--blog-sticky) - 200px); width:100%; overflow:hidden; border-radius:4px; background:var(--blog-card); }
  .blog-peek-pic { position:absolute; inset:0; background:var(--blog-card); isolation:isolate; }
  .blog-peek-pic img { max-width:none; }
  .blog-peek-pic.is-wipe { clip-path:inset(0 0 0 100%); transition:clip-path 620ms var(--ease-out); }
  .blog-peek-pic.is-wipe.is-in { clip-path:inset(0); }
  .blog-peek-dek { margin:0; font-size:18px; line-height:1.6; color:var(--blog-muted); text-wrap:pretty; }
  .blog-peek-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0; font-size:14px; color:var(--blog-muted); }
  .blog-main .blog-peek-go { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:16px; color:var(--color-primary); }
  .blog-peek-go:hover span:first-child { text-decoration:underline; text-underline-offset:.25em; }
}

/* ── The article ── */
.post-head { display:grid; gap:14px; padding-top:8px; }
.post-intro { display:grid; gap:14px; min-width:0; }
.post-title { margin:0; font:var(--w-display) clamp(44px,12vw,104px)/.9 var(--f-display); text-wrap:balance; }
.post-lede { margin:0; max-width:46ch; font-size:18px; line-height:1.6; color:var(--blog-muted); text-wrap:pretty; }
.post-photo { margin:10px calc(var(--blog-gutter) * -1) 0; }
.post-photo > img { aspect-ratio:4/3; background:var(--blog-card); }
.post-photo figcaption { margin:8px var(--blog-gutter) 0; font-size:13px; color:var(--blog-muted); }
.post-grid { display:grid; gap:26px; padding-top:26px; }

.post-toc { position:relative; padding-block:14px; border-block:1px solid var(--color-rule); }
.post-toc p { margin:0 0 4px; font-size:13px; color:var(--blog-muted); }
.post-toc ol { margin:0; padding:0; list-style:none; }
.post-toc a { display:block; padding-block:7px; font-size:16px; line-height:1.35; transition:color 250ms var(--ease-out); }
.post-toc a:hover { color:var(--color-primary); }
.post-toc-thread { display:none; }

/* Reading: about 65 characters a line, a calm leading, the display face for the section headings. */
.post-body { min-width:0; max-width:68ch; font-size:17px; line-height:1.85; color:var(--blog-body); text-wrap:pretty; }
.post-body > * { margin:0 0 1.05em; }
.post-body > :first-child { margin-top:0; }
.post-body h2 { margin:1.9em 0 .45em; font:var(--w-display) 36px/.95 var(--f-display); color:var(--paper-foreground); text-wrap:balance; scroll-margin-top:var(--blog-sticky); }
.post-body h3 { margin:1.5em 0 .3em; font:var(--w-text) 20px/1.35 var(--f-text); color:var(--paper-foreground); text-wrap:balance; scroll-margin-top:var(--blog-sticky); }
.post-body h2 + h3 { margin-top:.6em; }
.post-body a { color:var(--color-primary); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.28em; }
.post-body a:hover { text-decoration-thickness:2px; }
/* The text face has one weight: emphasis is the full ink on a sand marker, never a browser-made bold. */
.post-body :is(strong,b) { font-weight:var(--w-text); color:var(--paper-foreground); background:linear-gradient(transparent 64%,color-mix(in srgb,var(--color-sand-300) 46%,transparent) 64%); }
.post-body ul, .post-body ol { padding:0; list-style:none; }
.post-body li { position:relative; margin-bottom:.55em; }
.post-body ul > li { padding-inline-start:22px; }
.post-body ul > li::before { content:''; position:absolute; inset-inline-start:2px; top:.74em; width:7px; height:7px; background:var(--color-primary); }
.post-body ol { counter-reset:post; }
.post-body ol > li { counter-increment:post; padding-inline-start:38px; }
.post-body ol > li::before { content:counter(post); position:absolute; inset-inline-start:0; top:.12em; width:24px; text-align:center; font:400 25px/1 var(--f-display); color:var(--color-primary); }
.post-body blockquote { margin:1.6em 0; padding-inline-start:1.1em; border-inline-start:2px solid var(--color-primary); color:var(--paper-foreground); }
.post-body img { border-radius:4px; }
.post-body figure { margin:1.6em 0; }
.post-body figcaption { margin-top:8px; font-size:13px; color:var(--blog-muted); }
/* Tables (a comparison, a size chart) scroll inside their own box on a phone. */
.post-body table { width:100%; border-collapse:collapse; font-size:15px; line-height:1.45; }
@media (max-width:759px) { .post-body table { display:block; max-width:100%; overflow-x:auto; } }
.post-body th { padding:0 0 10px 14px; text-align:start; font-weight:var(--w-text); font-size:13px; color:var(--blog-muted); border-bottom:1px solid var(--paper-foreground); white-space:nowrap; }
.post-body td { min-width:7em; padding:12px 0 12px 14px; vertical-align:top; border-bottom:1px solid var(--color-rule); }
.post-body td:first-child { color:var(--paper-foreground); }

.post-foot { margin-top:40px; }
.post-share { display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; margin:0; padding-block:10px; border-block:1px solid var(--color-rule); font-size:15px; }
.post-share span { color:var(--blog-muted); }
.post-share a { display:inline-flex; align-items:center; min-height:44px; }
.post-share a:hover { color:var(--color-primary); }

/* The products the article talks about: the catalogue's own cut-outs, then their categories as links. */
.post-products { margin-top:46px; }
.post-products-title, .post-more-title { margin:0 0 16px; font:var(--w-display) 38px/.95 var(--f-display); }
.post-products-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; margin:0; padding:0; list-style:none; }
.post-product a { display:grid; gap:8px; }
.post-product-media { display:grid; place-items:center; aspect-ratio:1; overflow:hidden; border-radius:6px; background:var(--blog-card); }
.post-product-media img { width:84%; height:84%; object-fit:contain; mix-blend-mode:multiply; transition:transform 500ms var(--ease-out); }
.post-product-name { font-size:15px; line-height:1.35; }
.post-product-sku { font-size:13px; color:var(--blog-muted); font-variant-numeric:tabular-nums; }
@media (hover:hover) { .post-product a:hover .post-product-media img { transform:scale(1.04); } .post-product a:hover .post-product-name { color:var(--color-primary); } }
.post-products-cats { display:flex; flex-wrap:wrap; gap:4px 22px; margin:16px 0 0; font-size:15px; }
.post-products-cats a { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--color-primary); }
.post-products-cats a:hover { text-decoration:underline; text-underline-offset:.25em; }
.post-more { margin-top:44px; }
.post-back { margin-top:18px; }
.post-back a { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:16px; color:var(--color-primary); }

@media (min-width:760px) {
  .post-lede { font-size:20px; }
  .post-photo { margin:6px 0 0; }
  .post-photo > img { border-radius:4px; }
  .post-photo figcaption { margin-inline:0; }
  .post-body { font-size:18px; }
  .post-body h2 { font-size:44px; }
  .post-products-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .post-products-title, .post-more-title { font-size:46px; }
}
@media (min-width:1100px) {
  .post-head { padding-top:20px; }
  .post-head.has-photo { grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:64px; align-items:end; }
  .post-head.has-photo .post-intro { grid-column:1; grid-row:1; }
  .post-head.has-photo .post-photo { grid-column:2; grid-row:1; margin:0; }
  .post-head.has-photo .post-photo > img { aspect-ratio:1; }
  .post-grid { padding-top:56px; }
  .post-grid.has-toc { grid-template-columns:minmax(0,68ch) 250px; justify-content:start; column-gap:88px; }
  .post-grid.has-toc .post-body { grid-column:1; grid-row:1; }
  .post-toc { grid-column:2; grid-row:1; align-self:start; position:sticky; top:var(--blog-sticky); padding:0; padding-inline-start:22px; border:0; }
  .post-toc a { font-size:15px; color:var(--blog-muted); }
  .post-toc a.is-here { color:var(--paper-foreground); }
  .post-toc-thread { display:block; position:absolute; inset-block:0; inset-inline-start:0; width:2px; background:var(--color-rule); }
  .post-toc-thread i { position:absolute; inset:0; transform-origin:top; transform:scaleY(var(--blog-read,0));
    background:repeating-linear-gradient(to bottom,var(--color-primary) 0 9px,transparent 9px 15px); }
  .post-more .blog-rows { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:40px; border-top:0; }
  .post-more .blog-row > a { grid-template-columns:52px minmax(0,1fr) 84px; gap:16px; border-top:1px solid var(--color-rule); border-bottom:0; }
  .post-more .blog-row-noimg > a { grid-template-columns:52px minmax(0,1fr); }
  .post-more .blog-thumb { width:84px; }
  .post-more .blog-day b { font-size:40px; }
  .post-more .blog-row-title { font-size:28px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-main *, .blog-main *::before, .blog-main *::after { transition-duration:0s!important; }
}