@invisibleloop/pulse 0.12.2 → 0.14.1

package/examples/suzukibento.css

@@ -0,0 +1,513 @@
+/*
+ * suzukibento.css — Susuki Bento artist portfolio example
+ *
+ * Brutalist gallery palette: near-black ground, bone-white text, vermilion accent.
+ * Dark by default — palette set as bare token overrides on :root so they
+ * cascade into --ui-bg, --ui-text, --ui-accent etc. via pulse-ui.css.
+ * Zero border-radius throughout (--radius: 0px).
+ * Typography: Inter → system-ui (no external font requests).
+ *
+ * Token responsibility:
+ *   :root             — dark palette + zero-radius + font stack
+ *   Component styles  — layout only, var() references throughout
+ */
+
+/* ==========================================================================
+   1. Token overrides (hex values live here)
+   ========================================================================== */
+
+/*
+ * Override the bare cascade tokens that --ui-* variables reference.
+ * See pulse-ui.css :root: --ui-bg: var(--bg, ...) etc.
+ * Setting --bg, --surface, --text, --accent etc. on :root is enough to
+ * retheme the entire UI without touching --ui-* directly.
+ */
+:root {
+  --bg:           #0a0a0a;
+  --surface:      #131313;
+  --surface-2:    #1c1c1c;
+  --border:       #2a2a2a;
+  --text:         #f5f3ef;
+  --muted:        #8a8780;
+  --accent:       #ff4a2a;          /* vermilion — 4.5:1 on #0a0a0a */
+  --accent-hover: #ff6b4f;
+  --accent-dim:   rgba(255, 74, 42, 0.14);
+  --accent-text:  #0a0a0a;
+
+  /* Zero-radius brutalist design language */
+  --radius:    0px;
+  --radius-sm: 0px;
+
+  /* Font stack — system Inter, no HTTP request */
+  --font:         'Inter', system-ui, sans-serif;
+  --font-display: 'Inter', system-ui, sans-serif;
+}
+
+/* ==========================================================================
+   2. Component styles (var() only — no hex values below this line)
+   ========================================================================== */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* --------------------------------------------------------------------------
+   Skip link
+   -------------------------------------------------------------------------- */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ui-accent);
+  color: var(--ui-accent-text);
+  padding: var(--ui-space-2) var(--ui-space-4);
+  z-index: 100;
+}
+
+.skip-link:focus { left: var(--ui-space-2); }
+
+/* --------------------------------------------------------------------------
+   Sticky top nav (hand-rolled — no nav() component)
+   -------------------------------------------------------------------------- */
+.sb-nav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--ui-space-5) var(--ui-space-8);
+  background: var(--ui-bg);
+  border-bottom: 1px solid var(--ui-border);
+  font-size: var(--ui-text-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.sb-nav__brand {
+  font-weight: 700;
+  color: var(--ui-text);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+}
+
+.sb-nav__dot {
+  display: inline-block;
+  width: 0.45em;
+  height: 0.45em;
+  border-radius: 50%;
+  background: var(--ui-accent);
+  flex-shrink: 0;
+}
+
+.sb-nav__links {
+  display: flex;
+  gap: var(--ui-space-6);
+  list-style: none;
+}
+
+.sb-nav__links a {
+  color: var(--ui-muted);
+  text-decoration: none;
+}
+
+.sb-nav__links a:hover,
+.sb-nav__links a:focus { color: var(--ui-accent); }
+
+/* Burger — hidden on desktop */
+.sb-nav__toggle-input { display: none; }
+.sb-nav__burger       { display: none; }
+
+@media (max-width: 600px) {
+  .sb-nav {
+    flex-wrap: wrap;
+    padding: var(--ui-space-4) var(--ui-space-5);
+  }
+
+  .sb-nav__burger {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 22px;
+    height: 16px;
+    cursor: pointer;
+  }
+
+  .sb-nav__burger span {
+    display: block;
+    height: 2px;
+    background: var(--ui-text);
+    transition: transform 0.2s, opacity 0.2s;
+  }
+
+  .sb-nav__toggle-input:checked ~ .sb-nav__burger span:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+  }
+  .sb-nav__toggle-input:checked ~ .sb-nav__burger span:nth-child(2) {
+    opacity: 0;
+  }
+  .sb-nav__toggle-input:checked ~ .sb-nav__burger span:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+  }
+
+  .sb-nav nav {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--ui-bg);
+    border-bottom: 1px solid var(--ui-border);
+    z-index: 49;
+  }
+
+  .sb-nav__toggle-input:checked ~ nav {
+    display: block;
+  }
+
+  .sb-nav__links {
+    flex-direction: column;
+    gap: 0;
+    padding: var(--ui-space-4) var(--ui-space-5);
+  }
+
+  .sb-nav__links li { border-bottom: 1px solid var(--ui-border); }
+
+  .sb-nav__links a {
+    display: block;
+    padding: var(--ui-space-3) 0;
+    color: var(--ui-text);
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Hero
+   -------------------------------------------------------------------------- */
+.sb-hero {
+  padding: var(--ui-space-24) var(--ui-space-8) var(--ui-space-16);
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.sb-hero__eyebrow {
+  display: inline-block;
+  font-size: var(--ui-text-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--ui-accent);
+  margin-bottom: var(--ui-space-6);
+}
+
+.sb-hero__title {
+  font-size: clamp(3.5rem, 12vw, 11rem);
+  font-weight: 800;
+  line-height: 0.9;
+  letter-spacing: -0.05em;
+  color: var(--ui-text);
+}
+
+.sb-hero__title em {
+  font-style: normal;
+  color: var(--ui-accent);
+}
+
+.sb-hero__meta {
+  margin-top: var(--ui-space-10);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-8);
+}
+
+.sb-hero__meta-label {
+  display: block;
+  font-size: var(--ui-text-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--ui-muted);
+}
+
+.sb-hero__meta strong {
+  display: block;
+  color: var(--ui-text);
+  font-weight: 600;
+  margin-top: var(--ui-space-1);
+  letter-spacing: 0.04em;
+  font-size: var(--ui-text-sm);
+  text-transform: uppercase;
+}
+
+/* --------------------------------------------------------------------------
+   Section scaffolding
+   -------------------------------------------------------------------------- */
+.sb-section {
+  padding: var(--ui-space-20) var(--ui-space-8);
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.sb-section__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: var(--ui-space-12);
+  gap: var(--ui-space-6);
+  flex-wrap: wrap;
+}
+
+.sb-section__label {
+  font-size: var(--ui-text-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--ui-accent);
+}
+
+.sb-section__title {
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--ui-text);
+}
+
+/* --------------------------------------------------------------------------
+   Works grid (12-col asymmetric layout)
+   -------------------------------------------------------------------------- */
+.sb-works {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-auto-rows: 120px;
+  gap: var(--ui-space-4);
+}
+
+.sb-work {
+  position: relative;
+  overflow: hidden;
+  background: var(--ui-surface);
+}
+
+.sb-work img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  filter: grayscale(15%) contrast(1.05);
+  transition: filter 0.4s ease, transform 0.6s ease;
+}
+
+.sb-work:hover img {
+  filter: none;
+  transform: scale(1.02);
+}
+
+.sb-work__caption {
+  position: absolute;
+  left: var(--ui-space-3);
+  bottom: var(--ui-space-3);
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  padding: var(--ui-space-1) var(--ui-space-3);
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.sb-work__caption span {
+  color: var(--ui-muted);
+  margin-left: var(--ui-space-2);
+}
+
+/* Explicit positions — gap-free brickwork layout */
+.sb-work--a { grid-column: 1 / 8;  grid-row: 1 / 5; }
+.sb-work--b { grid-column: 8 / 13; grid-row: 1 / 4; }
+.sb-work--c { grid-column: 8 / 13; grid-row: 4 / 8; }
+.sb-work--d { grid-column: 1 / 5;  grid-row: 5 / 8; }
+.sb-work--e { grid-column: 5 / 8;  grid-row: 5 / 8; }
+.sb-work--f { grid-column: 1 / 13; grid-row: 8 / 12; }
+
+@media (max-width: 720px) {
+  .sb-works { grid-auto-rows: 80px; }
+  .sb-work--a, .sb-work--b, .sb-work--c,
+  .sb-work--d, .sb-work--e, .sb-work--f {
+    grid-column: span 12;
+    grid-row: span 3;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Artist statement
+   -------------------------------------------------------------------------- */
+.sb-statement {
+  max-width: 56rem;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: var(--ui-space-12);
+}
+
+.sb-statement p {
+  font-size: var(--ui-text-xl);
+  line-height: 1.6;
+  color: var(--ui-text);
+  margin-bottom: var(--ui-space-5);
+}
+
+.sb-statement p + p {
+  color: var(--ui-muted);
+  font-size: var(--ui-text-lg);
+}
+
+.sb-statement__bio {
+  font-size: var(--ui-text-sm);
+  color: var(--ui-muted);
+  line-height: 1.7;
+}
+
+.sb-statement__bio dt {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--ui-accent);
+  font-size: var(--ui-text-xs);
+  margin-top: var(--ui-space-4);
+}
+
+.sb-statement__bio dd { color: var(--ui-text); }
+
+@media (max-width: 720px) {
+  .sb-statement { grid-template-columns: 1fr; }
+}
+
+/* --------------------------------------------------------------------------
+   Exhibition table
+   -------------------------------------------------------------------------- */
+.sb-exhibitions {
+  list-style: none;
+  border-top: 1px solid var(--ui-border);
+}
+
+.sb-exhibition {
+  display: grid;
+  grid-template-columns: 80px 1fr 1fr 120px;
+  gap: var(--ui-space-6);
+  padding: var(--ui-space-5) 0;
+  border-bottom: 1px solid var(--ui-border);
+  align-items: baseline;
+}
+
+.sb-exhibition__year {
+  font-weight: 700;
+  color: var(--ui-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.sb-exhibition__title { color: var(--ui-text); font-weight: 500; }
+.sb-exhibition__venue { color: var(--ui-muted); }
+
+.sb-exhibition__tag {
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--ui-muted);
+  text-align: right;
+}
+
+.sb-exhibition__tag--solo { color: var(--ui-accent); }
+
+@media (max-width: 720px) {
+  .sb-exhibition { grid-template-columns: 60px 1fr; }
+  .sb-exhibition__venue,
+  .sb-exhibition__tag { grid-column: 2; text-align: left; }
+}
+
+/* --------------------------------------------------------------------------
+   Press list with dot separator
+   -------------------------------------------------------------------------- */
+.sb-press {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-8);
+  font-size: var(--ui-text-lg);
+  font-weight: 500;
+  color: var(--ui-muted);
+}
+
+.sb-press span { white-space: nowrap; }
+
+.sb-press span + span::before {
+  content: "\00b7";
+  margin-right: var(--ui-space-8);
+  color: var(--ui-accent);
+}
+
+@media (max-width: 600px) {
+  .sb-press {
+    flex-direction: column;
+    gap: var(--ui-space-3);
+    font-size: var(--ui-text-base);
+  }
+
+  .sb-press span + span::before { display: none; }
+}
+
+/* --------------------------------------------------------------------------
+   Contact
+   -------------------------------------------------------------------------- */
+.sb-contact {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--ui-space-12);
+  align-items: start;
+}
+
+.sb-contact h3 {
+  font-size: var(--ui-text-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--ui-accent);
+  margin-bottom: var(--ui-space-4);
+}
+
+.sb-contact p,
+.sb-contact a {
+  font-size: var(--ui-text-lg);
+  color: var(--ui-text);
+  line-height: 1.6;
+  text-decoration: none;
+  display: block;
+}
+
+.sb-contact a:hover { color: var(--ui-accent); }
+
+@media (max-width: 720px) {
+  .sb-contact { grid-template-columns: 1fr; gap: var(--ui-space-8); }
+}
+
+/* --------------------------------------------------------------------------
+   Footer
+   -------------------------------------------------------------------------- */
+.sb-foot {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--ui-space-6) var(--ui-space-8);
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--ui-muted);
+  border-top: 1px solid var(--ui-border);
+}
+
+@media (max-width: 600px) {
+  .sb-foot {
+    flex-direction: column;
+    gap: var(--ui-space-2);
+    padding: var(--ui-space-5);
+  }
+}
+
+.sb-foot__link {
+  color: var(--ui-muted);
+  text-decoration: none;
+}
+
+.sb-foot__link:hover { color: var(--ui-text); }

