Fix emoji play button on mobile (#8)

* Rewrite README to reflect the PlotFlow brand

Lead with what PlotFlow is (pen-plotter art house, one-continuous-line
mobile suit editions) and the process, while keeping the local-run,
deploy, and structure notes.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Crop plots to bounding box for consistent sizing

Compute each suit's bounding box at runtime (getBBox) and crop the
viewBox to a padded version, so every edition fills its card and the
live-plot stage at a consistent scale instead of being letterboxed in
the original canvas. Fix the paper bed to a single 4:3 shape so the
canvas is consistent across designs, and reset the animation clock on
load so the live plot always starts from a blank sheet.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Fix live plot blank-start flash and rename to PLOTFLOW

Hide the path before swapping suit data so the old dash values don't
flash the full path for a frame. Rename "PLOTFLOW ART HOUSE" to
"PLOTFLOW" in all footer copyright lines.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Fix live plot revealing whole path at once

The animated hero path used vector-effect:non-scaling-stroke, which
measures stroke-dasharray in screen pixels while getTotalLength returns
user units. The mismatch made the full path render as one solid dash
(visible immediately) with the trace drawing over it. Drop
non-scaling-stroke from the animated path and set its width in user
units per-load so it stays ~1.2px. Static shop-card paths are unchanged.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Remove "art house" from brand copy

Replace "art house" with "studio" in the hero sub, contact page, README,
and design system doc; drop "ART HOUSE" from the README copyright line.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Plot live drawing on a canvas instead of dash-offset

The suit paths contain thousands of M-command subpaths, which the CSS
stroke-dashoffset reveal renders all at once — so the whole design
appeared instantly instead of being traced. Replace the dash technique
with progressive canvas stroking: walk the geometry with
getPointAtLength, lifting the pen at subpath jumps, so ink only appears
where the pen has passed. The SVG path is kept for geometry only
(stroke:none) and the pen reticle stays on top.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Replace 'avant-garde' with 'independent' in brand copy

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Add multi-item cart with Stripe checkout + mobile hero layout

Cart: client-side cart (localStorage) with a slide-out drawer, nav
count badge, and per-edition Acquire buttons. Checkout posts edition
keys+quantities to a Cloudflare Worker that resolves prices server-side
and creates a Stripe Checkout Session (prices never trusted from the
client). Adds success.html, scripts/config.js (public endpoint config),
and worker/ (Worker + wrangler.toml + setup README). Secrets stay out of
the repo via wrangler secrets.

Mobile: taller portrait plot bed and a reordered hero stack
(plot › progress › controls › lockup) so controls no longer overlap.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Multi-item cart + Stripe checkout, mobile hero layout, copy tweak

- Cart: localStorage cart, slide-out drawer, nav badge, per-edition
  Acquire buttons; checkout posts keys+qty to a Cloudflare Worker that
  resolves prices server-side and creates a Stripe Checkout Session.
  Adds success.html, scripts/config.js, scripts/cart.js, and worker/.
- Mobile: taller portrait plot bed and reordered hero stack so the
  controls no longer overlap.
- Copy: 'avant-garde' -> 'independent'.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Site polish: SEO/OG meta, favicon, 404, sitemap, footer link wiring

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

* Fix emoji play button on mobile by adding text variation selector

Appends U+FE0E after ▶ and ▸ characters so mobile Safari renders
them as text glyphs instead of colored emoji.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: ddyson1

index.html

@@ -63,7 +63,7 @@ <h1>PLOTFLOW<span class="s">*</span></h1>
           <path id="pen-x" d="" stroke="#15140f" stroke-width="1.6" vector-effect="non-scaling-stroke"></path>
         </g>
       </svg>
-      <div class="replay" id="replay"><span>▶ Plot again</span></div>
+      <div class="replay" id="replay"><span>▶&#xFE0E; Plot again</span></div>
     </div>
   </div>
 
@@ -79,7 +79,7 @@ <h1>PLOTFLOW<span class="s">*</span></h1>
     <div class="selwrap"><select id="suit"></select></div>
     <button class="btn pri" id="play">Pause</button>
     <button class="btn" id="restart">Restart</button>
-    <button class="btn" id="skip">Skip ▸▸</button>
+    <button class="btn" id="skip">Skip ▸︎▸︎</button>
     <div class="seg" id="speed"><button data-s="0.5">0.5×</button><button data-s="1" class="on">1×</button><button data-s="2">2×</button><button data-s="4">4×</button></div>
   </div>
 </header>

scripts/cart.js

@@ -149,6 +149,13 @@
     if (cartBtn) { e.preventDefault(); openDrawer(); }
   });
 
