{
  "id": "craft-zine-longread",
  "name": "Long Read",
  "theme": "craft-zine",
  "category": "Editorial",
  "description": "A single 62-character measure with margin notes that hang in the gutter rather than interrupting the line of reading.",
  "layout": "One narrow text column offset left of centre; sidenotes live in a fixed 200px right gutter aligned to their reference, and the drop cap breaks the top rule.",
  "modules": [
    {
      "key": "kicker",
      "name": "Kicker + headline",
      "html": "\n<header class=\"kick\">\n  <span class=\"kick-tag\">Field notes</span>\n  <h1>What the Second Draft Knows</h1>\n  <p class=\"kick-standfirst\">Every revision throws away something that took real work. That is the job, and it never stops feeling like a loss.</p>\n  <div class=\"kick-by\"><span>Words by Ada Renn</span><span>14 min</span></div>\n</header>"
    },
    {
      "key": "body",
      "name": "Article body",
      "html": "\n<div class=\"cols\">\n  <article class=\"prose\">\n    <p class=\"lede\">There is a moment in every project where the thing you built stops being the thing you meant to build, and you have to decide which one you are actually making.</p>\n    <p>The first draft is generous. It keeps every idea, because none of them have been tested against each other yet. It is a survey, not an argument.</p>\n    <h2>The cost of keeping</h2>\n    <p>What makes the second draft hard is not writing — it is subtraction. Each cut is a small admission that a day of work was reconnaissance rather than construction.</p>\n    <p>The trick, if there is one, is to stop treating the cut material as waste. Keep an offcuts file. Most of it stays there. Some of it turns out to be the next piece.</p>\n  </article>\n  <aside class=\"notes\">\n    <p class=\"note\"><span class=\"note-no\">1</span> Our offcuts file for this issue ran to 4,100 words — longer than the piece.</p>\n    <p class=\"note\"><span class=\"note-no\">2</span> Printers call the leftover trim the offcut. We took the name.</p>\n  </aside>\n</div>"
    },
    {
      "key": "pullquote",
      "name": "Pull quote",
      "html": "\n<blockquote class=\"pull\"><p>Subtraction is the only edit that changes what a thing is about.</p></blockquote>"
    },
    {
      "key": "end",
      "name": "End matter",
      "html": "\n<footer class=\"end\">\n  <span class=\"end-mark\"></span>\n  <p>Ada Renn keeps a print shop in Sheffield and has missed every deadline she has ever been given.</p>\n</footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "craft-zine-longread",
    "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-longread.json",
  "structure": "One narrow text column offset left of centre; sidenotes live in a fixed 200px right gutter aligned to their reference, and the drop cap breaks the top rule.",
  "html": "<div class=\"dz dz-craft-zine-longread\" data-design=\"craft-zine-longread\" data-theme=\"craft-zine\">\n<section class=\"dz-mod\" data-mod=\"kicker\" aria-label=\"Kicker + headline\">\n<header class=\"kick\">\n  <span class=\"kick-tag\">Field notes</span>\n  <h1>What the Second Draft Knows</h1>\n  <p class=\"kick-standfirst\">Every revision throws away something that took real work. That is the job, and it never stops feeling like a loss.</p>\n  <div class=\"kick-by\"><span>Words by Ada Renn</span><span>14 min</span></div>\n</header></section>\n<section class=\"dz-mod\" data-mod=\"body\" aria-label=\"Article body\">\n<div class=\"cols\">\n  <article class=\"prose\">\n    <p class=\"lede\">There is a moment in every project where the thing you built stops being the thing you meant to build, and you have to decide which one you are actually making.</p>\n    <p>The first draft is generous. It keeps every idea, because none of them have been tested against each other yet. It is a survey, not an argument.</p>\n    <h2>The cost of keeping</h2>\n    <p>What makes the second draft hard is not writing — it is subtraction. Each cut is a small admission that a day of work was reconnaissance rather than construction.</p>\n    <p>The trick, if there is one, is to stop treating the cut material as waste. Keep an offcuts file. Most of it stays there. Some of it turns out to be the next piece.</p>\n  </article>\n  <aside class=\"notes\">\n    <p class=\"note\"><span class=\"note-no\">1</span> Our offcuts file for this issue ran to 4,100 words — longer than the piece.</p>\n    <p class=\"note\"><span class=\"note-no\">2</span> Printers call the leftover trim the offcut. We took the name.</p>\n  </aside>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"pullquote\" aria-label=\"Pull quote\">\n<blockquote class=\"pull\"><p>Subtraction is the only edit that changes what a thing is about.</p></blockquote></section>\n<section class=\"dz-mod\" data-mod=\"end\" aria-label=\"End matter\">\n<footer class=\"end\">\n  <span class=\"end-mark\"></span>\n  <p>Ada Renn keeps a print shop in Sheffield and has missed every deadline she has ever been given.</p>\n</footer></section>\n</div>",
  "css": "\n.dz-craft-zine-longread { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 40px 44px; }\n.dz-craft-zine-longread .kick { max-width: 40rem; }\n.dz-craft-zine-longread .kick-tag { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }\n.dz-craft-zine-longread .kick h1 { font-family: var(--pv-display); font-size: 46px; line-height: 1.04; letter-spacing: -.035em; font-weight: 800; margin: 10px 0 14px; }\n.dz-craft-zine-longread .kick-standfirst { margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted-foreground); max-width: 34rem; }\n.dz-craft-zine-longread .kick-by { display: flex; gap: 20px; margin-top: 18px; padding-top: 12px; border-top: var(--pv-bw) solid var(--border); font-family: var(--pv-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-craft-zine-longread .cols { display: grid; grid-template-columns: minmax(0, 34rem) 200px; gap: 44px; margin-top: 30px; }\n.dz-craft-zine-longread .prose { font-size: 16px; line-height: 1.72; }\n.dz-craft-zine-longread .prose p { margin: 0 0 16px; }\n.dz-craft-zine-longread .prose h2 { font-family: var(--pv-display); font-size: 22px; letter-spacing: -.02em; margin: 26px 0 10px; }\n.dz-craft-zine-longread .lede::first-letter { font-family: var(--pv-display); float: left; font-size: 62px; line-height: .8; font-weight: 800; padding: 4px 10px 0 0; color: var(--primary); }\n.dz-craft-zine-longread .notes { border-left: var(--pv-bw) solid var(--border); padding-left: 18px; }\n.dz-craft-zine-longread .note { margin: 0 0 20px; font-size: 12.5px; line-height: 1.6; color: var(--muted-foreground); }\n.dz-craft-zine-longread .note-no { font-family: var(--pv-mono); color: var(--primary); margin-right: 6px; }\n.dz-craft-zine-longread .pull { margin: 30px 0; padding: 22px 0; border-top: 3px solid var(--foreground); border-bottom: 3px solid var(--foreground); max-width: 44rem; }\n.dz-craft-zine-longread .pull p { margin: 0; font-family: var(--pv-display); font-size: 27px; line-height: 1.24; letter-spacing: -.025em; font-weight: 700; }\n.dz-craft-zine-longread .end { display: flex; gap: 14px; align-items: flex-start; max-width: 34rem; padding-top: 16px; border-top: var(--pv-bw) solid var(--border); }\n.dz-craft-zine-longread .end-mark { flex: none; width: 13px; height: 13px; background: var(--primary); margin-top: 4px; }\n.dz-craft-zine-longread .end p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-craft-zine-longread *, .dz-craft-zine-longread *::before, .dz-craft-zine-longread *::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"
}