{
  "id": "craft-zine-shelf",
  "name": "Shelf Browse",
  "theme": "craft-zine",
  "category": "Search & Browse",
  "description": "Horizontal shelves you scroll sideways, each one a topic, with the shelf label set vertically against the left edge.",
  "layout": "Stacked horizontal scrollers with scroll-snap; each shelf carries a rotated vertical label in the left gutter and a hairline runs the full width beneath it.",
  "modules": [
    {
      "key": "head",
      "name": "Browse header",
      "html": "\n<header class=\"bh\"><h1>Browse the shelves</h1><p>Every piece we have printed, grouped by what it is actually about.</p></header>"
    },
    {
      "key": "shelf1",
      "name": "Shelf — Process",
      "html": "\n<section class=\"shelf\"><span class=\"shelf-label\">Process</span>\n  <div class=\"rail\">\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG workspace 400 300}}\" alt=\"{{ALT workspace}}\"><h3>The jig drawer</h3><span>Issue 10</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG texture 400 300}}\" alt=\"{{ALT texture}}\"><h3>Registration by hand</h3><span>Issue 08</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG code 400 300}}\" alt=\"{{ALT code}}\"><h3>Separating a file</h3><span>Issue 07</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG interior 400 300}}\" alt=\"{{ALT interior}}\"><h3>Two presses, one room</h3><span>Issue 06</span></a>\n  </div>\n</section>"
    },
    {
      "key": "shelf2",
      "name": "Shelf — People",
      "html": "\n<section class=\"shelf\"><span class=\"shelf-label\">People</span>\n  <div class=\"rail\">\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG portrait 400 300}}\" alt=\"{{ALT portrait}}\"><h3>Ada Renn</h3><span>Issue 11</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG team 400 300}}\" alt=\"{{ALT team}}\"><h3>The Hollow Press four</h3><span>Issue 09</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG people 400 300}}\" alt=\"{{ALT people}}\"><h3>Night shift bindery</h3><span>Issue 05</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG retail 400 300}}\" alt=\"{{ALT retail}}\"><h3>Shopkeepers</h3><span>Issue 03</span></a>\n  </div>\n</section>"
    },
    {
      "key": "shelf3",
      "name": "Shelf — Failures",
      "html": "\n<section class=\"shelf\"><span class=\"shelf-label\">Failures</span>\n  <div class=\"rail\">\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG product 400 300}}\" alt=\"{{ALT product}}\"><h3>Six that did not work</h3><span>Issue 11</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG analytics 400 300}}\" alt=\"{{ALT analytics}}\"><h3>The pricing year</h3><span>Issue 08</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"{{IMG night 400 300}}\" alt=\"{{ALT night}}\"><h3>A press that ate paper</h3><span>Issue 04</span></a>\n  </div>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "craft-zine-shelf",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:14:56+09:00",
    "updatedAt": "2026-08-29T18:14:56+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/craft-zine-shelf.json",
  "structure": "Stacked horizontal scrollers with scroll-snap; each shelf carries a rotated vertical label in the left gutter and a hairline runs the full width beneath it.",
  "html": "<div class=\"dz dz-craft-zine-shelf\" data-design=\"craft-zine-shelf\" data-theme=\"craft-zine\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Browse header\">\n<header class=\"bh\"><h1>Browse the shelves</h1><p>Every piece we have printed, grouped by what it is actually about.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"shelf1\" aria-label=\"Shelf — Process\">\n<section class=\"shelf\"><span class=\"shelf-label\">Process</span>\n  <div class=\"rail\">\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1483058712412-4245e9b90334?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"Overhead view of a shared desk covered in devices\"><h3>The jig drawer</h3><span>Issue 10</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"Two latte cups held over a dark table, seen from above\"><h3>Registration by hand</h3><span>Issue 08</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"A laptop screen full of source code on a desk\"><h3>Separating a file</h3><span>Issue 07</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"A bright minimal lounge with pale armchairs\"><h3>Two presses, one room</h3><span>Issue 06</span></a>\n  </div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"shelf2\" aria-label=\"Shelf — People\">\n<section class=\"shelf\"><span class=\"shelf-label\">People</span>\n  <div class=\"rail\">\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1517849845537-4d257902454a?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"A pug looking at the camera against a bright yellow backdrop\"><h3>Ada Renn</h3><span>Issue 11</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"Three colleagues laughing around laptops at a cafe table\"><h3>The Hollow Press four</h3><span>Issue 09</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1531482615713-2afd69097998?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"Two people cooking together at a home stove\"><h3>Night shift bindery</h3><span>Issue 05</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1543007630-9710e4a00a20?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"Warm bar interior lit by rows of pendant lamps\"><h3>Shopkeepers</h3><span>Issue 03</span></a>\n  </div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"shelf3\" aria-label=\"Shelf — Failures\">\n<section class=\"shelf\"><span class=\"shelf-label\">Failures</span>\n  <div class=\"rail\">\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1517849845537-4d257902454a?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"A pug looking at the camera against a bright yellow backdrop\"><h3>Six that did not work</h3><span>Issue 11</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"A laptop displaying an analytics dashboard\"><h3>The pricing year</h3><span>Issue 08</span></a>\n    <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1481833761820-0509d3217039?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"A RELAX neon sign glowing in a bar window at night\"><h3>A press that ate paper</h3><span>Issue 04</span></a>\n  </div>\n</section></section>\n</div>",
  "css": "\n.dz-craft-zine-shelf { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px 0 34px 40px; }\n.dz-craft-zine-shelf .bh { padding-right: 40px; padding-bottom: 14px; border-bottom: 3px solid var(--foreground); margin-bottom: 8px; }\n.dz-craft-zine-shelf .bh h1 { font-family: var(--pv-display); font-size: 32px; letter-spacing: -.035em; font-weight: 800; margin: 0 0 6px; }\n.dz-craft-zine-shelf .bh p { margin: 0; font-size: 14.5px; color: var(--muted-foreground); }\n.dz-craft-zine-shelf .shelf { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 22px 0 20px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-craft-zine-shelf .shelf-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--primary); justify-self: start; }\n.dz-craft-zine-shelf .rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: 40px; padding-bottom: 6px; }\n.dz-craft-zine-shelf .tile { flex: none; width: 200px; scroll-snap-align: start; text-decoration: none; color: var(--foreground); }\n.dz-craft-zine-shelf .tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: var(--pv-bw) solid var(--border); filter: var(--img-filter); transition: filter var(--dur) var(--ease); }\n.dz-craft-zine-shelf .tile:hover img, .dz-craft-zine-shelf .tile:focus-visible img { filter: none; }\n.dz-craft-zine-shelf .tile h3 { font-family: var(--pv-display); font-size: 15.5px; letter-spacing: -.02em; margin: 8px 0 3px; }\n.dz-craft-zine-shelf .tile span { font-family: var(--pv-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-craft-zine-shelf *, .dz-craft-zine-shelf *::before, .dz-craft-zine-shelf *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/craft-zine.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
}