{
  "id": "midnight-reel-season",
  "name": "Season Essay",
  "theme": "midnight-reel",
  "category": "Editorial",
  "description": "A programme note where the essay runs in one narrow column and the films it argues for sit in the margin as a ruled list you can book from.",
  "layout": "A 62ch essay column offset left with a 260px sticky margin column on the right holding the season list; the opening still bleeds off the left edge before the text begins.",
  "modules": [
    {
      "key": "bleed",
      "name": "Opening still",
      "html": "\n<figure class=\"bl\"><img src=\"{{ART curtain}}\" alt=\"{{ARTALT curtain}}\"></figure>"
    },
    {
      "key": "essay",
      "name": "Essay",
      "html": "\n<article class=\"es\"><span class=\"k\">Season · October</span>\n<h1>Varda in Full</h1>\n<p class=\"lede\">Nine films across five weeks, in the order she made them, which is the only order that shows you what she was actually doing.</p>\n<p>Agnès Varda called herself a gleaner long before she made the film about gleaning. The habit is there from the first feature: she picks up what a scene leaves behind and builds the next one out of it. Watching the work in sequence makes the method visible in a way that a greatest-hits season never can.</p>\n<p>We are showing everything on film where a print exists. Four of the nine are 35mm, two of those from her own collection, and the restorations we are using for the rest were supervised by Rosalie Varda.</p>\n<p>The season is arranged so that the two documentaries land in the middle rather than at the end. That is deliberate. They are not a coda.</p>\n<p class=\"sig\">Programmed by Ash Merriweather</p></article>"
    },
    {
      "key": "films",
      "name": "Season list",
      "html": "\n<aside class=\"fl\"><span class=\"k\">Nine films</span>\n<ol>\n  <li><b>La Pointe Courte</b><span class=\"m\">1955 · 80 min · 3 Oct</span></li>\n  <li><b>Cléo from 5 to 7</b><span class=\"m\">1962 · 90 min · 5 Oct</span></li>\n  <li><b>Le Bonheur</b><span class=\"m\">1965 · 79 min · 10 Oct</span></li>\n  <li><b>Lions Love</b><span class=\"m\">1969 · 110 min · 12 Oct</span></li>\n  <li><b>Daguerréotypes</b><span class=\"m\">1976 · 80 min · 17 Oct</span></li>\n  <li><b>Vagabond</b><span class=\"m\">1985 · 105 min · 19 Oct</span></li>\n  <li><b>Jacquot de Nantes</b><span class=\"m\">1991 · 118 min · 24 Oct</span></li>\n  <li><b>The Gleaners and I</b><span class=\"m\">2000 · 82 min · 26 Oct</span></li>\n  <li><b>Faces Places</b><span class=\"m\">2017 · 89 min · 31 Oct</span></li>\n</ol>\n<a class=\"und\" href=\"#\">Season pass · £40</a></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "midnight-reel-season",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:45:54+09:00",
    "updatedAt": "2026-09-01T19:45:54+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/midnight-reel-season.json",
  "structure": "A 62ch essay column offset left with a 260px sticky margin column on the right holding the season list; the opening still bleeds off the left edge before the text begins.",
  "html": "<div class=\"dz dz-midnight-reel-season\" data-design=\"midnight-reel-season\" data-theme=\"midnight-reel\">\n<section class=\"dz-mod\" data-mod=\"bleed\" aria-label=\"Opening still\">\n<figure class=\"bl\"><img src=\"https://designlookbook.dev/assets/img/midnight-reel-curtain.webp\" alt=\"Heavy oxblood stage curtains in low warm light\"></figure></section><section class=\"dz-mod\" data-mod=\"essay\" aria-label=\"Essay\">\n<article class=\"es\"><span class=\"k\">Season · October</span>\n<h1>Varda in Full</h1>\n<p class=\"lede\">Nine films across five weeks, in the order she made them, which is the only order that shows you what she was actually doing.</p>\n<p>Agnès Varda called herself a gleaner long before she made the film about gleaning. The habit is there from the first feature: she picks up what a scene leaves behind and builds the next one out of it. Watching the work in sequence makes the method visible in a way that a greatest-hits season never can.</p>\n<p>We are showing everything on film where a print exists. Four of the nine are 35mm, two of those from her own collection, and the restorations we are using for the rest were supervised by Rosalie Varda.</p>\n<p>The season is arranged so that the two documentaries land in the middle rather than at the end. That is deliberate. They are not a coda.</p>\n<p class=\"sig\">Programmed by Ash Merriweather</p></article></section><section class=\"dz-mod\" data-mod=\"films\" aria-label=\"Season list\">\n<aside class=\"fl\"><span class=\"k\">Nine films</span>\n<ol>\n  <li><b>La Pointe Courte</b><span class=\"m\">1955 · 80 min · 3 Oct</span></li>\n  <li><b>Cléo from 5 to 7</b><span class=\"m\">1962 · 90 min · 5 Oct</span></li>\n  <li><b>Le Bonheur</b><span class=\"m\">1965 · 79 min · 10 Oct</span></li>\n  <li><b>Lions Love</b><span class=\"m\">1969 · 110 min · 12 Oct</span></li>\n  <li><b>Daguerréotypes</b><span class=\"m\">1976 · 80 min · 17 Oct</span></li>\n  <li><b>Vagabond</b><span class=\"m\">1985 · 105 min · 19 Oct</span></li>\n  <li><b>Jacquot de Nantes</b><span class=\"m\">1991 · 118 min · 24 Oct</span></li>\n  <li><b>The Gleaners and I</b><span class=\"m\">2000 · 82 min · 26 Oct</span></li>\n  <li><b>Faces Places</b><span class=\"m\">2017 · 89 min · 31 Oct</span></li>\n</ol>\n<a class=\"und\" href=\"#\">Season pass · £40</a></aside></section>\n</div>",
  "css": "\n.dz-midnight-reel-season { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 56px; padding: 0 40px 40px 0; }\n.dz-midnight-reel-season .bl { grid-column: 1 / -1; margin: 0 0 44px; }\n.dz-midnight-reel-season .bl img { width: 100%; height: 260px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-midnight-reel-season .es { padding-left: 40px; max-width: 62ch; }\n.dz-midnight-reel-season .k { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-season .es h1 { font-family: var(--pv-display); font-size: 52px; font-weight: 500; line-height: 1.04; margin: 12px 0 20px; }\n.dz-midnight-reel-season .lede { font-size: 20px; line-height: 1.5; color: var(--foreground); margin: 0 0 24px; }\n.dz-midnight-reel-season .es p { font-size: 17px; line-height: 1.64; color: var(--muted-foreground); margin: 0 0 18px; }\n.dz-midnight-reel-season .sig { font-family: var(--pv-mono); font-size: 12.5px; padding-top: 12px; border-top: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-season .fl { position: sticky; top: 24px; align-self: start; }\n.dz-midnight-reel-season .fl ol { list-style: none; margin: 12px 0 20px; padding: 0; counter-reset: f; border-top: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-season .fl li { counter-increment: f; padding: 11px 0 11px 26px; border-bottom: var(--pv-bw) solid var(--border); position: relative; }\n.dz-midnight-reel-season .fl li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 13px; font-family: var(--pv-mono); font-size: 11px; color: var(--primary); }\n.dz-midnight-reel-season .fl b { display: block; font-family: var(--pv-display); font-size: 17px; font-weight: 500; }\n.dz-midnight-reel-season .m { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-season .und { font-size: 13px; color: var(--primary); text-decoration: none; padding-bottom: 5px; background-image: linear-gradient(var(--primary), var(--primary)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-slow) var(--ease); background-size: 40% 1px; }\n.dz-midnight-reel-season .und:hover { background-size: 100% 1px; }\n@media (prefers-reduced-motion: reduce) { .dz-midnight-reel-season *, .dz-midnight-reel-season *::before, .dz-midnight-reel-season *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/midnight-reel.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}