Home: a taste and a door on phones (#122)

ddiff --git a/public/css/home.css b/public/css/home.css
iindex b6d35d7..901ef53 100644
---- a/public/css/home.css
++++ b/public/css/home.css
@@@ -25,3 +25,24 @@
  .home-faq details p { margin: 0; padding: 0 16px 14px; color: var(--text-secondary, #96a7c2); line-height: 1.55; }
  @media (max-width: 520px) { .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .home-cards a { padding: 10px 12px; } }
  @media (prefers-reduced-motion: reduce) { .home-cards a { transition: none; } .home-cards a:hover { transform: none; } }
++
++/* Phones (2026-10-29): a taste and a door. The job lists are one sideways row each (every listing is still there), six
++   fields, eight cities and six companies show (each list is a link away), the figures are one strip. */
++.home-fold { border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, #131c2e); }
++.home-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; }
++.home-fold > summary::-webkit-details-marker { display: none; }
++.home-fold > summary h2 { margin: 0; font-size: 1.1rem; }
++.home-fold > summary span { color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; text-align: right; }
++.home-fold > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 14px; }
++.home-fold-body { padding: 0 16px; overflow-x: auto; }
++.home-fold .sc-sec { margin: 0; max-width: none; padding: 0 16px 16px; }
++@media (max-width: 599px) {
++  .home-cards.short > li:nth-child(n+7), .home-chips > li:nth-child(n+9) { display: none; }
++  .home-row .job-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
++  .home-row .job-list::-webkit-scrollbar { display: none; }
++  .home-row .job-list > li { flex: 0 0 86%; min-width: 0; margin: 0; scroll-snap-align: start; }
++  .home-stats { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
++  .home-stats::-webkit-scrollbar { display: none; }
++  .home-stats li { flex: 0 0 auto; width: 136px; }
++  .home-fold > summary span { display: none; }
++}
ddiff --git a/server/http/pages.js b/server/http/pages.js
iindex 1fceafa..638abee 100644
---- a/server/http/pages.js
++++ b/server/http/pages.js
@@@ -126,7 +126,8 @@ ${facets.type.map((t) => link({ type: t.type }, t.type, filters.type === t.type,
              title: 'Find work.',
              accent: 'Every listing shows where it came from.',
              lede: `${SITE_NAME} gathers job listings from public job boards, keeps the board's own link on every one, and lets you search them. No paywall, no account needed to look. Sign in to keep searches, get alerts, track the jobs you apply to, and have your OpenVibe.Actor agent help prepare each application.`,
--            actions: [{ label: 'Search the listings', href: '#search', primary: true }, { label: 'Remote jobs', href: '/jobs?remote=true' }, { label: 'Where they come from', href: '/sources' }],
++            // Two, so they sit side by side on a phone; where the listings come from is a section below.
++            actions: [{ label: 'Search the listings', href: '#search', primary: true }, { label: 'Remote jobs', href: '/jobs?remote=true' }],
              note: 'Open source (AGPL-3.0). Listings are shown with the source named and a link to the original — read the full listing there.',
          });
          const stats = [
@@@ -154,21 +155,21 @@ ${filterForm({ q: '', remote: '', type: '', location: '' }, { action: '/jobs' })
  <p class="muted">${n(total)} listing${total === 1 ? '' : 's'} from ${sources.SOURCES.length} job boards, newest first.${sum.day ? ` ${n(sum.day)} arrived in the last day.` : ''}</p></section>
  ${sum.tags.length ? html`<section class="sc-sec" aria-labelledby="h-fields"><h2 id="h-fields">Browse by field</h2>
  <p class="sc-lede">The labels the boards put on most listings right now. Each opens a search for it.</p>
--<ul class="home-cards">${sum.tags.map((t) => html`<li><a href="/jobs?${new URLSearchParams({ q: t.tag })}"><b>${sentence(t.tag)}</b><span>${n(t.count)} listing${t.count === 1 ? '' : 's'}</span></a></li>`)}</ul></section>` : ''}
++<ul class="home-cards short">${sum.tags.map((t) => html`<li><a href="/jobs?${new URLSearchParams({ q: t.tag })}"><b>${sentence(t.tag)}</b><span>${n(t.count)} listing${t.count === 1 ? '' : 's'}</span></a></li>`)}</ul></section>` : ''}
  ${sum.places.length ? html`<section class="sc-sec" aria-labelledby="h-places"><h2 id="h-places">Jobs by city</h2>
  <p class="sc-lede">The places most listings name. Remote jobs are <a href="/jobs?remote=true">their own search</a>.</p>
  <ul class="home-chips">${sum.places.map((p) => html`<li><a href="/jobs?${new URLSearchParams({ location: p.place })}">${p.place} <span>${n(p.count)}</span></a></li>`)}</ul></section>` : ''}
--<section class="sc-sec" aria-labelledby="h-latest"><h2 id="h-latest">Latest remote jobs</h2>
++<section class="sc-sec home-row" aria-labelledby="h-latest"><h2 id="h-latest">Latest remote jobs</h2>
  ${listing.listingList(latest, { sourceOf, empty: 'No listings yet — the ingest has not run.' })}
  <p><a class="sc-btn" href="/jobs?remote=true">All remote listings</a></p></section>
--${salaried.length ? html`<section class="sc-sec" aria-labelledby="h-pay"><h2 id="h-pay">Newest jobs that state the pay</h2>
++${salaried.length ? html`<section class="sc-sec home-row" aria-labelledby="h-pay"><h2 id="h-pay">Newest jobs that state the pay</h2>
  <p class="sc-lede">${n(sum.salaried)} listing${sum.salaried === 1 ? '' : 's'} say what the job pays, in the board's own words.</p>
  ${listing.listingList(salaried, { sourceOf, empty: '' })}</section>` : ''}
  ${sum.hiring.length ? html`<section class="sc-sec" aria-labelledby="h-hiring"><h2 id="h-hiring">Companies with the most openings</h2>
  <p class="sc-lede">Counted across every board. Each opens the company's page: its openings, where they are and which boards list them.</p>
--<ul class="home-cards">${sum.hiring.map((c) => { const slug = companies.slugOf(c.company); return html`<li><a href="${slug ? `/companies/${slug}` : `/jobs?${new URLSearchParams({ q: c.company })}`}"><b>${c.company}</b><span>${n(c.count)} open listing${c.count === 1 ? '' : 's'}</span></a></li>`; })}</ul>
++<ul class="home-cards short">${sum.hiring.map((c) => { const slug = companies.slugOf(c.company); return html`<li><a href="${slug ? `/companies/${slug}` : `/jobs?${new URLSearchParams({ q: c.company })}`}"><b>${c.company}</b><span>${n(c.count)} open listing${c.count === 1 ? '' : 's'}</span></a></li>`; })}</ul>
  <p><a href="/companies">Every company hiring</a></p></section>` : ''}
--<section class="sc-sec" aria-labelledby="h-sources"><h2 id="h-sources">Where the listings come from</h2>
++<section class="sc-sec" aria-labelledby="h-sources"><details class="home-fold"><summary><h2 id="h-sources">Where the listings come from</h2><span>${sources.SOURCES.length} public boards, how it works</span></summary><div class="home-fold-body">
  <p>Each source below is a public job board read through its own API, under its own terms. Every listing on this site names its source and links to the original; we keep a short excerpt and send you to the board for the rest.</p>
  ${table(['Source', 'Listings', 'Last read', 'Terms'], sources.SOURCES.map((src) => {
                  const f = fetches.get(src.id);
@@@ -178,7 +179,7 @@ ${table(['Source', 'Listings', 'Last read', 'Terms'], sources.SOURCES.map((src)
                      f && f.finished_at ? html`${time(f.finished_at)}${f.ok ? '' : html` <span class="muted small">(the last read failed)</span>`}` : html`<span class="muted">not read yet</span>`,
                      html`${src.attribution} — <a href="/sources#${src.id}">terms as applied</a>`,
                  ];
--            }))}</section>
++            }))}</div>
  ${raw(showcase.steps({
                  title: 'How it works',
                  items: [
@@@ -189,11 +190,10 @@ ${raw(showcase.steps({
                      { title: 'Nothing behind a paywall', text: 'Reading and searching is free and needs no account. There is no premium tier on the listings, and listings expire when a board stops showing them.' },
                      { title: 'Track your applications', text: 'Sign in and press Track this job on a listing: keep your status, notes and next steps in one place, and ask your OpenVibe.Actor agent to help prepare each application.' },
                  ],
--            }))}
++            }))}</details></section>
  ${FAQ.length ? html`<section class="sc-sec" aria-labelledby="h-faq"><h2 id="h-faq">Questions people ask</h2>
  <div class="home-faq">${FAQ.map((f) => html`<details><summary>${f.question}</summary><p>${f.answer}</p></details>`)}</div></section>` : ''}
--${raw(showcase.network({ service: 'work' }))}
--${raw(showcase.cta({ title: 'Prefer the API?', text: 'The same search, the sources and their terms, and your saved searches over HTTP. Reading is public.', actions: [{ label: 'The API', href: '/docs' }, { label: 'The sources', href: '/sources' }] }))}`,
++${raw(showcase.network({ service: 'work' }))}`,
          });
      });
  