package/examples/suzukibento.js

@@ -0,0 +1,200 @@
+/**
+ * Pulse — Susuki Bento artist portfolio example
+ *
+ * Demonstrates:
+ *   - Dark-by-default brutalist gallery palette (near-black, bone, vermilion)
+ *   - Zero-radius design language (--radius: 0px overrides Pulse defaults)
+ *   - Asymmetric CSS grid works gallery (12-col with mixed span sizes)
+ *   - Pure vanilla HTML throughout — no Pulse UI components used.
+ *     Shows that Pulse views are just template literals; you can write
+ *     raw HTML for fully custom layouts without any component overhead.
+ *   - Custom sticky nav and simple footer hand-rolled in the view
+ *   - HTML-escaped data with a utility function (safe pattern for user data)
+ *   - Hover effect with CSS filter: grayscale + scale on artwork images
+ *   - Exhibition table using CSS grid (year / title / venue / tag columns)
+ *   - Press list with CSS ::before dot separator
+ *   - Two-column contact grid
+ *   - System font stack only (Inter → system-ui fallback) — no HTTP requests
+ *   - picsum.photos for artwork images (placeholder seeded by id)
+ *
+ * Run: node examples/dev.server.js  →  http://localhost:3001/suzukibento
+ */
+
+// ---------------------------------------------------------------------------
+// Static data
+// ---------------------------------------------------------------------------
+
+const works = [
+  { id: 1043, cls: 'sb-work--a', title: 'Erosion (Shibuya)',     year: '2025', medium: 'Oil, ash, dust on canvas — 220×180cm' },
+  { id: 1025, cls: 'sb-work--b', title: 'Fragments No. 14',     year: '2024', medium: 'Mixed media — 140×140cm' },
+  { id: 1015, cls: 'sb-work--c', title: 'Displaced',            year: '2024', medium: 'Acrylic, collage — 160×120cm' },
+  { id: 1059, cls: 'sb-work--d', title: 'Residue',              year: '2023', medium: 'Oil on linen — 100×100cm' },
+  { id: 1062, cls: 'sb-work--e', title: 'Mother Tongue',        year: '2023', medium: 'Oil, gold leaf — 180×140cm' },
+  { id: 1084, cls: 'sb-work--f', title: 'Untitled (Berlin VI)', year: '2025', medium: 'Concrete, pigment — 300×200cm' },
+]
+
+const exhibitions = [
+  { year: '2026', title: 'Soft Architectures',      venue: 'Kunsthalle Basel, CH',      tag: 'Solo',  solo: true  },
+  { year: '2025', title: 'The Weight of Surface',   venue: 'KW Institute, Berlin',      tag: 'Solo',  solo: true  },
+  { year: '2025', title: 'Asia Now',                venue: 'Monnaie de Paris',           tag: 'Group', solo: false },
+  { year: '2024', title: 'Memory as Material',      venue: 'Hauser & Wirth, Hong Kong', tag: 'Solo',  solo: true  },
+  { year: '2024', title: 'Berlin Biennale 13',      venue: 'Hamburger Bahnhof',         tag: 'Group', solo: false },
+  { year: '2023', title: 'Quiet Geographies',       venue: 'Mori Art Museum, Tokyo',    tag: 'Solo',  solo: true  },
+  { year: '2022', title: 'New Painting / New Asia',  venue: 'Tate St Ives',              tag: 'Group', solo: false },
+]
+
+const press = [
+  'Frieze', 'Artforum', 'ArtReview', 'S\u00fcddeutsche Zeitung',
+  'The Japan Times', 'Mousse', 'e-flux',
+]
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => (
+  { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+))
+
+const work = (w) => `
+  <figure class="sb-work ${w.cls}">
+    <img src="/images/suzukibento/${w.id}.jpg" alt="${esc(w.title)}, ${esc(w.year)}" loading="lazy" width="1200" height="900">
+    <figcaption class="sb-work__caption">${esc(w.title)} <span>${esc(w.year)}</span></figcaption>
+  </figure>
+`
+
+const exhibition = (e) => `
+  <li class="sb-exhibition">
+    <span class="sb-exhibition__year">${esc(e.year)}</span>
+    <span class="sb-exhibition__title">${esc(e.title)}</span>
+    <span class="sb-exhibition__venue">${esc(e.venue)}</span>
+    <span class="sb-exhibition__tag${e.solo ? ' sb-exhibition__tag--solo' : ''}">${esc(e.tag)}</span>
+  </li>
+`
+
+// ---------------------------------------------------------------------------
+// Spec
+// ---------------------------------------------------------------------------
+
+export default {
+  route: '/suzukibento',
+
+  meta: {
+    title:       'Susuki Bento \u2014 Painter',
+    description: 'Tokyo-born, Berlin-based mixed-media artist exploring memory, displacement, and urban erosion through large-scale painting.',
+    theme:       'dark',
+    styles:      ['/pulse-ui.css', '/examples/suzukibento.css'],
+  },
+
+  view: () => `
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+
+    <header class="sb-nav">
+      <a href="/suzukibento" class="sb-nav__brand" aria-label="Susuki Bento — home">Susuki Bento<span class="sb-nav__dot" aria-hidden="true"></span></a>
+      <input type="checkbox" id="sb-menu-toggle" class="sb-nav__toggle-input" aria-hidden="true">
+      <label for="sb-menu-toggle" class="sb-nav__burger" aria-label="Toggle menu">
+        <span></span><span></span><span></span>
+      </label>
+      <nav aria-label="Primary">
+        <ul class="sb-nav__links">
+          <li><a href="#works">Works</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#exhibitions">Exhibitions</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main id="main-content">
+      <section class="sb-hero">
+        <span class="sb-hero__eyebrow">ペインタ \u2014 b. Tokyo, 1984 \u00b7 lives Berlin</span>
+        <h1 class="sb-hero__title">Susuki<br>Bento<em>.</em></h1>
+        <div class="sb-hero__meta">
+          <div>
+            <span class="sb-hero__meta-label">Now showing</span>
+            <strong>The Weight of Surface \u2014 KW Institute, Berlin</strong>
+          </div>
+          <div>
+            <span class="sb-hero__meta-label">Closing</span>
+            <strong>14 September 2026</strong>
+          </div>
+          <div>
+            <span class="sb-hero__meta-label">Represented by</span>
+            <strong>Hauser &amp; Wirth</strong>
+          </div>
+        </div>
+      </section>
+
+      <section id="works" class="sb-section">
+        <div class="sb-section__head">
+          <span class="sb-section__label">01 \u2014 Selected works</span>
+          <h2 class="sb-section__title">Recent paintings, 2023\u20132025</h2>
+        </div>
+        <div class="sb-works">
+          ${works.map(work).join('')}
+        </div>
+      </section>
+
+      <section id="about" class="sb-section">
+        <div class="sb-section__head">
+          <span class="sb-section__label">02 \u2014 Statement</span>
+          <h2 class="sb-section__title">On surface, memory, dust</h2>
+        </div>
+        <div class="sb-statement">
+          <dl class="sb-statement__bio">
+            <dt>Born</dt><dd>Tokyo, 1984</dd>
+            <dt>Lives</dt><dd>Berlin-Wedding</dd>
+            <dt>Education</dt><dd>Tokyo University of the Arts, MFA<br>St\u00e4delschule, Frankfurt</dd>
+            <dt>Studio</dt><dd>Soldiner Stra\u00dfe 31, 13359 Berlin</dd>
+          </dl>
+          <div>
+            <p>The work begins with surface. I scrape, layer, bury and uncover until the paint behaves like architecture &mdash; weight, weather, decay. Each canvas is a record of what a place could not hold onto.</p>
+            <p>For two decades I have moved between Tokyo and Berlin, two cities defined by the things they have erased. My paintings collect this erasure: dust from demolition sites, charcoal from cleared lots, the colour of a wall before it was repainted. They are quiet objects made from loud absences.</p>
+          </div>
+        </div>
+      </section>
+
+      <section id="exhibitions" class="sb-section">
+        <div class="sb-section__head">
+          <span class="sb-section__label">03 \u2014 Exhibition history</span>
+          <h2 class="sb-section__title">Selected solo &amp; group, 2022\u20132026</h2>
+        </div>
+        <ul class="sb-exhibitions">
+          ${exhibitions.map(exhibition).join('')}
+        </ul>
+      </section>
+
+      <section class="sb-section">
+        <div class="sb-section__head">
+          <span class="sb-section__label">04 \u2014 Press</span>
+          <h2 class="sb-section__title">In print</h2>
+        </div>
+        <p class="sb-press">${press.map((p) => `<span>${esc(p)}</span>`).join('')}</p>
+      </section>
+
+      <section id="contact" class="sb-section">
+        <div class="sb-section__head">
+          <span class="sb-section__label">05 \u2014 Contact</span>
+          <h2 class="sb-section__title">Studio &amp; representation</h2>
+        </div>
+        <div class="sb-contact">
+          <div>
+            <h3>Studio enquiries</h3>
+            <a href="mailto:studio@susukibento.art">studio@susukibento.art</a>
+            <p>Soldiner Stra\u00dfe 31<br>13359 Berlin</p>
+          </div>
+          <div>
+            <h3>Gallery representation</h3>
+            <a href="mailto:bento@hauserwirth.com">bento@hauserwirth.com</a>
+            <p>Hauser &amp; Wirth<br>Z\u00fcrich \u00b7 London \u00b7 Hong Kong</p>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="sb-foot">
+      <span>&copy; Susuki Bento Studio 2026</span>
+      <span>Site by <a href="https://invisibleloop.com" class="sb-foot__link" target="_blank" rel="noopener">invisibleloop</a></span>
+    </footer>
+  `,
+}