{
  "id": "midnight-reel-tonight",
  "name": "Tonight",
  "theme": "midnight-reel",
  "category": "Landing",
  "description": "The homepage of a repertory cinema at six in the evening: what is on tonight, in the order it starts, with everything else pushed below the fold.",
  "layout": "A near-empty upper half holding only the date and one brass line, then a full-width ruled list of five screenings whose times are the only right-aligned thing on the page.",
  "modules": [
    {
      "key": "mark",
      "name": "Masthead",
      "html": "\n<header class=\"mk\"><span class=\"nm\">The Midnight Reel</span><nav><a href=\"#\">Programme</a><a href=\"#\">Membership</a><a href=\"#\">Bar</a><a href=\"#\">About</a></nav></header>"
    },
    {
      "key": "date",
      "name": "Date block",
      "html": "\n<div class=\"dt\"><span class=\"k\">Friday 4 September</span><h1>Five things are happening in this building tonight.</h1><a class=\"und\" href=\"#\">The whole autumn programme</a></div>"
    },
    {
      "key": "list",
      "name": "Tonight list",
      "html": "\n<ol class=\"sc\">\n  <li><span class=\"t\">18:00</span><div><h2>The Conversation</h2><span class=\"m\">1974 · 113 min · 35mm · Introduced by Ash Merriweather</span></div><span class=\"st\">Sold out</span></li>\n  <li><span class=\"t\">18:30</span><div><h2>Cléo from 5 to 7</h2><span class=\"m\">1962 · 90 min · DCP · Part of Varda in Full</span></div><span class=\"sa\">6 seats</span></li>\n  <li><span class=\"t\">20:15</span><div><h2>Chungking Express</h2><span class=\"m\">1994 · 102 min · 4K restoration</span></div><span class=\"sa\">31 seats</span></li>\n  <li><span class=\"t\">20:45</span><div><h2>Stalker</h2><span class=\"m\">1979 · 161 min · 35mm · One night only</span></div><span class=\"sa\">12 seats</span></li>\n  <li><span class=\"t\">23:00</span><div><h2>Night of the Living Dead</h2><span class=\"m\">1968 · 96 min · Late show, bar open</span></div><span class=\"sa\">44 seats</span></li>\n</ol>"
    },
    {
      "key": "plate",
      "name": "Still",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART still}}\" alt=\"{{ARTALT still}}\"><figcaption>Stalker, 1979 — 35mm print on loan from the BFI.</figcaption></figure>"
    },
    {
      "key": "foot",
      "name": "Footer line",
      "html": "\n<footer class=\"ft\"><span>42 Ancoats Street</span><span>Doors 30 minutes before</span><span>Members always £5</span></footer>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "midnight-reel-tonight",
    "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-tonight.json",
  "structure": "A near-empty upper half holding only the date and one brass line, then a full-width ruled list of five screenings whose times are the only right-aligned thing on the page.",
  "html": "<div class=\"dz dz-midnight-reel-tonight\" data-design=\"midnight-reel-tonight\" data-theme=\"midnight-reel\">\n<section class=\"dz-mod\" data-mod=\"mark\" aria-label=\"Masthead\">\n<header class=\"mk\"><span class=\"nm\">The Midnight Reel</span><nav><a href=\"#\">Programme</a><a href=\"#\">Membership</a><a href=\"#\">Bar</a><a href=\"#\">About</a></nav></header></section>\n<section class=\"dz-mod\" data-mod=\"date\" aria-label=\"Date block\">\n<div class=\"dt\"><span class=\"k\">Friday 4 September</span><h1>Five things are happening in this building tonight.</h1><a class=\"und\" href=\"#\">The whole autumn programme</a></div></section>\n<section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Tonight list\">\n<ol class=\"sc\">\n  <li><span class=\"t\">18:00</span><div><h2>The Conversation</h2><span class=\"m\">1974 · 113 min · 35mm · Introduced by Ash Merriweather</span></div><span class=\"st\">Sold out</span></li>\n  <li><span class=\"t\">18:30</span><div><h2>Cléo from 5 to 7</h2><span class=\"m\">1962 · 90 min · DCP · Part of Varda in Full</span></div><span class=\"sa\">6 seats</span></li>\n  <li><span class=\"t\">20:15</span><div><h2>Chungking Express</h2><span class=\"m\">1994 · 102 min · 4K restoration</span></div><span class=\"sa\">31 seats</span></li>\n  <li><span class=\"t\">20:45</span><div><h2>Stalker</h2><span class=\"m\">1979 · 161 min · 35mm · One night only</span></div><span class=\"sa\">12 seats</span></li>\n  <li><span class=\"t\">23:00</span><div><h2>Night of the Living Dead</h2><span class=\"m\">1968 · 96 min · Late show, bar open</span></div><span class=\"sa\">44 seats</span></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Still\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/midnight-reel-still.webp\" alt=\"A duotone film still of a figure in a doorway\"><figcaption>Stalker, 1979 — 35mm print on loan from the BFI.</figcaption></figure></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Footer line\">\n<footer class=\"ft\"><span>42 Ancoats Street</span><span>Doors 30 minutes before</span><span>Members always £5</span></footer></section>\n</div>",
  "css": "\n.dz-midnight-reel-tonight { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 40px; }\n.dz-midnight-reel-tonight .mk { display: flex; align-items: baseline; gap: 40px; padding: 26px 0 20px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-tonight .nm { font-family: var(--pv-display); font-size: 25px; }\n.dz-midnight-reel-tonight .mk nav { display: flex; gap: 26px; margin-left: auto; }\n.dz-midnight-reel-tonight .mk a { font-size: 13px; color: var(--muted-foreground); text-decoration: none; padding-bottom: 4px; 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); }\n.dz-midnight-reel-tonight .mk a:hover { color: var(--foreground); background-size: 100% 1px; }\n.dz-midnight-reel-tonight .dt { padding: 64px 0 56px; max-width: 74%; }\n.dz-midnight-reel-tonight .k { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-tonight .dt h1 { font-family: var(--pv-display); font-size: 54px; font-weight: 500; line-height: 1.08; margin: 14px 0 26px; }\n.dz-midnight-reel-tonight .und { font-size: 13.5px; 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: 26% 1px; }\n.dz-midnight-reel-tonight .und:hover { background-size: 100% 1px; }\n.dz-midnight-reel-tonight .sc { list-style: none; margin: 0; padding: 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-tonight .sc li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px; align-items: baseline; gap: 26px; padding: 22px 0; border-bottom: var(--pv-bw) solid var(--border); transition: padding-left var(--dur-slow) var(--ease); }\n.dz-midnight-reel-tonight .sc li:hover { padding-left: 12px; }\n.dz-midnight-reel-tonight .t { font-family: var(--pv-mono); font-size: 19px; color: var(--primary); }\n.dz-midnight-reel-tonight .sc h2 { font-family: var(--pv-display); font-size: 30px; font-weight: 500; margin: 0 0 6px; }\n.dz-midnight-reel-tonight .m { font-size: 13px; color: var(--muted-foreground); }\n.dz-midnight-reel-tonight .st { font-family: var(--pv-mono); font-size: 12px; color: var(--accent); text-align: right; }\n.dz-midnight-reel-tonight .sa { font-family: var(--pv-mono); font-size: 12px; color: var(--muted-foreground); text-align: right; }\n.dz-midnight-reel-tonight .pl { margin: 56px 0 0; }\n.dz-midnight-reel-tonight .pl img { width: 100%; height: 240px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-midnight-reel-tonight .pl figcaption { font-size: 12.5px; color: var(--muted-foreground); padding-top: 10px; }\n.dz-midnight-reel-tonight .ft { display: flex; gap: 40px; padding: 40px 0 34px; font-size: 12.5px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-midnight-reel-tonight *, .dz-midnight-reel-tonight *::before, .dz-midnight-reel-tonight *::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"
}