[object Object]

← back to Screenprintedwallpaper

graphic-loop pass 8: theme-aware font DM Serif Display (panel-approved comprehensive 16-bucket assignment)

03b08c9132e3ebce2e757d00bab883bcf763ff2a · 2026-05-07 08:41:57 -0700 · Steve

Files touched

Diff

commit 03b08c9132e3ebce2e757d00bab883bcf763ff2a
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu May 7 08:41:57 2026 -0700

    graphic-loop pass 8: theme-aware font DM Serif Display (panel-approved comprehensive 16-bucket assignment)
---
 public/index.html                       |  17 +-
 public/index.html.bak.1778166279726     | 635 +++++++++++++++++++++++++++++++
 public/index.html.bak.dom.1778168197471 | 644 ++++++++++++++++++++++++++++++++
 3 files changed, 1292 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index c50b917..db7840c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,15 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-E3VL9WM9D2"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-E3VL9WM9D2');
+</script>
+
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Atelier Anonyme — screen-print — numbered editions.</title>
 <meta name="description" content="Atelier Anonyme is a curated atelier dedicated entirely to screen-print. We do one thing — and we do it carefully.">
@@ -150,7 +159,7 @@ textarea:focus-visible,
 </script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap">
 </head>
 <body>
 
@@ -458,7 +467,7 @@ loadGridPage();
   .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
 
 /* graphics-loop pass 5: serif hero typography + nav legibility */
-.cinema h1, h1.headline { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -0.01em }
+.cinema h1, h1.headline { font-family: 'DM Serif Display', Georgia, serif; font-weight: 500; letter-spacing: -0.01em }
 .h-link { font-size: 13px; letter-spacing: 0.06em }
 </style>
 
@@ -477,9 +486,9 @@ loadGridPage();
         <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
         <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
       </button>
-      <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
+      <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@screenprintedwallpaper.com">
         <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
-        <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
+        <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@screenprintedwallpaper.com</span></span>
       </a>
     </div>
   </div>
