@invisibleloop/pulse 0.20.11 → 0.20.20

package/examples/suzukibento.css

@@ -1,513 +0,0 @@
-/*
- * 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

@@ -1,200 +0,0 @@
-/**
- * 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>
-  `,
-}