{
  "id": "craft-zine-archive-browse",
  "name": "Archive Browse",
  "theme": "craft-zine",
  "category": "Search & Browse",
  "description": "A dense archive where filters are checkboxes in a left rail and results are numbered rows, not cards.",
  "layout": "Fixed 200px filter rail against a tinted ground, results as a single ruled column with a result count and sort control in a sticky header above them.",
  "modules": [
    {
      "key": "filters",
      "name": "Filter rail",
      "html": "\n<aside class=\"fil\">\n  <div class=\"fil-group\"><h3>Issue</h3><label><input type=\"checkbox\" checked> 09 – 11</label><label><input type=\"checkbox\"> 05 – 08</label><label><input type=\"checkbox\"> 01 – 04</label></div>\n  <div class=\"fil-group\"><h3>Kind</h3><label><input type=\"checkbox\" checked> Interview</label><label><input type=\"checkbox\" checked> Essay</label><label><input type=\"checkbox\"> Photo story</label><label><input type=\"checkbox\"> Recipe</label></div>\n  <div class=\"fil-group\"><h3>Length</h3><label><input type=\"radio\" name=\"cz-len\" checked> Any</label><label><input type=\"radio\" name=\"cz-len\"> Under 10 min</label></div>\n</aside>"
    },
    {
      "key": "bar",
      "name": "Result bar",
      "html": "\n<div class=\"bar\"><strong>38</strong> pieces<span class=\"bar-sp\"></span><label for=\"cz-ab-sort\">Sort</label><select id=\"cz-ab-sort\"><option>Newest first</option><option>Oldest first</option><option>Longest</option></select></div>"
    },
    {
      "key": "results",
      "name": "Result rows",
      "html": "\n<ol class=\"res\">\n  <li><span class=\"res-n\">38</span><div><h3>Ada Renn on refusing to scale</h3><p>Interview · Issue 11 · 14 min</p></div><span class=\"res-tag\">Interview</span></li>\n  <li><span class=\"res-n\">37</span><div><h3>What the second draft knows</h3><p>Essay · Issue 11 · 9 min</p></div><span class=\"res-tag\">Essay</span></li>\n  <li><span class=\"res-n\">36</span><div><h3>The jig drawer</h3><p>Photo story · Issue 10 · 4 min</p></div><span class=\"res-tag\">Photo</span></li>\n  <li><span class=\"res-n\">35</span><div><h3>Borrowed tools</h3><p>Essay · Issue 09 · 11 min</p></div><span class=\"res-tag\">Essay</span></li>\n  <li><span class=\"res-n\">34</span><div><h3>Three hundred copies</h3><p>Interview · Issue 09 · 16 min</p></div><span class=\"res-tag\">Interview</span></li>\n</ol>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "craft-zine-archive-browse",
    "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-archive-browse.json",
  "structure": "Fixed 200px filter rail against a tinted ground, results as a single ruled column with a result count and sort control in a sticky header above them.",
  "html": "<div class=\"dz dz-craft-zine-archive-browse\" data-design=\"craft-zine-archive-browse\" data-theme=\"craft-zine\">\n<section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Filter rail\">\n<aside class=\"fil\">\n  <div class=\"fil-group\"><h3>Issue</h3><label><input type=\"checkbox\" checked> 09 – 11</label><label><input type=\"checkbox\"> 05 – 08</label><label><input type=\"checkbox\"> 01 – 04</label></div>\n  <div class=\"fil-group\"><h3>Kind</h3><label><input type=\"checkbox\" checked> Interview</label><label><input type=\"checkbox\" checked> Essay</label><label><input type=\"checkbox\"> Photo story</label><label><input type=\"checkbox\"> Recipe</label></div>\n  <div class=\"fil-group\"><h3>Length</h3><label><input type=\"radio\" name=\"cz-len\" checked> Any</label><label><input type=\"radio\" name=\"cz-len\"> Under 10 min</label></div>\n</aside></section><div class=\"main\"><section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Result bar\">\n<div class=\"bar\"><strong>38</strong> pieces<span class=\"bar-sp\"></span><label for=\"cz-ab-sort\">Sort</label><select id=\"cz-ab-sort\"><option>Newest first</option><option>Oldest first</option><option>Longest</option></select></div></section><section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Result rows\">\n<ol class=\"res\">\n  <li><span class=\"res-n\">38</span><div><h3>Ada Renn on refusing to scale</h3><p>Interview · Issue 11 · 14 min</p></div><span class=\"res-tag\">Interview</span></li>\n  <li><span class=\"res-n\">37</span><div><h3>What the second draft knows</h3><p>Essay · Issue 11 · 9 min</p></div><span class=\"res-tag\">Essay</span></li>\n  <li><span class=\"res-n\">36</span><div><h3>The jig drawer</h3><p>Photo story · Issue 10 · 4 min</p></div><span class=\"res-tag\">Photo</span></li>\n  <li><span class=\"res-n\">35</span><div><h3>Borrowed tools</h3><p>Essay · Issue 09 · 11 min</p></div><span class=\"res-tag\">Essay</span></li>\n  <li><span class=\"res-n\">34</span><div><h3>Three hundred copies</h3><p>Interview · Issue 09 · 16 min</p></div><span class=\"res-tag\">Interview</span></li>\n</ol></section></div>\n</div>",
  "css": "\n.dz-craft-zine-archive-browse { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; min-height: 520px; }\n.dz-craft-zine-archive-browse .fil { background: var(--muted); border-right: var(--pv-bw) solid var(--border); padding: 26px 20px; }\n.dz-craft-zine-archive-browse .fil-group { margin-bottom: 24px; }\n.dz-craft-zine-archive-browse .fil h3 { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 10px; padding-bottom: 6px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-craft-zine-archive-browse .fil label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 5px 0; cursor: pointer; }\n.dz-craft-zine-archive-browse .fil input { accent-color: var(--primary); width: 14px; height: 14px; }\n.dz-craft-zine-archive-browse .main { padding: 22px 30px 30px; }\n.dz-craft-zine-archive-browse .bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 3px solid var(--foreground); font-size: 13.5px; color: var(--muted-foreground); }\n.dz-craft-zine-archive-browse .bar strong { font-family: var(--pv-mono); font-size: 20px; color: var(--foreground); }\n.dz-craft-zine-archive-browse .bar-sp { flex: 1; }\n.dz-craft-zine-archive-browse .bar label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }\n.dz-craft-zine-archive-browse .bar select { font: inherit; font-size: 13px; padding: 6px 10px; border: var(--pv-bw) solid var(--input); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); }\n.dz-craft-zine-archive-browse .res { list-style: none; margin: 0; padding: 0; }\n.dz-craft-zine-archive-browse .res li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 8px 14px 0; border-bottom: var(--pv-bw) solid var(--border); transition: background var(--dur) var(--ease); }\n.dz-craft-zine-archive-browse .res li:hover { background: var(--muted); }\n.dz-craft-zine-archive-browse .res-n { font-family: var(--pv-mono); font-size: 15px; color: var(--muted-foreground); }\n.dz-craft-zine-archive-browse .res h3 { font-family: var(--pv-display); font-size: 17px; letter-spacing: -.02em; margin: 0 0 3px; }\n.dz-craft-zine-archive-browse .res p { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }\n.dz-craft-zine-archive-browse .res-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); border-left: 3px solid var(--primary); padding-left: 9px; }\n@media (prefers-reduced-motion: reduce) { .dz-craft-zine-archive-browse *, .dz-craft-zine-archive-browse *::before, .dz-craft-zine-archive-browse *::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"
}