diff --git a/public/index.html.bak.1778166279726 b/public/index.html.bak.1778166279726
new file mode 100644
index 0000000..c50b917
--- /dev/null
+++ b/public/index.html.bak.1778166279726
@@ -0,0 +1,635 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Atelier Anonyme — screen-print — numbered editions.</title>
+<meta name="description" content="Atelier Anonyme is a curated atelier dedicated entirely to screen-print. We do one thing — and we do it carefully.">
+<meta name="theme-color" content="#FAFAFA">
+<link rel="canonical" href="https://screenprintedwallpaper.com/">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet">
+<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Atelier Anonyme",
+  "url": "https://screenprintedwallpaper.com/",
+  "email": "info@screenprintedwallpaper.com"
+}
+</script>
+<script src="/zd-loader.js" defer></script>
+<style>
+:root {
+  --bg: #FAFAFA;
+  --paper: #000;
+  --muted: #8B7866;
+  --line: rgba(0,0,0,0.10);
+  --accent: #FFF;
+  --bg-soft: rgba(0,0,0,0.10);
+  --cols: 6;
+}
+html[data-theme="dark"] {
+  --bg: #000;
+  --paper: #FAFAFA;
+  --muted: #C9B89E;
+  --line: rgba(255,254,250,0.12);
+  --accent: #000;
+  --bg-soft: #2a1f15;
+}
+* { margin:0; padding:0; box-sizing:border-box }
+html { scroll-behavior:smooth }
+body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
+/* DW-FASHION-TEMPLATE-OVERRIDE */
+.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Inter', Georgia, serif !important; font-weight:300 !important; letter-spacing:0.20em !important;text-transform:uppercase !important; }
+
+/* ===== Auto-hide header ===== */
+header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
+.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
+.h-link:hover { opacity:0.7 }
+.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
+
+/* ===== Cinema hero ===== */
+.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
+.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
+.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
+.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
+.corner-mark::before { content:"◆ "; margin-right:6px }
+.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
+.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
+.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
+.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
+.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
+.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
+.enter:hover { gap:22px }
+.enter svg { width:24px; height:12px }
+
+/* ===== Section ===== */
+.section { padding:96px 32px }
+.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
+.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
+.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
+.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
+.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
+
+/* ===== Filter bar ===== */
+.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
+.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
+.chip:hover { border-color:var(--paper) }
+.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
+.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
+.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
+.search input::placeholder { color:var(--muted) }
+.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
+
+/* ===== Grid-density slider ===== */
+.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
+.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
+.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
+.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
+.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
+.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
+
+/* ===== Stats line ===== */
+.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
+
+/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
+.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
+.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
+.card:hover { transform:scale(1.04); z-index:5 }
+.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
+.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
+.card:hover .overlay { transform:translateY(0); opacity:1 }
+.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
+.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
+.card .actions { margin-top:10px; display:flex; gap:6px }
+.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
+.card .sample-btn:hover { background:var(--accent); color:#fff }
+
+@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
+@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
+
+.sentinel { height:1px }
+.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
+
+/* ===== Footer ===== */
+footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
+.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
+.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
+.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
+.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
+.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
+.footer-col a:hover { color:var(--accent) }
+.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
+
+@media (max-width:720px) {
+  .corner-mark, .meta-line, .enter { font-size:10px }
+  .center-mark { font-size:30px; letter-spacing:0.32em }
+  .section, footer { padding-left:20px; padding-right:20px }
+  .footer-grid { grid-template-columns:1fr; gap:32px }
+  .search { margin-left:0; flex:1 1 100% }
+}
+
+.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
+.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
+
+/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
+/* Strictly :focus-visible so mouse clicks do NOT show the ring */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+</style>
+<script>
+(function(){ try { var t = localStorage.getItem('sp_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
+</script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap">
+</head>
+<body>
+
+<header>
+  <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
+  <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
+</header>
+
+<section class="cinema">
+  <div class="cinema-bg"></div>
+  <div class="corner-mark">Hand-Pulled</div>
+  <div class="center-mark">Atelier Anonyme<span class="tm">.</span><span class="sub">Pulled. Pressed. Printed.</span></div>
+  <div class="meta-line">Silkscreen · Block-Print · Hand-Pulled<span class="num" id="heroNum"></span></div>
+  <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
+</section>
+
+<section class="section" id="shop">
+  <div class="section-header">
+    <div>
+      <div class="section-eyebrow">The Collection</div>
+      <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
+    </div>
+    <div class="section-meta">Silkscreen · Block-Print · Hand-Pulled</div>
+  </div>
+
+  <div class="filters" id="facets">
+    <button class="chip active" data-facet="all">All</button>
+  </div>
+
+  <div class="density">
+    <label>Sort</label>
+    <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
+      <option value="newest">Newest</option>
+      <option value="color">Color</option>
+      <option value="style">Style</option>
+      <option value="sku">SKU A→Z</option>
+      <option value="title">Title A→Z</option>
+      <option value="price-asc">Price ↑</option>
+      <option value="price-desc">Price ↓</option>
+    </select>
+    <label>Grid</label>
+    <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
+    <span class="ct" id="densityLabel">6 cols</span>
+    <div class="search">
+      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
+      <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
+    </div>
+  </div>
+
+  <div class="stat-line" id="statLine">Loading…</div>
+  <div class="grid" id="grid"></div>
+  <div class="loading" id="loading">Loading more…</div>
+  <div class="sentinel" id="sentinel"></div>
+</section>
+
+<footer>
+  <div class="footer-grid">
+    <div>
+      <div class="footer-brand">Atelier Anonyme</div>
+      <p class="footer-text">Atelier Anonyme is a curated atelier dedicated entirely to screen-print. We do one thing — and we do it carefully.</p>
+      <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
+    </div>
+    <div class="footer-col">
+      <h4>Aesthetic</h4>
+      <div id="footerFacets"></div>
+    </div>
+    <div class="footer-col">
+      <h4>Trade</h4>
+      <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
+      <button onclick="dwmOpen('Sample')">Request Sample</button>
+      <button onclick="dwmOpen('Contact')">Contact</button>
+    </div>
+  </div>
+  <div class="footer-bottom">
+    <span>screenprintedwallpaper.com · Atelier Anonyme</span>
+    <span><a href="mailto:info@screenprintedwallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@screenprintedwallpaper.com</a></span>
+    <span id="footerStat"></span>
+  </div>
+</footer>
+
+<script>
+// mini-constellation — 43 niche-stars, current site highlighted in gold
+(function(){
+  const SLUG = "screenprintedwallpaper";
+  const NICHES = [
+    ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
+    ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
+    ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
+    ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
+    ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
+    ['suedewallpaper','Suede','mat'],
+    ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
+    ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
+    ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
+    ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
+    ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
+    ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
+    ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
+    ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
+    ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
+  ];
+  const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
+  const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
+  const groups = { mat:[], dec:[], cra:[], use:[] };
+  for (const n of NICHES) groups[n[2]].push(n);
+  const svg = document.getElementById('miniConst');
+  if (!svg) return;
+  const bandW = W / BANDS.length;
+  let nodes = '';
+  BANDS.forEach((band, bi) => {
+    const list = groups[band];
+    const cx = bi * bandW + bandW / 2;
+    list.forEach((n, i) => {
+      const t = list.length === 1 ? 0.5 : i / (list.length - 1);
+      // deterministic jitter per slug
+      let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
+      const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
+      const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6;  // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
+      const x = cx + jx, y = 28 + t * (H - 56) + jy;
+      const isCurrent = n[0] === SLUG;
+      const r = isCurrent ? 8 : 4;
+      const op = isCurrent ? 1 : 0.55;
+      nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
+        <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
+          <title>${n[1]} — ${n[0]}.com</title>
+        </circle>
+        ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
+      </g>`;
+    });
+  });
+  // append nodes after defs
+  svg.insertAdjacentHTML('beforeend', nodes);
+  svg.querySelectorAll('.mc-node').forEach(n => {
+    n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
+    n.addEventListener('mouseleave', e => {
+      const isCurrent = n.dataset.slug === SLUG;
+      n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
+    });
+    n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
+  });
+})();
+</script>
+
+<script>
+const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
+const LABELS = {"screen-print":"Screen print"};
+
+function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c])); }
+// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
+function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
+function cardHTML(p) {
+  const eager = state.page === 1;
+  return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
+    + '<div class="overlay">'
+    + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
+    + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
+    + '<div class="actions">'
+    + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'&quot;') + ')">Sample</button>'
+    + '</div></div>';
+}
+
+async function loadFacets() {
+  let f;
+  try {
+    const r = await fetch('/api/facets');
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    f = await r.json();
+  } catch (e) { console.error('loadFacets failed:', e); return; }
+  const el = document.getElementById('facets');
+  for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
+    const b = document.createElement('button');
+    b.className = 'chip'; b.dataset.facet = k;
+    b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
+    el.appendChild(b);
+  }
+  el.addEventListener('click', e => {
+    if (e.target.tagName !== 'BUTTON') return;
+    document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
+    e.target.classList.add('active');
+    state.facet = e.target.dataset.facet;
+    resetGrid();
+  });
+  document.getElementById('totalCount').textContent = f.total;
+  document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
+  // Footer aesthetic links
+  const footerEl = document.getElementById('footerFacets');
+  for (const [k] of Object.entries(f.aesthetics)) {
+    const b = document.createElement('button');
+    b.textContent = LABELS[k] || k;
+    b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
+    footerEl.appendChild(b);
+  }
+}
+
+function resetGrid() {
+  state.page = 1; state.exhausted = false;
+  document.getElementById('grid').innerHTML = '';
+  document.getElementById('loading').textContent = 'Loading…';
+  loadGridPage();
+}
+
+async function loadGridPage() {
+  if (state.loading || state.exhausted) return;
+  state.loading = true;
+  const params = new URLSearchParams({ page:state.page, limit:24 });
+  if (state.q) params.set('q', state.q);
+  if (state.facet !== 'all') params.set('aesthetic', state.facet);
+  let data;
+  try {
+    const r = await fetch('/api/products?' + params);
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    data = await r.json();
+  } catch (e) {
+    console.error('loadGridPage failed:', e);
+    document.getElementById('loading').textContent = '— offline — refresh to retry —';
+    state.loading = false;
+    return;
+  }
+  state.total = data.total; state.pages = data.pages;
+
+  if (state.page === 1) {
+    document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
+  }
+  const grid = document.getElementById('grid');
+  for (const p of data.items) {
+    const a = document.createElement('a');
+    a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
+    a.innerHTML = cardHTML(p);
+    grid.appendChild(a);
+  }
+  if (state.page >= state.pages || data.items.length === 0) {
+    state.exhausted = true;
+    document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
+  } else state.page++;
+  state.loading = false;
+}
+
+const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
+io.observe(document.getElementById('sentinel'));
+
+document.getElementById('searchInput').addEventListener('input', e => {
+  state.q = e.target.value.trim();
+  clearTimeout(window._t);
+  window._t = setTimeout(resetGrid, 220);
+});
+
+// Density slider
+const slider = document.getElementById('densitySlider');
+const dlabel = document.getElementById('densityLabel');
+function setDensity(n) {
+  document.documentElement.style.setProperty('--cols', n);
+  dlabel.textContent = n + ' cols';
+  try { localStorage.setItem('sp_theme_density', n); } catch(e){}
+}
+slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
+const savedDensity = parseInt(localStorage.getItem('sp_theme_density') || '6');
+if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
+
+// Theme toggle
+const tb = document.getElementById('theme-toggle');
+function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('sp_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
+setTheme(document.documentElement.dataset.theme || 'light');
+tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
+
+loadFacets();
+loadGridPage();
+</script>
+<!-- ============================================================
+     DW UNIVERSAL CONTACT MODULE — fashion-house UX
+     Inject before </body> in every DW-family sister site.
+     Self-contained: CSS + 4 modals + JS submission handlers.
+     Uses host site's CSS vars (--bg, --fg, --gold, --rule).
+     ============================================================ -->
+<style>
+  /* === MODAL BASE === */
+  .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
+  .dwm.open{display:flex}
+  .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
+  @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+  .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
+  .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
+  .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
+  .dwm-close:hover{color:var(--gold)}
+  .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
+  .dwm-preview img{width:64px;height:64px;object-fit:cover}
+  .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
+  .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
+  .dwm-field{margin-bottom:14px}
+  .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
+  .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
+  .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
+  .dwm-field textarea{min-height:60px;resize:vertical}
+  .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
+  .dwm-submit:hover{opacity:0.85}
+  .dwm-submit:disabled{opacity:0.5;cursor:default}
+  .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
+  .dwm-status.ok{color:var(--sage);display:block}
+  .dwm-status.err{color:#e08070;display:block}
+  /* contact-options */
+  .dwm-options{display:flex;flex-direction:column;gap:10px}
+  .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
+  .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
+  .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
+  .dwm-option .lbl{flex:1;display:block}
+  .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
+
+/* graphics-loop pass 5: serif hero typography + nav legibility */
+.cinema h1, h1.headline { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -0.01em }
+.h-link { font-size: 13px; letter-spacing: 0.06em }
+</style>
+
+<!-- Contact options modal -->
+<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
+  <div class="dwm-box" style="max-width:440px">
+    <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
+    <h3>Contact</h3>
+    <p class="sub" id="dwmContactSub">Three ways to reach us</p>
+    <div class="dwm-options">
+      <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
+        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
+        <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
+      </button>
+      <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
+        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
+        <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
+      </button>
+      <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
+        <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
+        <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
+      </a>
+    </div>
+  </div>
+</div>
+
+<!-- Inquiry modal -->
+<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
+  <div class="dwm-box">
+    <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
+    <h3>Project Inquiry</h3>
+    <p class="sub">We'll respond within one business day</p>
+    <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
+      <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
+      <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
+      <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
+      <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
+      <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
+      <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
+      <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
+      <button type="submit" class="dwm-submit">Send Inquiry</button>
+      <div class="dwm-status" id="dwmInquiryStatus"></div>
+    </form>
+  </div>
+</div>
+
+<!-- Sample-request modal -->
+<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
+  <div class="dwm-box">
+    <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
+    <h3>Request a Sample</h3>
+    <p class="sub">Memo sample · ships free · 3–5 business days</p>
+    <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
+      <img id="dwmSampleImg" src="" alt="">
+      <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
+    </div>
+    <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
+      <input type="hidden" name="sku" id="dwmSampleSkuInput">
+      <input type="hidden" name="title" id="dwmSampleTitleInput">
+      <input type="hidden" name="image_url" id="dwmSampleImageInput">
+      <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
+      <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
+      <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
+      <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
+      <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
+        <input type="text" name="city" placeholder="City" required>
+        <input type="text" name="state" placeholder="State" required>
+        <input type="text" name="zip" placeholder="ZIP" required>
+      </div>
+      <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
+      <button type="submit" class="dwm-submit">Send Sample Request</button>
+      <div class="dwm-status" id="dwmSampleStatus"></div>
+    </form>
+  </div>
+</div>
+
+<script>
+  // Universal modal control
+  function dwmOpen(name, opts){
+    document.getElementById('dwm' + name).classList.add('open');
+    document.body.style.overflow = 'hidden';
+    if (name === 'Sample' && opts) {
+      document.getElementById('dwmSamplePreview').style.display = 'flex';
+      document.getElementById('dwmSampleImg').src = opts.image_url || '';
+      document.getElementById('dwmSampleName').textContent = opts.title || '';
+      document.getElementById('dwmSampleSku').textContent = opts.sku || '';
+      document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
+      document.getElementById('dwmSampleTitleInput').value = opts.title || '';
+      document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
+    } else if (name === 'Sample') {
+      document.getElementById('dwmSamplePreview').style.display = 'none';
+      document.getElementById('dwmSampleSkuInput').value = '';
+      document.getElementById('dwmSampleTitleInput').value = '';
+      document.getElementById('dwmSampleImageInput').value = '';
+    }
+  }
+  function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
+
+  // Universal form submit — POSTs to /api/send-{kind}
+  async function dwmSubmit(e, kind) {
+    e.preventDefault();
+    const form = e.target;
+    const data = Object.fromEntries(new FormData(form).entries());
+    const btn = form.querySelector('.dwm-submit');
+    const status = form.querySelector('.dwm-status');
+    btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
+    status.className = 'dwm-status';
+    try {
+      const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
+      if (!r.ok) throw new Error('HTTP '+r.status);
+      const j = await r.json();
+      status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
+      status.className = 'dwm-status ok';
+      btn.textContent = 'Sent ✓';
+      setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
+    } catch (err) {
+      status.textContent = 'Send failed — please email info@designerwallcoverings.com';
+      status.className = 'dwm-status err';
+      btn.disabled = false; btn.textContent = orig;
+    }
+    return false;
+  }
+
+  // Wire up "Memo samples ship free" badge in hero to open sample modal directly
+  document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
+    el.style.cursor = 'pointer';
+    el.addEventListener('click', () => dwmOpen('Sample'));
+  });
+
+  // Wire nav "Trade" link to inquiry modal
+  document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
+    a.removeAttribute('target');
+    a.removeAttribute('href');
+    a.style.cursor = 'pointer';
+    a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
+  });
+
+  // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
+  document.addEventListener('click', e => {
+    const card = e.target.closest('.card, .rail-card');
+    if (!card) return;
+    if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
+      e.preventDefault();
+      const img = card.querySelector('img');
+      const pat = card.querySelector('.pat');
+      const sku = card.getAttribute('href').replace('/sample/', '');
+      dwmOpen('Sample', {
+        sku,
+        title: pat ? pat.textContent.trim() : '',
+        image_url: img ? img.src : ''
+      });
+    }
+  }, true);
+
+// DW STANDARD sort-select wire-up (added by fleet patcher)
+(function(){
+  const sortSel = document.getElementById("sortSelect");
+  if (!sortSel) return;
+  const KEY = location.hostname.replace(/\./g, "_") + "_sort";
+  const saved = localStorage.getItem(KEY);
+  if (saved) { try { sortSel.value = saved; } catch(e){} }
+  if (typeof state !== "undefined") state.sort = sortSel.value;
+  sortSel.addEventListener("change", e => {
+    const v = e.target.value;
+    try { localStorage.setItem(KEY, v); } catch(e){}
+    if (typeof state !== "undefined") state.sort = v;
+    if (typeof resetGrid === "function") resetGrid();
+    else location.reload();
+  });
+})();
+</script>
+
+</body>
+</html>
diff --git a/public/index.html.bak.dom.1778168197471 b/public/index.html.bak.dom.1778168197471
new file mode 100644
index 0000000..bd7e0c0
--- /dev/null
+++ b/public/index.html.bak.dom.1778168197471
@@ -0,0 +1,644 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-E3VL9WM9D2"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-E3VL9WM9D2');
+</script>
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Atelier Anonyme — screen-print — numbered editions.</title>
+<meta name="description" content="Atelier Anonyme is a curated atelier dedicated entirely to screen-print. We do one thing — and we do it carefully.">
+<meta name="theme-color" content="#FAFAFA">
+<link rel="canonical" href="https://screenprintedwallpaper.com/">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet">
+<link rel="preload" as="image" href="/hero-bg.jpg" fetchpriority="high">
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Atelier Anonyme",
+  "url": "https://screenprintedwallpaper.com/",
+  "email": "info@screenprintedwallpaper.com"
+}
+</script>
+<script src="/zd-loader.js" defer></script>
+<style>
+:root {
+  --bg: #FAFAFA;
+  --paper: #000;
+  --muted: #8B7866;
+  --line: rgba(0,0,0,0.10);
+  --accent: #FFF;
+  --bg-soft: rgba(0,0,0,0.10);
+  --cols: 6;
+}
+html[data-theme="dark"] {
+  --bg: #000;
+  --paper: #FAFAFA;
+  --muted: #C9B89E;
+  --line: rgba(255,254,250,0.12);
+  --accent: #000;
+  --bg-soft: #2a1f15;
+}
+* { margin:0; padding:0; box-sizing:border-box }
+html { scroll-behavior:smooth }
+body { font-family:'Inter', sans-serif; color:var(--paper); -webkit-font-smoothing:antialiased; background:var(--bg); min-height:100vh; overflow-x:hidden }
+/* DW-FASHION-TEMPLATE-OVERRIDE */
+.section-title .accent, .footer-brand, .center-mark, h1, h2, h3 { font-family:'Inter', Georgia, serif !important; font-weight:300 !important; letter-spacing:0.20em !important;text-transform:uppercase !important; }
+
+/* ===== Auto-hide header ===== */
+header { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:22px 32px; z-index:100; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .3s }
+.h-link { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); text-decoration:none; cursor:pointer; background:transparent; border:0 }
+.h-link:hover { opacity:0.7 }
+.h-icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
+
+/* ===== Cinema hero ===== */
+.cinema { position:relative; height:100vh; width:100%; overflow:hidden }
+.cinema-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-image:url('/hero-bg.jpg') }
+.cinema-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%) }
+.corner-mark { position:absolute; top:24px; left:32px; font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4); z-index:5 }
+.corner-mark::before { content:"◆ "; margin-right:6px }
+.center-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(34px,5vw,72px); font-weight:300; letter-spacing:0.42em; text-transform:uppercase; text-align:center; color:#fff; z-index:5; mix-blend-mode:difference }
+.center-mark .tm { font-size:14px; vertical-align:super; opacity:0.7; margin-left:0.2em }
+.center-mark .sub { display:block; font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400; font-size:0.4em; letter-spacing:0.04em; text-transform:none; margin-top:14px; opacity:0.85 }
+.meta-line { position:absolute; bottom:32px; left:32px; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; font-weight:700; color:#fff; z-index:5; opacity:0.85 }
+.meta-line .num { font-size:12px; display:block; margin-top:4px; letter-spacing:0.05em }
+.enter { position:absolute; bottom:32px; right:32px; display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.36em; text-transform:uppercase; font-weight:700; color:#fff; text-decoration:none; padding-bottom:6px; border-bottom:1px solid #fff; transition:gap 0.25s; z-index:5 }
+.enter:hover { gap:22px }
+.enter svg { width:24px; height:12px }
+
+/* ===== Section ===== */
+.section { padding:96px 32px }
+.section-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line) }
+.section-title { font-size:clamp(36px,5vw,64px); font-weight:300; letter-spacing:-0.02em; line-height:1 }
+.section-title .accent { color: var(--accent); font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400 }
+.section-eyebrow { font-size:10px; letter-spacing:0.4em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:16px }
+.section-meta { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--muted); text-align:right; line-height:1.6 }
+
+/* ===== Filter bar ===== */
+.filters { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
+.chip { padding:8px 16px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:inherit }
+.chip:hover { border-color:var(--paper) }
+.chip.active { background:var(--paper); color:var(--bg); border-color:var(--paper) }
+.search { flex:0 1 280px; margin-left:auto; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 }
+.search input { flex:1; background:transparent; border:0; color:var(--paper); font-family:inherit; font-size:13px; outline:none; letter-spacing:0.04em }
+.search input::placeholder { color:var(--muted) }
+.search svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:1.5 }
+
+/* ===== Grid-density slider ===== */
+.density { display:flex; align-items:center; gap:14px; padding:6px 0; margin-bottom:24px }
+.density label { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--muted) }
+.density input[type=range] { flex:1; max-width:240px; -webkit-appearance:none; appearance:none; height:1px; background:var(--line); outline:none }
+.density input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50% }
+.density input[type=range]::-moz-range-thumb { width:14px; height:14px; background:var(--accent); cursor:pointer; border-radius:50%; border:0 }
+.density .ct { font-size:11px; color:var(--muted); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; min-width:80px }
+
+/* ===== Stats line ===== */
+.stat-line { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:24px }
+
+/* ===== Product grid (novasuede pattern: flush grid + slide-up overlay) ===== */
+.grid { display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:0 }
+.card { position:relative; aspect-ratio:1/1.15; cursor:pointer; overflow:hidden; border:1px solid var(--bg); transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1); background:var(--bg-soft) }
+.card:hover { transform:scale(1.04); z-index:5 }
+.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease }
+.card .overlay { position:absolute; left:0; right:0; bottom:0; padding:20px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); transform:translateY(48%); opacity:0.85; transition:transform 0.3s ease, opacity 0.3s ease }
+.card:hover .overlay { transform:translateY(0); opacity:1 }
+.card .pat { font-size:13px; font-weight:600; letter-spacing:0.02em; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
+.card .ven { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; opacity:0.7; font-weight:500; margin-top:4px }
+.card .actions { margin-top:10px; display:flex; gap:6px }
+.card .sample-btn { flex:1; padding:7px 10px; background:#fff; color:#000; font-family:inherit; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; border:0; cursor:pointer; text-align:center; transition:all 0.2s }
+.card .sample-btn:hover { background:var(--accent); color:#fff }
+
+@media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
+@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .density { display:none } }
+
+.sentinel { height:1px }
+.loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700 }
+
+/* ===== Footer ===== */
+footer { padding:64px 32px 32px; border-top:1px solid var(--line); margin-top:32px }
+.footer-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px }
+.footer-brand { font-size:24px; font-weight:300; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:12px }
+.footer-text { font-size:13px; line-height:1.6; color:var(--muted); max-width:380px }
+.footer-col h4 { font-size:10px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:var(--paper); margin-bottom:18px }
+.footer-col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; background:transparent; border:0; font-family:inherit; padding:0; text-align:left }
+.footer-col a:hover { color:var(--accent) }
+.footer-bottom { max-width:1400px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
+
+@media (max-width:720px) {
+  .corner-mark, .meta-line, .enter { font-size:10px }
+  .center-mark { font-size:30px; letter-spacing:0.32em }
+  .section, footer { padding-left:20px; padding-right:20px }
+  .footer-grid { grid-template-columns:1fr; gap:32px }
+  .search { margin-left:0; flex:1 1 100% }
+}
+
+.theme-toggle { background:transparent; border:1px solid var(--line); width:32px; height:32px; cursor:pointer; color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:all .15s; padding:0 }
+.theme-toggle:hover { border-color:var(--accent); color:var(--accent) }
+
+/* ===== WCAG 2.4.7 — keyboard focus indicators ===== */
+/* Strictly :focus-visible so mouse clicks do NOT show the ring */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+</style>
+<script>
+(function(){ try { var t = localStorage.getItem('sp_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
+</script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap">
+</head>
+<body>
+
+<header>
+  <button class="h-link" onclick="dwmOpen('Contact')" aria-label="Contact"><svg class="h-icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg><span>Contact</span></button>
+  <button class="theme-toggle" id="theme-toggle" aria-label="Theme toggle">☾</button>
+</header>
+
+<section class="cinema">
+  <div class="cinema-bg"></div>
+  <div class="corner-mark">Hand-Pulled</div>
+  <div class="center-mark">Atelier Anonyme<span class="tm">.</span><span class="sub">Pulled. Pressed. Printed.</span></div>
+  <div class="meta-line">Silkscreen · Block-Print · Hand-Pulled<span class="num" id="heroNum"></span></div>
+  <a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
+</section>
+
+<section class="section" id="shop">
+  <div class="section-header">
+    <div>
+      <div class="section-eyebrow">The Collection</div>
+      <h2 class="section-title"><span class="accent" id="totalCount">—</span> Patterns.</h2>
+    </div>
+    <div class="section-meta">Silkscreen · Block-Print · Hand-Pulled</div>
+  </div>
+
+  <div class="filters" id="facets">
+    <button class="chip active" data-facet="all">All</button>
+  </div>
+
+  <div class="density">
+    <label>Sort</label>
+    <select id="sortSelect" aria-label="Sort products" style="background:transparent;color:inherit;border:1px solid var(--line,rgba(255,255,255,.2));font:inherit;font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:4px 8px;cursor:pointer;outline:none;margin-right:14px">
+      <option value="newest">Newest</option>
+      <option value="color">Color</option>
+      <option value="style">Style</option>
+      <option value="sku">SKU A→Z</option>
+      <option value="title">Title A→Z</option>
+      <option value="price-asc">Price ↑</option>
+      <option value="price-desc">Price ↓</option>
+    </select>
+    <label>Grid</label>
+    <input type="range" id="densitySlider" min="4" max="12" step="1" value="6" aria-label="Grid columns">
+    <span class="ct" id="densityLabel">6 cols</span>
+    <div class="search">
+      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5.5-5.5"/></svg>
+      <input type="text" id="searchInput" placeholder="Search by pattern, color…" autocomplete="off">
+    </div>
+  </div>
+
+  <div class="stat-line" id="statLine">Loading…</div>
+  <div class="grid" id="grid"></div>
+  <div class="loading" id="loading">Loading more…</div>
+  <div class="sentinel" id="sentinel"></div>
+</section>
+
+<footer>
+  <div class="footer-grid">
+    <div>
+      <div class="footer-brand">Atelier Anonyme</div>
+      <p class="footer-text">Atelier Anonyme is a curated atelier dedicated entirely to screen-print. We do one thing — and we do it carefully.</p>
+      <p class="footer-text" style="margin-top:14px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--paper);opacity:0.7"><a href="/about" style="color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)">About →</a></p>
+    </div>
+    <div class="footer-col">
+      <h4>Aesthetic</h4>
+      <div id="footerFacets"></div>
+    </div>
+    <div class="footer-col">
+      <h4>Trade</h4>
+      <button onclick="dwmOpen('Inquiry')">Project Inquiry</button>
+      <button onclick="dwmOpen('Sample')">Request Sample</button>
+      <button onclick="dwmOpen('Contact')">Contact</button>
+    </div>
+  </div>
+  <div class="footer-bottom">
+    <span>screenprintedwallpaper.com · Atelier Anonyme</span>
+    <span><a href="mailto:info@screenprintedwallpaper.com" style="color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px">info@screenprintedwallpaper.com</a></span>
+    <span id="footerStat"></span>
+  </div>
+</footer>
+
+<script>
+// mini-constellation — 43 niche-stars, current site highlighted in gold
+(function(){
+  const SLUG = "screenprintedwallpaper";
+  const NICHES = [
+    ['silkwallpaper','Silk','mat'],['silkwallcoverings','Silk W/C','mat'],['linenwallpaper','Linen','mat'],
+    ['jutewallpaper','Jute','mat'],['raffiawallcoverings','Raffia W/C','mat'],['raffiawalls','Raffia Walls','mat'],
+    ['corkwallcovering','Cork','mat'],['fabricwallpaper','Fabric','mat'],['textilewallpaper','Textile','mat'],
+    ['metallicwallpaper','Metallic','mat'],['silverleafwallpaper','Silver Leaf','mat'],['vinylwallpaper','Vinyl','mat'],
+    ['micawallpaper','Mica','mat'],['madagascarwallpaper','Madagascar','mat'],['mylarwallpaper','Mylar','mat'],
+    ['suedewallpaper','Suede','mat'],
+    ['1800swallpaper','1800s','dec'],['1890swallpaper','1890s','dec'],['1900swallpaper','1900s','dec'],
+    ['1920swallpaper','1920s','dec'],['1930swallpaper','1930s','dec'],['1940swallpaper','1940s','dec'],
+    ['1950swallpaper','1950s','dec'],['1960swallpaper','1960s','dec'],['1970swallpaper','1970s','dec'],
+    ['1980swallpaper','1980s','dec'],['retrowalls','Retro','dec'],['wallpapersback','W. Back','dec'],
+    ['agedwallpaper','Aged','cra'],['handcraftedwallpaper','Handcrafted','cra'],['museumwallpaper','Museum','cra'],
+    ['restorationwallpaper','Restoration','cra'],['pastelwallpaper','Pastel','cra'],['glitterwalls','Glitter','cra'],
+    ['greenwallcoverings','Green','cra'],['naturalwallcoverings','Natural','cra'],['saloonwallpaper','Saloon','cra'],
+    ['contractwallpaper','Contract','use'],['hotelwallcoverings','Hotel','use'],['hospitalitywallpaper','Hospitality','use'],
+    ['healthcarewallpaper','Healthcare','use'],['restaurantwallpaper','Restaurant','use'],['architecturalwallcoverings','Architectural','use']
+  ];
+  const COLOR = { mat:'#c9b687', dec:'#b86a4a', cra:'#6b8e6f', use:'#4a6b8e' };
+  const W = 1080, H = 200, BANDS = ['mat','dec','cra','use'];
+  const groups = { mat:[], dec:[], cra:[], use:[] };
+  for (const n of NICHES) groups[n[2]].push(n);
+  const svg = document.getElementById('miniConst');
+  if (!svg) return;
+  const bandW = W / BANDS.length;
+  let nodes = '';
+  BANDS.forEach((band, bi) => {
+    const list = groups[band];
+    const cx = bi * bandW + bandW / 2;
+    list.forEach((n, i) => {
+      const t = list.length === 1 ? 0.5 : i / (list.length - 1);
+      // deterministic jitter per slug
+      let h = 0; for (let k = 0; k < n[0].length; k++) h = (h * 31 + n[0].charCodeAt(k)) | 0;
+      const jx = ((h & 0xff) / 255 - 0.5) * (bandW * 0.5);
+      const jy = (((h >> 8) & 0xff) / 255 - 0.5) * 6;  // tightened from 14 → 6 to prevent same-band collisions (16 mat nodes / 144px = 9px spacing)
+      const x = cx + jx, y = 28 + t * (H - 56) + jy;
+      const isCurrent = n[0] === SLUG;
+      const r = isCurrent ? 8 : 4;
+      const op = isCurrent ? 1 : 0.55;
+      nodes += `<g class="mc-node" data-slug="${n[0]}" data-label="${n[1]}" style="cursor:pointer">
+        <circle cx="${x}" cy="${y}" r="${r}" fill="url(#dna-${band})" fill-opacity="${op}" stroke="${COLOR[band]}" stroke-opacity="${isCurrent?1:0.7}" stroke-width="${isCurrent?2:1}">
+          <title>${n[1]} — ${n[0]}.com</title>
+        </circle>
+        ${isCurrent ? `<circle cx="${x}" cy="${y}" r="${r+5}" fill="none" stroke="${COLOR[band]}" stroke-opacity="0.4" stroke-width="1"><animate attributeName="r" values="${r+5};${r+12};${r+5}" dur="2.4s" repeatCount="indefinite"/><animate attributeName="stroke-opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/></circle>` : ''}
+      </g>`;
+    });
+  });
+  // append nodes after defs
+  svg.insertAdjacentHTML('beforeend', nodes);
+  svg.querySelectorAll('.mc-node').forEach(n => {
+    n.addEventListener('mouseenter', () => n.querySelector('circle').setAttribute('fill-opacity', '1'));
+    n.addEventListener('mouseleave', e => {
+      const isCurrent = n.dataset.slug === SLUG;
+      n.querySelector('circle').setAttribute('fill-opacity', isCurrent ? '1' : '0.55');
+    });
+    n.addEventListener('click', () => window.open('https://' + n.dataset.slug + '.com', '_blank'));
+  });
+})();
+</script>
+
+<script>
+const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
+const LABELS = {"screen-print":"Screen print"};
+
+function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c])); }
+// Image-URL allowlist: only DW Shopify CDN + designerwallcoverings.com (defends against XSS via crafted products.json)
+function safeImg(u) { return /^https:\/\/(?:cdn\.shopify\.com|designerwallcoverings\.com)\//.test(u || '') ? u : '/hero-bg.jpg'; }
+function cardHTML(p) {
+  const eager = state.page === 1;
+  return '<img loading="' + (eager ? 'eager' : 'lazy') + '"' + (eager ? ' fetchpriority="high"' : '') + ' src="' + escAttr(safeImg(p.image_url)) + '" alt="' + escAttr(p.title) + '">'
+    + '<div class="overlay">'
+    + '<div class="pat">' + escAttr(p.pattern_name || p.title) + '</div>'
+    + '<div class="ven">' + escAttr((p.vendor || '').replace(/-/g, ' ')) + '</div>'
+    + '<div class="actions">'
+    + '<button class="sample-btn" onclick="event.stopPropagation();dwmOpen(\'Sample\',' + JSON.stringify({sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}).replace(/"/g,'&quot;') + ')">Sample</button>'
+    + '</div></div>';
+}
+
+async function loadFacets() {
+  let f;
+  try {
+    const r = await fetch('/api/facets');
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    f = await r.json();
+  } catch (e) { console.error('loadFacets failed:', e); return; }
+  const el = document.getElementById('facets');
+  for (const [k, v] of Object.entries(f.aesthetics).sort((a,b) => b[1] - a[1])) {
+    const b = document.createElement('button');
+    b.className = 'chip'; b.dataset.facet = k;
+    b.innerHTML = (LABELS[k] || k) + ' <span style="opacity:.55;font-weight:500;margin-left:4px">' + v + '</span>';
+    el.appendChild(b);
+  }
+  el.addEventListener('click', e => {
+    if (e.target.tagName !== 'BUTTON') return;
+    document.querySelectorAll('#facets button').forEach(b => b.classList.remove('active'));
+    e.target.classList.add('active');
+    state.facet = e.target.dataset.facet;
+    resetGrid();
+  });
+  document.getElementById('totalCount').textContent = f.total;
+  document.getElementById('footerStat').textContent = f.total + ' patterns · live archive';
+  // Footer aesthetic links
+  const footerEl = document.getElementById('footerFacets');
+  for (const [k] of Object.entries(f.aesthetics)) {
+    const b = document.createElement('button');
+    b.textContent = LABELS[k] || k;
+    b.onclick = () => { state.facet = k; resetGrid(); document.querySelectorAll('#facets button').forEach(x => x.classList.toggle('active', x.dataset.facet === k)); document.getElementById('shop').scrollIntoView({behavior:'smooth'}); };
+    footerEl.appendChild(b);
+  }
+}
+
+function resetGrid() {
+  state.page = 1; state.exhausted = false;
+  document.getElementById('grid').innerHTML = '';
+  document.getElementById('loading').textContent = 'Loading…';
+  loadGridPage();
+}
+
+async function loadGridPage() {
+  if (state.loading || state.exhausted) return;
+  state.loading = true;
+  const params = new URLSearchParams({ page:state.page, limit:24 });
+  if (state.q) params.set('q', state.q);
+  if (state.facet !== 'all') params.set('aesthetic', state.facet);
+  let data;
+  try {
+    const r = await fetch('/api/products?' + params);
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+    data = await r.json();
+  } catch (e) {
+    console.error('loadGridPage failed:', e);
+    document.getElementById('loading').textContent = '— offline — refresh to retry —';
+    state.loading = false;
+    return;
+  }
+  state.total = data.total; state.pages = data.pages;
+
+  if (state.page === 1) {
+    document.getElementById('statLine').textContent = data.total + ' patterns · ' + (state.facet === 'all' ? 'all aesthetics' : (LABELS[state.facet] || state.facet)) + (state.q ? ' · matching "' + state.q + '"' : '');
+  }
+  const grid = document.getElementById('grid');
+  for (const p of data.items) {
+    const a = document.createElement('a');
+    a.className = 'card'; a.href = '#'; a.onclick = (e) => { e.preventDefault(); dwmOpen('Sample',{sku:p.sku||p.handle, title:p.title, image_url:safeImg(p.image_url)}); };
+    a.innerHTML = cardHTML(p);
+    grid.appendChild(a);
+  }
+  if (state.page >= state.pages || data.items.length === 0) {
+    state.exhausted = true;
+    document.getElementById('loading').textContent = state.total > 0 ? '— end of archive · ' + state.total + ' patterns —' : '';
+  } else state.page++;
+  state.loading = false;
+}
+
+const io = new IntersectionObserver(es => { for (const e of es) if (e.isIntersecting) loadGridPage(); }, { rootMargin:'600px 0px' });
+io.observe(document.getElementById('sentinel'));
+
+document.getElementById('searchInput').addEventListener('input', e => {
+  state.q = e.target.value.trim();
+  clearTimeout(window._t);
+  window._t = setTimeout(resetGrid, 220);
+});
+
+// Density slider
+const slider = document.getElementById('densitySlider');
+const dlabel = document.getElementById('densityLabel');
+function setDensity(n) {
+  document.documentElement.style.setProperty('--cols', n);
+  dlabel.textContent = n + ' cols';
+  try { localStorage.setItem('sp_theme_density', n); } catch(e){}
+}
+slider.addEventListener('input', e => setDensity(parseInt(e.target.value)));
+const savedDensity = parseInt(localStorage.getItem('sp_theme_density') || '6');
+if (savedDensity >= 4 && savedDensity <= 12) { slider.value = savedDensity; setDensity(savedDensity); }
+
+// Theme toggle
+const tb = document.getElementById('theme-toggle');
+function setTheme(t){ document.documentElement.dataset.theme = t; try { localStorage.setItem('sp_theme', t); } catch(e){} tb.textContent = t === 'dark' ? '☾' : '☀'; }
+setTheme(document.documentElement.dataset.theme || 'light');
+tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
+
+loadFacets();
+loadGridPage();
+</script>
+<!-- ============================================================
+     DW UNIVERSAL CONTACT MODULE — fashion-house UX
+     Inject before </body> in every DW-family sister site.
+     Self-contained: CSS + 4 modals + JS submission handlers.
+     Uses host site's CSS vars (--bg, --fg, --gold, --rule).
+     ============================================================ -->
+<style>
+  /* === MODAL BASE === */
+  .dwm{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow-y:auto}
+  .dwm.open{display:flex}
+  .dwm-box{background:var(--bg);border:1px solid var(--rule);max-width:520px;width:100%;padding:36px 32px;position:relative;max-height:90vh;overflow-y:auto;animation:dwm-in 0.25s ease}
+  @keyframes dwm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+  .dwm-box h3{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:32px;line-height:1.05;margin-bottom:6px;color:var(--fg);letter-spacing:-0.01em}
+  .dwm-box .sub{color:var(--muted);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500}
+  .dwm-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer;width:32px;height:32px;line-height:1;padding:0}
+  .dwm-close:hover{color:var(--gold)}
+  .dwm-preview{display:flex;gap:14px;align-items:center;padding:12px;background:var(--bg-soft);margin-bottom:18px}
+  .dwm-preview img{width:64px;height:64px;object-fit:cover}
+  .dwm-preview .pn{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;line-height:1.2;color:var(--fg)}
+  .dwm-preview .pc{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
+  .dwm-field{margin-bottom:14px}
+  .dwm-field label{display:block;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
+  .dwm-field input,.dwm-field textarea,.dwm-field select{width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 4px;font-size:14px;font-family:inherit;color:var(--fg);outline:none;transition:border-color 0.2s}
+  .dwm-field input:focus,.dwm-field textarea:focus{border-bottom-color:var(--gold)}
+  .dwm-field textarea{min-height:60px;resize:vertical}
+  .dwm-submit{background:var(--gold);color:#000;border:0;padding:14px 28px;font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:700;cursor:pointer;width:100%;margin-top:8px;transition:opacity 0.15s}
+  .dwm-submit:hover{opacity:0.85}
+  .dwm-submit:disabled{opacity:0.5;cursor:default}
+  .dwm-status{margin-top:14px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;display:none}
+  .dwm-status.ok{color:var(--sage);display:block}
+  .dwm-status.err{color:#e08070;display:block}
+  /* contact-options */
+  .dwm-options{display:flex;flex-direction:column;gap:10px}
+  .dwm-option{display:flex;align-items:center;gap:14px;padding:18px 20px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:inherit;font-size:11px;letter-spacing:0.20em;text-transform:uppercase;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s;text-align:left;width:100%}
+  .dwm-option:hover{border-color:var(--gold);color:var(--gold)}
+  .dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
+  .dwm-option .lbl{flex:1;display:block}
+  .dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
+
+/* graphics-loop pass 5: serif hero typography + nav legibility */
+.cinema h1, h1.headline { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -0.01em }
+.h-link { font-size: 13px; letter-spacing: 0.06em }
+</style>
+
+<!-- Contact options modal -->
+<div class="dwm" id="dwmContact" onclick="if(event.target===this)dwmClose('Contact')">
+  <div class="dwm-box" style="max-width:440px">
+    <button class="dwm-close" onclick="dwmClose('Contact')" aria-label="Close">×</button>
+    <h3>Contact</h3>
+    <p class="sub" id="dwmContactSub">Three ways to reach us</p>
+    <div class="dwm-options">
+      <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Inquiry')">
+        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3z"/></svg>
+        <span class="lbl">Send an Inquiry<span class="val">Project name · scope · all the details</span></span>
+      </button>
+      <button class="dwm-option" type="button" onclick="dwmClose('Contact');dwmOpen('Sample')">
+        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14"/><path d="M4 10h16M9 6V3h6v3"/></svg>
+        <span class="lbl">Request a Sample<span class="val">Memo sample · ships free · 3–5 business days</span></span>
+      </button>
+      <a class="dwm-option" id="dwmContactEmailLink" href="mailto:info@{{DOMAIN}}">
+        <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>
+        <span class="lbl">Email Us<span class="val" id="dwmContactEmailLabel">info@{{DOMAIN}}</span></span>
+      </a>
+    </div>
+  </div>
+</div>
+
+<!-- Inquiry modal -->
+<div class="dwm" id="dwmInquiry" onclick="if(event.target===this)dwmClose('Inquiry')">
+  <div class="dwm-box">
+    <button class="dwm-close" onclick="dwmClose('Inquiry')" aria-label="Close">×</button>
+    <h3>Project Inquiry</h3>
+    <p class="sub">We'll respond within one business day</p>
+    <form id="dwmInquiryForm" onsubmit="return dwmSubmit(event,'inquiry')">
+      <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
+      <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
+      <div class="dwm-field"><label>Phone</label><input type="tel" name="phone"></div>
+      <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
+      <div class="dwm-field"><label>Project Name</label><input type="text" name="projectName" required></div>
+      <div class="dwm-field"><label>Project Scope</label><textarea name="projectScope" placeholder="Square footage · room count · timeline" required></textarea></div>
+      <div class="dwm-field"><label>Additional Information</label><textarea name="message" placeholder="Patterns of interest, finish preferences, budget"></textarea></div>
+      <button type="submit" class="dwm-submit">Send Inquiry</button>
+      <div class="dwm-status" id="dwmInquiryStatus"></div>
+    </form>
+  </div>
+</div>
+
+<!-- Sample-request modal -->
+<div class="dwm" id="dwmSample" onclick="if(event.target===this)dwmClose('Sample')">
+  <div class="dwm-box">
+    <button class="dwm-close" onclick="dwmClose('Sample')" aria-label="Close">×</button>
+    <h3>Request a Sample</h3>
+    <p class="sub">Memo sample · ships free · 3–5 business days</p>
+    <div class="dwm-preview" id="dwmSamplePreview" style="display:none">
+      <img id="dwmSampleImg" src="" alt="">
+      <div><div class="pn" id="dwmSampleName"></div><div class="pc" id="dwmSampleSku"></div></div>
+    </div>
+    <form id="dwmSampleForm" onsubmit="return dwmSubmit(event,'sample')">
+      <input type="hidden" name="sku" id="dwmSampleSkuInput">
+      <input type="hidden" name="title" id="dwmSampleTitleInput">
+      <input type="hidden" name="image_url" id="dwmSampleImageInput">
+      <div class="dwm-field"><label>Name</label><input type="text" name="name" required></div>
+      <div class="dwm-field"><label>Email</label><input type="email" name="email" required></div>
+      <div class="dwm-field"><label>Company / Trade</label><input type="text" name="company"></div>
+      <div class="dwm-field"><label>Shipping Address</label><input type="text" name="address" placeholder="Street" required></div>
+      <div class="dwm-field" style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px">
+        <input type="text" name="city" placeholder="City" required>
+        <input type="text" name="state" placeholder="State" required>
+        <input type="text" name="zip" placeholder="ZIP" required>
+      </div>
+      <div class="dwm-field"><label>Notes (optional)</label><textarea name="message" placeholder="Project, sq.ft., timing"></textarea></div>
+      <button type="submit" class="dwm-submit">Send Sample Request</button>
+      <div class="dwm-status" id="dwmSampleStatus"></div>
+    </form>
+  </div>
+</div>
+
+<script>
+  // Universal modal control
+  function dwmOpen(name, opts){
+    document.getElementById('dwm' + name).classList.add('open');
+    document.body.style.overflow = 'hidden';
+    if (name === 'Sample' && opts) {
+      document.getElementById('dwmSamplePreview').style.display = 'flex';
+      document.getElementById('dwmSampleImg').src = opts.image_url || '';
+      document.getElementById('dwmSampleName').textContent = opts.title || '';
+      document.getElementById('dwmSampleSku').textContent = opts.sku || '';
+      document.getElementById('dwmSampleSkuInput').value = opts.sku || '';
+      document.getElementById('dwmSampleTitleInput').value = opts.title || '';
+      document.getElementById('dwmSampleImageInput').value = opts.image_url || '';
+    } else if (name === 'Sample') {
+      document.getElementById('dwmSamplePreview').style.display = 'none';
+      document.getElementById('dwmSampleSkuInput').value = '';
+      document.getElementById('dwmSampleTitleInput').value = '';
+      document.getElementById('dwmSampleImageInput').value = '';
+    }
+  }
+  function dwmClose(name){ document.getElementById('dwm'+name).classList.remove('open'); document.body.style.overflow=''; }
+
+  // Universal form submit — POSTs to /api/send-{kind}
+  async function dwmSubmit(e, kind) {
+    e.preventDefault();
+    const form = e.target;
+    const data = Object.fromEntries(new FormData(form).entries());
+    const btn = form.querySelector('.dwm-submit');
+    const status = form.querySelector('.dwm-status');
+    btn.disabled = true; const orig = btn.textContent; btn.textContent = 'Sending…';
+    status.className = 'dwm-status';
+    try {
+      const r = await fetch('/api/send-' + kind, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
+      if (!r.ok) throw new Error('HTTP '+r.status);
+      const j = await r.json();
+      status.textContent = kind === 'sample' ? 'Sample request sent — ships within 3–5 business days' : 'Inquiry sent — we respond within 1 business day';
+      status.className = 'dwm-status ok';
+      btn.textContent = 'Sent ✓';
+      setTimeout(() => { dwmClose(kind === 'sample' ? 'Sample' : 'Inquiry'); btn.disabled = false; btn.textContent = orig; status.className = 'dwm-status'; form.reset(); }, 2800);
+    } catch (err) {
+      status.textContent = 'Send failed — please email info@designerwallcoverings.com';
+      status.className = 'dwm-status err';
+      btn.disabled = false; btn.textContent = orig;
+    }
+    return false;
+  }
+
+  // Wire up "Memo samples ship free" badge in hero to open sample modal directly
+  document.querySelectorAll('.hero .badge, [data-open-sample]').forEach(el => {
+    el.style.cursor = 'pointer';
+    el.addEventListener('click', () => dwmOpen('Sample'));
+  });
+
+  // Wire nav "Trade" link to inquiry modal
+  document.querySelectorAll('nav a[href*="designerwallcoverings.com"]').forEach(a => {
+    a.removeAttribute('target');
+    a.removeAttribute('href');
+    a.style.cursor = 'pointer';
+    a.addEventListener('click', e => { e.preventDefault(); dwmOpen('Contact'); });
+  });
+
+  // Override product card clicks — open Sample modal pre-filled instead of redirecting to DW
+  document.addEventListener('click', e => {
+    const card = e.target.closest('.card, .rail-card');
+    if (!card) return;
+    if (card.tagName === 'A' && (card.getAttribute('href') || '').startsWith('/sample/')) {
+      e.preventDefault();
+      const img = card.querySelector('img');
+      const pat = card.querySelector('.pat');
+      const sku = card.getAttribute('href').replace('/sample/', '');
+      dwmOpen('Sample', {
+        sku,
+        title: pat ? pat.textContent.trim() : '',
+        image_url: img ? img.src : ''
+      });
+    }
+  }, true);
+
+// DW STANDARD sort-select wire-up (added by fleet patcher)
+(function(){
+  const sortSel = document.getElementById("sortSelect");
+  if (!sortSel) return;
+  const KEY = location.hostname.replace(/\./g, "_") + "_sort";
+  const saved = localStorage.getItem(KEY);
+  if (saved) { try { sortSel.value = saved; } catch(e){} }
+  if (typeof state !== "undefined") state.sort = sortSel.value;
+  sortSel.addEventListener("change", e => {
+    const v = e.target.value;
+    try { localStorage.setItem(KEY, v); } catch(e){}
+    if (typeof state !== "undefined") state.sort = v;
+    if (typeof resetGrid === "function") resetGrid();
+    else location.reload();
+  });
+})();
+</script>
+
+</body>
+</html>

← d825bdf graphic-loop pass 5: serif hero typography (Cormorant Garamo  ·  back to Screenprintedwallpaper  ·  graphic-loop pass 9: real site name + 20-image hero rotation 3f2589b →