Food home: every pane shows on a phone; the chips are links, not a picker (#181)

ddiff --git a/public/css/home.css b/public/css/home.css
iindex aedfaab..6323960 100644
---- a/public/css/home.css
++++ b/public/css/home.css
@@@ -61,24 +61,22 @@
    .home-stats span { font-size: .8rem; }
  }
  
--/* Pick (the owner's short-pages rule, 2026-10-30): on a phone the home's blocks of the same kind are one at a time,
--   picked with a row of chips. Radio inputs and :has(), no script: the chips and the one-block rule live under 640 px
--   and only where :has() is understood, so a wider screen, or an older browser, shows every block and no chips. */
--.pick-head { display: none; }
--.pick-row { display: none; }
--@supports selector(:has(*)) { @media (max-width: 640px) {
++/* Pick: on a phone every pane is shown, stacked, each with its own heading; the chips are a row of links that
++   jump to a pane (the owner's rule, 2026-10-31: never hide content to shorten). A wide screen shows the panes as
++   before, with no chips. */
++.pick-head, .pick-row { display: none; }
++@media (max-width: 640px) {
    .pick-bar { margin-top: 0; }
    .pick-head { display: block; }
--  .pick-head h2 { margin: 0 0 4px; font-size: 1.35rem; letter-spacing: -.01em; }
++  .pick-head h2 { margin: 0 0 4px; font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); letter-spacing: -.02em; }
    .pick-row { display: flex; gap: 8px; overflow-x: auto; margin: 10px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .pick-row::-webkit-scrollbar { display: none; }
--  .pick-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
--  .pick-row label { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); font-size: .9rem; font-weight: 650; white-space: nowrap; cursor: pointer; }
--  .pick-row input:checked + label { color: var(--text-primary, #e6edf7); border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent); }
--  .pick-row input:focus-visible + label { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
--  .pick-pane { display: none; }
--  .pick-pane > section > h2 { display: none; }
--} }
++  .pick-chip { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); font-size: .9rem; font-weight: 650; white-space: nowrap; text-decoration: none; }
++  .pick-chip:hover, .pick-chip:focus-visible { color: var(--text-primary, #e6edf7); border-color: var(--accent, #3b82f6); }
++  .pick-chip:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
++  .pick .pick-pane { scroll-margin-top: 72px; }
++  .pick .pick-pane + .pick-pane { margin-top: 26px; }
++}
  
  /* The fold (the owner's short-pages rule): closed on a phone, and where there is room it looks like the section it
     replaces: a heading and its content, with no card around it. */
ddiff --git a/server/http/pages.js b/server/http/pages.js
iindex 1030622..64fc128 100644
---- a/server/http/pages.js
++++ b/server/http/pages.js
@@@ -25,7 +25,7 @@ const { asyncRouter } = require('./router');
  const { createDiscoveryRoutes, homeJsonLd } = require('./discovery');
  const { sameOrigin } = require('./principal');
  const { html, raw, table, notice, time, badge } = require('../render/html');
--const { pickBlock, pickRules, foldBlock } = require('../render/short');
++const { pickBlock, foldBlock } = require('../render/short');
  const { markdown } = require('../render/markdown');
  const { send } = require('../render/layout');
  const foods = require('../food/foods');
@@@ -145,9 +145,8 @@ ${watchable ? html`<p class="muted small">Watch for changes opens OpenVibe.Watch
              { value: delivery.KITS.length, label: 'meal kits side by side', href: '/delivery#kits' },
              { value: recalls.total, label: 'FDA food recalls, newest first', href: '/recalls' },
          ].filter((x) => x.value);
--        // The home's blocks of the same kind (the owner's short-pages rule, 2026-10-30): on a phone a row of chips
--        // picks one block at a time, so the home stays a couple of screens tall. Every block stays in the page for
--        // crawlers, and a wider screen shows them all, one under the other, as before.
++        // The home's blocks of the same kind: every block is shown, stacked, each with its own heading; the chips
++        // are links that jump to a block (the owner's rule, 2026-10-31: never hide content to shorten).
          const panes = [];
          if (lib.cheap.length) panes.push({
              id: 'meals', label: 'Cheap meals',
@@@ -209,8 +208,6 @@ ${watchable ? html`<p class="muted small">Watch for changes opens OpenVibe.Watch
                  FAQ.length ? seo.jsonLd.faq(FAQ.map((f) => ({ q: f.question, a: f.answer }))) : null,
              ],
              styles: [showcase.STYLESHEET], localStyles: ['css/home.css'],
--            // The rule that shows the picked block: one per block of the pick block, written for this page.
--            inlineStyles: [`@supports selector(:has(*)){@media (max-width:640px){${pickRules('food', panes.map((p) => p.id))}}}`],
              body: html`${raw(hero)}
  ${stats.length ? html`<ul class="home-stats" aria-label="${SITE_NAME} in numbers">${stats.map((x) => html`<li><a href="${x.href}"><b>${x.value}</b><span>${x.label}</span></a></li>`)}</ul>` : ''}
  ${raw(pickBlock({ key: 'food', label: 'What to eat, and what it costs', head: 'What to eat, and what it costs', panes }))}
ddiff --git a/server/render/short.js b/server/render/short.js
iindex c837ffa..cec69e2 100644
---- a/server/render/short.js
++++ b/server/render/short.js
@@@ -1,40 +1,28 @@
  'use strict';
  /**
-- * The home on a phone (the owner's short-pages rule, 2026-10-30): one or two screens, app-like.
++ * The home on a phone (the owner's rule, 2026-10-31: never hide content to shorten): every block is shown, stacked,
++ * each with its own heading. The chips are links that jump to a block.
   *
-- *   pickBlock()  several blocks of the same kind, one at a time on a phone, picked with a row of chips. Radio
-- *                inputs and :has(), no script: every block stays in the page for crawlers, and a wider screen (or a
-- *                browser without :has()) shows them all and no chips.
++ *   pickBlock()  several blocks of the same kind, all shown; the chips are a row of links to them, never a picker.
   *   foldBlock()  a part a reader rarely needs, closed on a phone and open where there is room. The page's own markup
   *                keeps it open, so a browser without the script shows it as before; the script closes it on a narrow
   *                screen and remembers the reader's choice.
   *
-- * The CSS for both lives in public/css/home.css; the rule that shows the picked block is written for the page,
-- * because there is one per block.
++ * The CSS for both lives in public/css/home.css.
   */
  const esc = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  
  /**
-- * A pick block. The panes are the page's own blocks; each one keeps its heading on a wide screen, and on a phone the
-- * heading gives way to the chip that names it.
++ * A pick block. The panes are the page's own blocks, all shown, each with its own heading; the chips are links that
++ * jump to them.
   *
   *   pickBlock({ key, label, head, panes })   panes: [{ id, label, html }]
   */
  function pickBlock({ key, label, head = '', panes }) {
      if (!panes.length) return '';
--    const chips = panes.map((p, i) => `<input type="radio" name="pick-${esc(key)}" id="pk-${esc(key)}-${esc(p.id)}" value="${esc(p.id)}"${i === 0 ? ' checked' : ''}><label for="pk-${esc(key)}-${esc(p.id)}">${esc(p.label)}</label>`).join('');
++    const chips = panes.map((p) => `<a class="pick-chip" href="#pp-${esc(key)}-${esc(p.id)}">${esc(p.label)}</a>`).join('');
      const body = panes.map((p) => `<div class="pick-pane" id="pp-${esc(key)}-${esc(p.id)}">${p.html}</div>`).join('');
--    return `<div class="pick" id="pick-${esc(key)}"><div class="pick-bar sc-sec"><div class="pick-head"><h2>${esc(head || label)}</h2></div><div class="pick-row" role="radiogroup" aria-label="${esc(label)}">${chips}</div></div><div class="pick-body">${body}</div></div>`;
--}
--
--/** The rule that shows the picked block of a pick block: one per block, so the CSS is written for the page. */
--function pickRule(key, id) {
--    return `.pick:has(#pk-${key}-${id}:checked) #pp-${key}-${id}{display:block}`;
--}
--
--/** The rules for every block of a pick block, in the order they appear. */
--function pickRules(key, ids) {
--    return ids.map((id) => pickRule(key, id)).join('');
++    return `<div class="pick" id="pick-${esc(key)}"><div class="pick-bar sc-sec"><div class="pick-head"><h2>${esc(head || label)}</h2></div><nav class="pick-row" aria-label="${esc(label)}">${chips}</nav></div><div class="pick-body">${body}</div></div>`;
  }
  
  /**
@@@ -51,4 +39,4 @@ function foldScript(id) {
      return `<script>(function(){var d=document.getElementById(${JSON.stringify(id)});if(!d)return;var k='ov_fold_'+${JSON.stringify(id)};var s=null;try{s=localStorage.getItem(k)}catch(e){}if(s==='open'){d.open=true;return}if(s==='closed'){d.open=false;return}var t=0;if(window.matchMedia&&window.matchMedia('(max-width:640px)').matches){t=Date.now();d.open=false}d.addEventListener('toggle',function(){if(Date.now()-t<300)return;try{localStorage.setItem(k,d.open?'open':'closed')}catch(e){}})})();</script>`;
  }
  
--module.exports = { pickBlock, pickRule, pickRules, foldBlock, foldScript };
++module.exports = { pickBlock, foldBlock, foldScript };
ddiff --git a/test/home-short.test.js b/test/home-short.test.js
iindex f198ee0..c7a075a 100644
---- a/test/home-short.test.js
++++ b/test/home-short.test.js
@@@ -1,8 +1,8 @@
  'use strict';
  /**
-- * The home on a phone (the owner's short-pages rule, 2026-10-30): the home's blocks of the same kind are one pick
-- * block, a row of chips picks one of them, and the parts a reader rarely needs are folds. Radio inputs and :has(),
-- * no script for the chips; every block stays in the page for crawlers; a wider screen shows them all and no chips.
++ * The home on a phone (the owner's rule, 2026-10-31: never hide content to shorten): the home's blocks of the same
++ * kind are one pick block, every block is shown, stacked, with its own heading, and the chips are a row of links that
++ * jump to a block. The parts a reader rarely needs are folds.
   */
  const assert = require('assert');
  const { boot, check, done } = require('./helpers/boot');
@@@ -10,32 +10,38 @@ const { boot, check, done } = require('./helpers/boot');
  (async () => {
      const t = await boot();
      try {
--        await check('the home is one pick block: a chip per block, the first picked, every block in the page', async () => {
++        await check('the home is one pick block: a link per block, every block in the page and showing', async () => {
              const r = await t.get('/');
              assert.strictEqual(r.status, 200, r.text);
              const page = r.text;
              const block = page.slice(page.indexOf('<div class="pick" id="pick-food">'), page.indexOf('<details class="home-fold"><summary>Everything food'));
              assert.ok(block.startsWith('<div class="pick" id="pick-food">'), 'the pick block is on the home');
--            assert.match(block, /<div class="pick-row" role="radiogroup" aria-label="What to eat, and what it costs">/);
--            const chips = [...block.matchAll(/<input type="radio" name="pick-food" id="pk-food-([a-z]+)" value="\1"( checked)?><label for="pk-food-\1">([^<]+)<\/label>/g)];
--            assert.ok(chips.length >= 6, `a chip per block (${chips.length})`);
--            assert.deepStrictEqual(chips.filter((m) => m[2]).map((m) => m[1]), [chips[0][1]], 'the first block is picked');
--            // Every block stays in the page, with its heading.
++            assert.ok(!/<input type="radio"/.test(block), 'no radio in the pick block');
++            assert.match(block, /<nav class="pick-row" aria-label="What to eat, and what it costs">/);
++            const chips = [...block.matchAll(/<a class="pick-chip" href="#(pp-food-[a-z]+)">[^<]+<\/a>/g)];
++            assert.ok(chips.length >= 6, `a link per block (${chips.length})`);
++            // Every block stays in the page, with its heading, and every link points at one of them.
              for (const h of ['The most food for a dollar', 'The cheapest protein', 'Browse the food list', 'Every delivery app at once', 'Meal kits, side by side', 'Find a food bank']) {
                  assert.ok(block.includes(h), `the block "${h}" is in the page`);
              }
--            assert.strictEqual((block.match(/<div class="pick-pane"/g) || []).length, chips.length, 'one pane per chip');
++            const panes = [...block.matchAll(/<div class="pick-pane" id="(pp-food-[a-z]+)">/g)].map((m) => m[1]);
++            assert.strictEqual(panes.length, chips.length, 'one pane per link');
++            assert.deepStrictEqual(panes, chips.map((m) => m[1]), 'every link points at a pane in the page');
          });
  
--        await check('the CSS guard: the chips are hidden and the blocks all show until 640 px and where :has() is understood', async () => {
++        await check('the CSS shows every pane on a phone; the chips are links, not a picker', async () => {
              const r = await t.get('/');
              const page = r.text;
--            assert.match(page, /<style>@supports selector\(:has\(\*\)\)\{@media \(max-width:640px\)\{\.pick:has\(#pk-food-value:checked\) #pp-food-value\{display:block\}/, 'the rule that shows the picked block');
++            assert.ok(!page.includes('.pick:has('), 'no inline rule picks a block');
++            assert.ok(!page.includes('pk-food'), 'no radio ids on the page');
              const css = require('fs').readFileSync(require('path').join(__dirname, '..', 'public', 'css', 'home.css'), 'utf8');
--            assert.match(css, /\.pick-row \{ display: none; \}/, 'the chips are hidden by default');
--            assert.match(css, /@supports selector\(:has\(\*\)\) \{ @media \(max-width: 640px\) \{/, 'the phone rules are under :has() and 640 px');
--            assert.match(css, /\.pick-row label \{[^}]*min-height: 44px/, 'a chip is a 44 px target');
--            assert.match(css, /\.pick-pane \{ display: none; \}/, 'the blocks are hidden on a phone');
++            assert.match(css, /\.pick-head, \.pick-row \{ display: none; \}/, 'the chips are hidden by default');
++            assert.match(css, /@media \(max-width: 640px\) \{/, 'the phone rules are under 640 px');
++            assert.match(css, /\.pick-row \{ display: flex/, 'the chips are a row on a phone');
++            assert.match(css, /\.pick-chip \{[^}]*min-height: 44px/, 'a chip is a 44 px link target');
++            assert.ok(!/\.pick[^{}]*\.pick-pane[^{}]*\{[^}]*display:\s*none/.test(css), 'no rule hides a pane');
++            assert.ok(!/\.pick[^{}]*:target/.test(css), 'no :target pane rule');
++            assert.ok(!/\.pick[^{}]*\.pick-pane[^{}]*h2[^{}]*\{[^}]*display:\s*none/.test(css), 'a pane keeps its heading on a phone');
          });
  
          await check('the parts a reader rarely needs are folds, open in the page and closed on a phone', async () => {