{
  "id": "midnight-reel-member",
  "name": "Member Card",
  "theme": "midnight-reel",
  "category": "Profile & Social",
  "description": "A membership page built around what someone has actually watched, with the count set as large as the name and the history as a plain ruled ledger.",
  "layout": "A two-column split where the left holds an oversized attendance figure and the right is a scrolling ledger of visits; the membership card itself is drawn in hairlines and bleeds off the top edge.",
  "modules": [
    {
      "key": "card",
      "name": "Membership card",
      "html": "\n<section class=\"cd\"><div class=\"cdi\"><span class=\"k\">Member since 2019</span><b>Nadia Okonjo-Bright</b><span class=\"no\">M-0-4482</span></div><span class=\"ty\">Full · renews 3 Jan</span></section>"
    },
    {
      "key": "count",
      "name": "Attendance",
      "html": "\n<div class=\"ct\"><b>147</b><span>films seen here</span>\n<dl><div><dt>This year</dt><dd>31</dd></div><div><dt>On film</dt><dd>62</dd></div><div><dt>Late shows</dt><dd>19</dd></div><div><dt>Saved</dt><dd>£1,284</dd></div></dl></div>"
    },
    {
      "key": "ledger",
      "name": "Visit ledger",
      "html": "\n<ol class=\"lg\">\n  <li><span class=\"d\">28 Aug</span><b>Vagabond</b><span class=\"m\">20:15 · Screen 2 · D4</span></li>\n  <li><span class=\"d\">21 Aug</span><b>The Long Goodbye</b><span class=\"m\">18:00 · Screen 1 · 35mm · C8</span></li>\n  <li><span class=\"d\">19 Aug</span><b>Daisies</b><span class=\"m\">23:00 · Screen 2 · late show · B2</span></li>\n  <li><span class=\"d\">14 Aug</span><b>Barry Lyndon</b><span class=\"m\">17:30 · Screen 1 · 70mm · F11</span></li>\n  <li><span class=\"d\">09 Aug</span><b>Cure</b><span class=\"m\">21:00 · Screen 2 · E5</span></li>\n  <li><span class=\"d\">02 Aug</span><b>Jeanne Dielman</b><span class=\"m\">15:00 · Screen 1 · C6</span></li>\n</ol>"
    },
    {
      "key": "next",
      "name": "Next up",
      "html": "\n<aside class=\"nx\"><span class=\"k\">Held for you</span><b>Stalker</b><span class=\"m\">Fri 4 Sep · 20:45 · C6, C7</span><a class=\"und\" href=\"#\">Manage booking</a></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "midnight-reel-member",
    "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-member.json",
  "structure": "A two-column split where the left holds an oversized attendance figure and the right is a scrolling ledger of visits; the membership card itself is drawn in hairlines and bleeds off the top edge.",
  "html": "<div class=\"dz dz-midnight-reel-member\" data-design=\"midnight-reel-member\" data-theme=\"midnight-reel\">\n<section class=\"dz-mod\" data-mod=\"card\" aria-label=\"Membership card\">\n<section class=\"cd\"><div class=\"cdi\"><span class=\"k\">Member since 2019</span><b>Nadia Okonjo-Bright</b><span class=\"no\">M-0-4482</span></div><span class=\"ty\">Full · renews 3 Jan</span></section></section><section class=\"dz-mod\" data-mod=\"count\" aria-label=\"Attendance\">\n<div class=\"ct\"><b>147</b><span>films seen here</span>\n<dl><div><dt>This year</dt><dd>31</dd></div><div><dt>On film</dt><dd>62</dd></div><div><dt>Late shows</dt><dd>19</dd></div><div><dt>Saved</dt><dd>£1,284</dd></div></dl></div></section><section class=\"dz-mod\" data-mod=\"ledger\" aria-label=\"Visit ledger\">\n<ol class=\"lg\">\n  <li><span class=\"d\">28 Aug</span><b>Vagabond</b><span class=\"m\">20:15 · Screen 2 · D4</span></li>\n  <li><span class=\"d\">21 Aug</span><b>The Long Goodbye</b><span class=\"m\">18:00 · Screen 1 · 35mm · C8</span></li>\n  <li><span class=\"d\">19 Aug</span><b>Daisies</b><span class=\"m\">23:00 · Screen 2 · late show · B2</span></li>\n  <li><span class=\"d\">14 Aug</span><b>Barry Lyndon</b><span class=\"m\">17:30 · Screen 1 · 70mm · F11</span></li>\n  <li><span class=\"d\">09 Aug</span><b>Cure</b><span class=\"m\">21:00 · Screen 2 · E5</span></li>\n  <li><span class=\"d\">02 Aug</span><b>Jeanne Dielman</b><span class=\"m\">15:00 · Screen 1 · C6</span></li>\n</ol></section><section class=\"dz-mod\" data-mod=\"next\" aria-label=\"Next up\">\n<aside class=\"nx\"><span class=\"k\">Held for you</span><b>Stalker</b><span class=\"m\">Fri 4 Sep · 20:45 · C6, C7</span><a class=\"und\" href=\"#\">Manage booking</a></aside></section>\n</div>",
  "css": "\n.dz-midnight-reel-member { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 48px; padding: 0 40px 36px; }\n.dz-midnight-reel-member .cd { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; border: 1px solid var(--primary); border-top: 0; padding: 24px 26px 20px; margin-bottom: 40px; }\n.dz-midnight-reel-member .k { font-size: 12px; color: var(--muted-foreground); }\n.dz-midnight-reel-member .cd b { display: block; font-family: var(--pv-display); font-size: 34px; font-weight: 500; margin: 6px 0 4px; }\n.dz-midnight-reel-member .no { font-family: var(--pv-mono); font-size: 12px; color: var(--primary); }\n.dz-midnight-reel-member .ty { font-family: var(--pv-mono); font-size: 12px; color: var(--muted-foreground); }\n.dz-midnight-reel-member .ct b { font-family: var(--pv-mono); font-size: 88px; font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--primary); display: block; }\n.dz-midnight-reel-member .ct > span { font-family: var(--pv-display); font-size: 21px; display: block; margin: 8px 0 26px; }\n.dz-midnight-reel-member .ct dl { margin: 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-member .ct dl div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-member .ct dt { font-size: 13px; color: var(--muted-foreground); }\n.dz-midnight-reel-member .ct dd { margin: 0; font-family: var(--pv-mono); font-size: 15px; }\n.dz-midnight-reel-member .lg { list-style: none; margin: 0; padding: 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-member .lg li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 3px 20px; padding: 14px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-member .d { grid-row: 1 / 3; font-family: var(--pv-mono); font-size: 12px; color: var(--muted-foreground); padding-top: 4px; }\n.dz-midnight-reel-member .lg b { font-family: var(--pv-display); font-size: 21px; font-weight: 500; }\n.dz-midnight-reel-member .m { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-member .nx { grid-column: 2 / 3; margin-top: 24px; padding: 18px 0 0; border-top: 1px solid var(--primary); }\n.dz-midnight-reel-member .nx b { display: block; font-family: var(--pv-display); font-size: 26px; font-weight: 500; margin: 6px 0 4px; }\n.dz-midnight-reel-member .und { display: inline-block; margin-top: 12px; 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: 34% 1px; }\n.dz-midnight-reel-member .und:hover { background-size: 100% 1px; }\n@media (prefers-reduced-motion: reduce) { .dz-midnight-reel-member *, .dz-midnight-reel-member *::before, .dz-midnight-reel-member *::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"
}