{
  "id": "craft-zine-issue-index",
  "name": "Issue Index",
  "theme": "craft-zine",
  "category": "Editorial",
  "description": "A back-catalogue index where the issue number is the largest thing on the page and the entries hang off a single vertical rule.",
  "layout": "Sticky left rail of oversized mono numerals; entries in a right column separated by full-bleed hairlines, with metadata hanging into the left margin.",
  "modules": [
    {
      "key": "masthead",
      "name": "Masthead",
      "html": "\n<header class=\"mh\">\n  <div class=\"mh-name\">The Offcut</div>\n  <nav class=\"mh-nav\"><a href=\"#\" aria-current=\"page\">Issues</a><a href=\"#\">Contributors</a><a href=\"#\">Shop</a></nav>\n  <span class=\"mh-since\">Since 2019</span>\n</header>"
    },
    {
      "key": "rail",
      "name": "Volume rail",
      "html": "\n<aside class=\"rail\">\n  <span class=\"rail-label\">Volume</span>\n  <span class=\"rail-no\">04</span>\n  <p class=\"rail-note\">Eleven issues, printed in runs of three hundred, on 90gsm bulky news.</p>\n</aside>"
    },
    {
      "key": "entries",
      "name": "Issue entries",
      "html": "\n<ol class=\"entries\">\n  <li class=\"entry\"><span class=\"entry-no\">11</span><div class=\"entry-body\"><h3>Everything That Almost Worked</h3><p>Six failed prototypes and what their makers kept.</p></div><span class=\"entry-date\">Mar</span></li>\n  <li class=\"entry\"><span class=\"entry-no\">10</span><div class=\"entry-body\"><h3>The Long Way Round</h3><p>On taking the slow route through a problem on purpose.</p></div><span class=\"entry-date\">Jan</span></li>\n  <li class=\"entry\"><span class=\"entry-no\">09</span><div class=\"entry-body\"><h3>Borrowed Tools</h3><p>What one trade quietly takes from another.</p></div><span class=\"entry-date\">Nov</span></li>\n  <li class=\"entry\"><span class=\"entry-no\">08</span><div class=\"entry-body\"><h3>Small Batch</h3><p>Four people who refuse to scale, and their arithmetic.</p></div><span class=\"entry-date\">Sep</span></li>\n</ol>"
    },
    {
      "key": "colophon",
      "name": "Colophon",
      "html": "\n<footer class=\"colo\">\n  <div><span class=\"colo-k\">Set in</span> Bricolage Grotesque &amp; Public Sans</div>\n  <div><span class=\"colo-k\">Printed by</span> Hollow Press, Leeds</div>\n  <div><span class=\"colo-k\">Next</span> Issue 12, June</div>\n</footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "craft-zine-issue-index",
    "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-issue-index.json",
  "structure": "Sticky left rail of oversized mono numerals; entries in a right column separated by full-bleed hairlines, with metadata hanging into the left margin.",
  "html": "<div class=\"dz dz-craft-zine-issue-index\" data-design=\"craft-zine-issue-index\" data-theme=\"craft-zine\">\n<section class=\"dz-mod\" data-mod=\"masthead\" aria-label=\"Masthead\">\n<header class=\"mh\">\n  <div class=\"mh-name\">The Offcut</div>\n  <nav class=\"mh-nav\"><a href=\"#\" aria-current=\"page\">Issues</a><a href=\"#\">Contributors</a><a href=\"#\">Shop</a></nav>\n  <span class=\"mh-since\">Since 2019</span>\n</header></section><div class=\"grid\"><section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Volume rail\">\n<aside class=\"rail\">\n  <span class=\"rail-label\">Volume</span>\n  <span class=\"rail-no\">04</span>\n  <p class=\"rail-note\">Eleven issues, printed in runs of three hundred, on 90gsm bulky news.</p>\n</aside></section><section class=\"dz-mod\" data-mod=\"entries\" aria-label=\"Issue entries\">\n<ol class=\"entries\">\n  <li class=\"entry\"><span class=\"entry-no\">11</span><div class=\"entry-body\"><h3>Everything That Almost Worked</h3><p>Six failed prototypes and what their makers kept.</p></div><span class=\"entry-date\">Mar</span></li>\n  <li class=\"entry\"><span class=\"entry-no\">10</span><div class=\"entry-body\"><h3>The Long Way Round</h3><p>On taking the slow route through a problem on purpose.</p></div><span class=\"entry-date\">Jan</span></li>\n  <li class=\"entry\"><span class=\"entry-no\">09</span><div class=\"entry-body\"><h3>Borrowed Tools</h3><p>What one trade quietly takes from another.</p></div><span class=\"entry-date\">Nov</span></li>\n  <li class=\"entry\"><span class=\"entry-no\">08</span><div class=\"entry-body\"><h3>Small Batch</h3><p>Four people who refuse to scale, and their arithmetic.</p></div><span class=\"entry-date\">Sep</span></li>\n</ol></section></div><section class=\"dz-mod\" data-mod=\"colophon\" aria-label=\"Colophon\">\n<footer class=\"colo\">\n  <div><span class=\"colo-k\">Set in</span> Bricolage Grotesque &amp; Public Sans</div>\n  <div><span class=\"colo-k\">Printed by</span> Hollow Press, Leeds</div>\n  <div><span class=\"colo-k\">Next</span> Issue 12, June</div>\n</footer></section>\n</div>",
  "css": "\n.dz-craft-zine-issue-index { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 34px 38px 30px; }\n.dz-craft-zine-issue-index .mh { display: flex; align-items: baseline; gap: 26px; padding-bottom: 14px; border-bottom: 3px solid var(--foreground); }\n.dz-craft-zine-issue-index .mh-name { font-family: var(--pv-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }\n.dz-craft-zine-issue-index .mh-nav { display: flex; gap: 18px; }\n.dz-craft-zine-issue-index .mh-nav a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-craft-zine-issue-index .mh-nav a:hover, .dz-craft-zine-issue-index .mh-nav a:focus-visible, .dz-craft-zine-issue-index .mh-nav a[aria-current] { color: var(--foreground); border-bottom-color: var(--primary); }\n.dz-craft-zine-issue-index .mh-since { margin-left: auto; font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); }\n.dz-craft-zine-issue-index .grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; padding-top: 30px; }\n.dz-craft-zine-issue-index .rail { position: sticky; top: 0; align-self: start; }\n.dz-craft-zine-issue-index .rail-label { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-craft-zine-issue-index .rail-no { display: block; font-family: var(--pv-mono); font-size: 92px; line-height: .82; font-weight: 700; color: var(--primary); margin: 6px 0 14px; }\n.dz-craft-zine-issue-index .rail-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted-foreground); max-width: 20ch; border-top: var(--pv-bw) solid var(--border); padding-top: 12px; }\n.dz-craft-zine-issue-index .entries { list-style: none; margin: 0; padding: 0; }\n.dz-craft-zine-issue-index .entry { display: grid; grid-template-columns: 58px minmax(0, 1fr) 46px; align-items: baseline; gap: 18px; padding: 18px 0; border-top: var(--pv-bw) solid var(--border); transition: background var(--dur) var(--ease); }\n.dz-craft-zine-issue-index .entry:last-child { border-bottom: var(--pv-bw) solid var(--border); }\n.dz-craft-zine-issue-index .entry:hover { background: var(--muted); }\n.dz-craft-zine-issue-index .entry-no { font-family: var(--pv-mono); font-size: 22px; color: var(--muted-foreground); }\n.dz-craft-zine-issue-index .entry-body h3 { font-family: var(--pv-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }\n.dz-craft-zine-issue-index .entry-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted-foreground); }\n.dz-craft-zine-issue-index .entry-date { font-family: var(--pv-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); text-align: right; }\n.dz-craft-zine-issue-index .colo { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 28px; padding-top: 14px; border-top: 3px solid var(--foreground); font-size: 12px; color: var(--muted-foreground); }\n.dz-craft-zine-issue-index .colo-k { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: var(--foreground); margin-right: 6px; }\n@media (prefers-reduced-motion: reduce) { .dz-craft-zine-issue-index *, .dz-craft-zine-issue-index *::before, .dz-craft-zine-issue-index *::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"
}