Ship gallery assets as LFS tar (fix broken images)

static/index.html

@@ -719,9 +719,18 @@
 
   /* ---------- how-it-works ---------- */
   .head-right {
-    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
+    display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
   }
-  .head-right .how-link { justify-content: center; }
+  .head-link {
+    display: inline-flex; align-items: center; gap: 7px;
+    font-size: 12.5px; font-weight: 600; color: var(--text-dim);
+    text-decoration: underline;
+    text-decoration-color: var(--text-dim);
+    text-underline-offset: 3px;
+    cursor: pointer; transition: color .15s;
+  }
+  .head-link:hover { color: var(--text); text-decoration-color: var(--accent); }
+  .head-link svg { flex: 0 0 auto; }
   .how-link {
     display: inline-flex; align-items: center; gap: 8px;
     background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
@@ -813,8 +822,8 @@
       <div class="brand-sub">machine learning powered color rebuild</div>
     </div>
     <div class="head-right">
-      <a class="how-link" id="howOpen"><span class="q">?</span> How does it work</a>
-      <a class="how-link" id="privacyOpen"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><rect x="4" y="10.5" width="16" height="10" rx="2.5"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></svg> Your privacy is guaranteed</a>
+      <a class="head-link" id="howOpen"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="2.5"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/><circle cx="12" cy="12" r="2.4"/></svg><span>How the ML algorithm works here</span></a>
+      <a class="head-link" id="privacyOpen"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><rect x="4" y="10.5" width="16" height="10" rx="2.5"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></svg><span>Your privacy is strictly guaranteed</span></a>
     </div>
   </header>
   <h1 class="hero-title">Extract the look of <em>any film and frame</em>.</h1>
@@ -1012,6 +1021,15 @@
     <h2>How Deep Analog works</h2>
     <div class="sub">From a single reference image to a reusable film look — in seconds</div>
 
+    <p>In plain English: Deep Analog <b>reverse-engineers film through data</b>. During
+    training, the model studied thousands of photograph pairs — the same picture with and
+    without a look applied — over and over, hundreds of thousands of exposures in total,
+    until it learned the hidden mapping between <i>how an image looks</i> and <i>the recipe
+    that makes it look that way</i>. It's like an apprentice darkroom printer who has studied
+    so many of the master's prints that, shown any new frame just once, they can write down
+    the complete formula — color, tone, grain, glow — to recreate it. That written-down
+    formula is exactly what this site hands you.</p>
+
     <img class="figure" src="static/how/teaser.jpg" alt="Deep Analog teaser: reference film scan to predicted LUT to rendered photo">
 
     <h4><span class="step-n">1</span>Two networks read your reference</h4>