{
  "id": "reed-bed-water",
  "name": "Water Quality",
  "theme": "reed-bed",
  "category": "Landing",
  "description": "A public-facing page that opens on a single bathing-water level strip at full width, because a beach visitor wants one fact and its band, not a dashboard.",
  "layout": "A full-width level strip as the hero element above an estuary photograph, then three ruled explanatory sections with no cards at all.",
  "modules": [
    {
      "key": "hero",
      "name": "Public level hero",
      "html": "\n<header class=\"hr\"><span class=\"k\">Bathing water · Kilcarn Strand</span><h1>Excellent today</h1><div class=\"wide\"><span class=\"sc\"><span>Poor</span><span>Sufficient</span><span>Good</span><span>Excellent</span></span><div class=\"tkw\"><div class=\"bdw\"></div><span class=\"mkw\"></span></div></div><p class=\"sub\">Sampled 12 March 06:40 · E. coli 14 cfu/100 ml · intestinal enterococci 6 cfu/100 ml</p></header>"
    },
    {
      "key": "photo",
      "name": "Estuary plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART estuary}}\" alt=\"{{ARTALT estuary}}\"></figure>"
    },
    {
      "key": "expl",
      "name": "Explanatory sections",
      "html": "\n<section class=\"ex\">\n<article><h2>What the classification means</h2><p>Excellent is the highest of four classes and is calculated from the last four bathing seasons, not from today. Today's sample is shown because a single bad day matters to you even when the classification does not move.</p></article>\n<article><h2>When it changes</h2><p>Heavy rain moves sewer overflows and farm runoff into the estuary within hours. We publish a short-term pollution warning when that is forecast, and we publish it before the sample confirms it.</p></article>\n<article><h2>Where the number comes from</h2><p>A sampler stands in the water at knee depth at N 4390 8998 and fills a bottle. It is analysed within 24 hours at the county laboratory. Nothing about this is modelled.</p></article>\n</section>"
    },
    {
      "key": "sub",
      "name": "Notification bar",
      "html": "\n<footer class=\"nb\"><div><span class=\"k\">Short-term pollution alerts</span><p>One message when we forecast a problem here. Nothing else, ever.</p></div><form><input placeholder=\"Mobile number\"><button class=\"pri\">Notify me</button></form></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "reed-bed-water",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:12:17+09:00",
    "updatedAt": "2026-09-02T01:12:17+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/reed-bed-water.json",
  "structure": "A full-width level strip as the hero element above an estuary photograph, then three ruled explanatory sections with no cards at all.",
  "html": "<div class=\"dz dz-reed-bed-water\" data-design=\"reed-bed-water\" data-theme=\"reed-bed\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Public level hero\">\n<header class=\"hr\"><span class=\"k\">Bathing water · Kilcarn Strand</span><h1>Excellent today</h1><div class=\"wide\"><span class=\"sc\"><span>Poor</span><span>Sufficient</span><span>Good</span><span>Excellent</span></span><div class=\"tkw\"><div class=\"bdw\"></div><span class=\"mkw\"></span></div></div><p class=\"sub\">Sampled 12 March 06:40 · E. coli 14 cfu/100 ml · intestinal enterococci 6 cfu/100 ml</p></header></section>\n<section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Estuary plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/reed-bed-estuary.webp\" alt=\"An estuary at low tide with channels cut through mud\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"expl\" aria-label=\"Explanatory sections\">\n<section class=\"ex\">\n<article><h2>What the classification means</h2><p>Excellent is the highest of four classes and is calculated from the last four bathing seasons, not from today. Today's sample is shown because a single bad day matters to you even when the classification does not move.</p></article>\n<article><h2>When it changes</h2><p>Heavy rain moves sewer overflows and farm runoff into the estuary within hours. We publish a short-term pollution warning when that is forecast, and we publish it before the sample confirms it.</p></article>\n<article><h2>Where the number comes from</h2><p>A sampler stands in the water at knee depth at N 4390 8998 and fills a bottle. It is analysed within 24 hours at the county laboratory. Nothing about this is modelled.</p></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"sub\" aria-label=\"Notification bar\">\n<footer class=\"nb\"><div><span class=\"k\">Short-term pollution alerts</span><p>One message when we forecast a problem here. Nothing else, ever.</p></div><form><input placeholder=\"Mobile number\"><button class=\"pri\">Notify me</button></form></footer></section>\n</div>",
  "css": "\n.dz-reed-bed-water { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-reed-bed-water .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-reed-bed-water .hr { padding: 44px 28px 28px; }\n.dz-reed-bed-water h1 { font-family: var(--pv-display); font-weight: 600; font-size: 50px; line-height: 1.1; letter-spacing: -.02em; margin: 8px 0 20px; color: var(--primary); }\n.dz-reed-bed-water .wide { margin-bottom: 14px; }\n.dz-reed-bed-water .sc { display: flex; text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 6px; }\n.dz-reed-bed-water .sc span { flex: 1; }\n.dz-reed-bed-water .tkw { position: relative; height: 10px; background: var(--secondary); border-radius: 5px; }\n.dz-reed-bed-water .bdw { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; background: color-mix(in oklab, var(--accent) 32%, transparent); border-radius: 0 5px 5px 0; }\n.dz-reed-bed-water .mkw { position: absolute; left: 88%; top: -5px; width: 3px; height: 20px; background: var(--accent); border-radius: 1px; }\n.dz-reed-bed-water .sub { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); margin: 0; }\n.dz-reed-bed-water .pl { margin: 0; }\n.dz-reed-bed-water .pl img { width: 100%; height: 320px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-reed-bed-water .ex { padding: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }\n.dz-reed-bed-water .ex article { border-top: 1px solid var(--border); padding-top: 14px; }\n.dz-reed-bed-water h2 { font-family: var(--pv-display); font-weight: 600; font-size: 19px; margin: 0 0 8px; }\n.dz-reed-bed-water .ex p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted-foreground); }\n.dz-reed-bed-water .nb { display: flex; align-items: center; gap: 32px; padding: 24px 28px 44px; border-top: 1px solid var(--border); margin: 0 28px; }\n.dz-reed-bed-water .nb p { margin: 6px 0 0; font-size: 14.5px; color: var(--muted-foreground); }\n.dz-reed-bed-water form { display: flex; gap: 8px; margin-left: auto; }\n.dz-reed-bed-water input { background: var(--card); border: 1px solid var(--border); border-radius: 4px; color: var(--foreground); font: inherit; font-size: 14.5px; padding: 10px 12px; }\n.dz-reed-bed-water input:focus { outline: none; border-color: var(--primary); }\n.dz-reed-bed-water .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 11px 18px; font: inherit; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-reed-bed-water *, .dz-reed-bed-water *::before, .dz-reed-bed-water *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/reed-bed.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Petrona:wght@400;500;600;700&family=Asap:wght@400;500;600;700&family=Cousine:wght@400;500;600;700&display=swap"
}