+<<<<<<< HEAD
+  // public API
+  window.PlotflowCart = { add: add, remove: remove, clear: clear, open: openDrawer, count: count };
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", function () { build(); render(); });
+  else { build(); render(); }
+=======
   var toastEl, toastT;
   function toast(msg) {
     if (!toastEl) { toastEl = document.createElement("div"); toastEl.className = "cart-toast"; document.body.appendChild(toastEl); }
@@ -175,4 +182,5 @@
   function init() { build(); render(); checkCancelled(); }
   if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
   else { init(); }
+>>>>>>> a4f47b5b80479b6bdd236703ae93d873d3c42872
 })();

scripts/shop.js

@@ -27,7 +27,7 @@
         '<div class="jp">' + s.jp + '</div>' +
         '<span class="ast star">' + STAR + '</span>' +
         '<div class="foot"><span class="tiny">' + s.code + '</span><span class="tiny">一筆書き</span></div>' +
-        '<button class="plotbtn" data-plot="' + key + '">▶ Plot</button>' +
+        '<button class="plotbtn" data-plot="' + key + '">▶︎ Plot</button>' +
       '</div>' +
       '<div class="buy"><div><div class="ed">' + s.edition + '</div><div class="t">' + s.code + ' ' + s.name + '</div></div>' +
         '<div style="display:flex;align-items:center"><span class="pr">' + s.price + '</span><button class="acq" data-acq="' + key + '">Acquire</button></div></div>';

styles/styles.css

@@ -222,5 +222,8 @@ footer .grain{opacity:.3}
 .cart-checkout{width:100%;background:var(--red);color:var(--white);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:14px;border:1px solid var(--red)}
 .cart-checkout:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
 .cart-checkout:disabled{opacity:.45;cursor:not-allowed}
+<<<<<<< HEAD
+=======
 .cart-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);z-index:95;background:var(--ink);color:var(--white);border:1px solid var(--line);padding:12px 18px;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
 .cart-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
+>>>>>>> a4f47b5b80479b6bdd236703ae93d873d3c42872

success.html

@@ -9,6 +9,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Noto+Sans+JP:wght@500;700;900&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="styles/tokens.css">
 <link rel="stylesheet" href="styles/styles.css">
+<<<<<<< HEAD
+=======
 <meta name="description" content="Order confirmed.">
 <link rel="canonical" href="https://plotflow.io/success.html">
 <meta name="robots" content="noindex,follow">
@@ -24,6 +26,7 @@
 <meta name="twitter:title" content="Order confirmed — PLOTFLOW*">
 <meta name="twitter:description" content="Order confirmed.">
 <meta name="twitter:image" content="https://plotflow.io/assets/og.png">
+>>>>>>> a4f47b5b80479b6bdd236703ae93d873d3c42872
 </head>
 <body>
 
@@ -59,7 +62,11 @@ <h3>Thank you</h3>
       <div class="fc"><h5>Shop*</h5><a href="/#shop">All editions</a><a href="commissions.html">Commissions</a></div>
       <div class="fc"><h5>House*</h5><a href="/#process">Process</a><a href="manifesto.html">Manifesto</a><a href="contact.html">Contact</a></div>
       <div class="fc"><h5>Info*</h5><a href="shipping.html">Shipping</a><a href="returns.html">Returns</a><a href="faq.html">FAQ</a></div>
+<<<<<<< HEAD
+      <div class="fc"><h5>一筆書き</h5><a href="#">@plotflow</a><a href="#">Newsletter</a><a href="#">est. 2026</a></div>
+=======
       <div class="fc"><h5>一筆書き</h5><a href="https://instagram.com/plotflow" target="_blank" rel="noopener">@plotflow</a><a href="mailto:hello@plotflow.io?subject=Newsletter">Newsletter</a><span class="est">est. 2026</span></div>
+>>>>>>> a4f47b5b80479b6bdd236703ae93d873d3c42872
     </div>
     <div class="foot-bot tiny"><span>© 2026 PLOTFLOW* — PLOTTED IN THE U.S.A.</span><span>一筆書き · ONE CONTINUOUS LINE</span></div>
   </div>