ddiff --git a/test/perf-budget.test.js b/test/perf-budget.test.js
iindex 9d0ed2b..9701a90 100644
---- a/test/perf-budget.test.js
++++ b/test/perf-budget.test.js
@@@ -23,8 +23,8 @@ const BUDGETS = {
      jsRawKB: 305,   // 300.5 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 293 openvibe-shared 4.22.0: the navbar's magnifier search button and More dropdown (search.js and loading.js load only when used); 287.2 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 273.2 openvibe-shared 4.15 footer: the compact footer opens into the whole one, and the pulse line; 264.3 with Shared 4.13.0 (2026-10-26: account links); 239.8
      jsBrotliKB: 76,   // 74.2 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 70.5 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 67.9 openvibe-shared 4.15 footer: the compact footer opens into the whole one, and the pulse line; 65.3 Shared 4.12.0: the light/dark switch, the seasonal mark and the theme pairs; 56.5
      cssFiles: 3,   // 3 (app.css, the cached /shared/showcase.css and css/home.css, the curated home's counts, fields, cities, companies and questions, 2026-10-22)
--    cssRawKB: 39,   // 34.8 openvibe-shared 4.26.1 (hero visual); 29.3 with Shared 4.13.0 (2026-10-26: account links); 23.1 with css/home.css (2026-10-22); 15.0 before the listings; 18.2 after (the search form, the listing list, the source blocks)
--    cssBrotliKB: 8.3,   // 6.6–6.7 with Shared 4.13.0; raised from 8 for openvibe-shared v4.39.0 (+1.5 KB raw of kit/room/showcase CSS); measured 8.3
++    cssRawKB: 40,   // 39.5 the home's phone rows, limits and fold (2026-10-29); 34.8 openvibe-shared 4.26.1 (hero visual); 29.3 with Shared 4.13.0 (2026-10-26: account links); 23.1 with css/home.css (2026-10-22); 15.0 before the listings; 18.2 after (the search form, the listing list, the source blocks)
++    cssBrotliKB: 8.8,   // 8.6 the home's phone rows, limits and fold (2026-10-29); 6.6–6.7 with Shared 4.13.0; raised from 8 for openvibe-shared v4.39.0 (+1.5 KB raw of kit/room/showcase CSS); measured 8.3
      externalFiles: 0,   // 0
  };