{
  "id": "supper-club-room",
  "name": "The Room",
  "theme": "supper-club",
  "category": "Landing",
  "description": "A restaurant front page whose only photograph is full-bleed and whose only control is a booking form, with the current service named in mono at the top.",
  "layout": "A full-bleed dusk photograph, an offset display title beneath it, then the service statement and a single three-field booking line.",
  "modules": [
    {
      "key": "photo",
      "name": "Full-bleed room",
      "html": "\n<figure class=\"fb\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure>"
    },
    {
      "key": "title",
      "name": "Title block",
      "html": "\n<header class=\"tb\"><span class=\"k\">Kilcarn · thirty covers</span><h1>Supper Club</h1><p class=\"ld\">A dining room that serves one thing at a time. There is a lunch and there is a dinner, and whichever is running is the one on this page.</p></header>"
    },
    {
      "key": "service",
      "name": "Service statement",
      "html": "\n<section class=\"sv\"><div><span class=\"k\">Now serving</span><p class=\"mn\">Dinner · 18.00 — 22.30</p></div><div><span class=\"k\">Next</span><p class=\"mn\">Lunch · Friday 12.00 — 15.00</p></div><div><span class=\"k\">Closed</span><p class=\"mn\">Sunday and Monday</p></div></section>"
    },
    {
      "key": "book",
      "name": "Booking line",
      "html": "\n<section class=\"bk\"><h2 class=\"ch\">Book a table</h2><form><label><span class=\"k\">Date</span><input class=\"mn\" value=\"2026-03-12\"></label><label><span class=\"k\">Covers</span><input class=\"mn\" value=\"2\"></label><label><span class=\"k\">Time</span><input class=\"mn\" value=\"19:45\"></label><button class=\"pri\">Reserve</button></form><p class=\"nt\">Tables of five or more are asked to take the set menu. We hold four seats at the counter for walk-ins every night and do not take names for them.</p></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "supper-club-room",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:20:59+09:00",
    "updatedAt": "2026-09-02T01:20:59+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/supper-club-room.json",
  "structure": "A full-bleed dusk photograph, an offset display title beneath it, then the service statement and a single three-field booking line.",
  "html": "<div class=\"dz dz-supper-club-room\" data-design=\"supper-club-room\" data-theme=\"supper-club\">\n<section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Full-bleed room\">\n<figure class=\"fb\"><img src=\"https://designlookbook.dev/assets/img/supper-club-hero.webp\" alt=\"A dining room at dusk with laid tables and low warm light\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"title\" aria-label=\"Title block\">\n<header class=\"tb\"><span class=\"k\">Kilcarn · thirty covers</span><h1>Supper Club</h1><p class=\"ld\">A dining room that serves one thing at a time. There is a lunch and there is a dinner, and whichever is running is the one on this page.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"service\" aria-label=\"Service statement\">\n<section class=\"sv\"><div><span class=\"k\">Now serving</span><p class=\"mn\">Dinner · 18.00 — 22.30</p></div><div><span class=\"k\">Next</span><p class=\"mn\">Lunch · Friday 12.00 — 15.00</p></div><div><span class=\"k\">Closed</span><p class=\"mn\">Sunday and Monday</p></div></section></section>\n<section class=\"dz-mod\" data-mod=\"book\" aria-label=\"Booking line\">\n<section class=\"bk\"><h2 class=\"ch\">Book a table</h2><form><label><span class=\"k\">Date</span><input class=\"mn\" value=\"2026-03-12\"></label><label><span class=\"k\">Covers</span><input class=\"mn\" value=\"2\"></label><label><span class=\"k\">Time</span><input class=\"mn\" value=\"19:45\"></label><button class=\"pri\">Reserve</button></form><p class=\"nt\">Tables of five or more are asked to take the set menu. We hold four seats at the counter for walk-ins every night and do not take names for them.</p></section></section>\n</div>",
  "css": "\n.dz-supper-club-room { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-supper-club-room .k { text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-supper-club-room .mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-supper-club-room .fb { margin: 0; }\n.dz-supper-club-room .fb img { width: 100%; height: 460px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-supper-club-room .tb { max-width: 58ch; margin: 0 auto; padding: 40px 40px 0; }\n.dz-supper-club-room h1 { font-family: var(--pv-display); font-weight: 300; font-size: 72px; line-height: 1.02; letter-spacing: -.02em; margin: 12px 0 14px; }\n.dz-supper-club-room .ld { font-size: 18px; line-height: 1.68; margin: 0; }\n.dz-supper-club-room .sv { max-width: 58ch; margin: 40px auto 0; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--border); padding-top: 24px; }\n.dz-supper-club-room .sv p { margin: 6px 0 0; color: var(--muted-foreground); }\n.dz-supper-club-room .bk { max-width: 58ch; margin: 0 auto; padding: 0 40px 64px; }\n.dz-supper-club-room .ch { text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 600; text-align: center; margin: 64px 0 30px; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 30px; }\n.dz-supper-club-room form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: end; }\n.dz-supper-club-room label { display: block; }\n.dz-supper-club-room input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 2px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-size: 13px; font-size: 15px; padding: 11px 12px; }\n.dz-supper-club-room input:focus { outline: none; border-color: var(--primary); }\n.dz-supper-club-room .pri { grid-column: 1 / -1; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 1px; padding: 14px; font: inherit; text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 600; cursor: pointer; }\n.dz-supper-club-room .nt { font-size: 14px; line-height: 1.6; color: var(--muted-foreground); margin: 20px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-supper-club-room *, .dz-supper-club-room *::before, .dz-supper-club-room *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/supper-club.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Cardo:wght@400;500;600;700&family=Xanh+Mono:wght@400;500;600;700&display=swap"
}